Context Navigation

← Previous Ticket
Next Ticket →

#50690 closed enhancement (reported-upstream)

Gallery block CSS could be more efficient

Reported by:	sonspring	Owned by:
Priority:	normal	Milestone:
Component:	Editor	Version:	5.4.2
Severity:	normal	Keywords:
Cc:		Focuses:	css

Description

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