[wp-trac] [WordPress Trac] #50690: Gallery block CSS could be more efficient

[WordPress Trac]

#50690: Gallery block CSS could be more efficient
-------------------------+-----------------------------
 Reporter:  sonspring    |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Gallery      |    Version:  5.4.2
 Severity:  normal       |   Keywords:
  Focuses:  css          |
-------------------------+-----------------------------
 **TL;DR** = The WordPress gallery block ''markup'' is fine. But its
 ''styling'' could use a slight overhaul.

 ---

 While looking through the CSS for `wp-block-gallery`, I noticed several
 aspects that could be simplified considerably.

 Specifically, the way that "gutters" are created between gallery items. It
 currently uses `margin-right`, which necessitates a lot of tweaks based on
 the number of columns, and involves overrides to handle `:nth-of-type(…)`
 exceptions.

 Instead, I ended up refactoring this code for our own usage at Reaktiv
 Studios, so that we can use WP generated markup in a stand-alone
 "headless" Gatsby context.

 I simply used interior `padding-left` and `padding-right` for each gallery
 item `<li>`. With a negative `margin-left` and `margin-right` offset
 applied to the parent `<ul>`.

 For what it's worth, this is also how the `wp-block-columns` work. That
 CSS could be similarly refactored. I fixed it for our own internal usage,
 and would be happy to share the code if anyone is interested.

 I have done a full write-up here, with complete code examples.

 https://gist.github.com/nathansmith/0fd31aa5bd456a39728f8061e377c376

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/50690>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform