Make WordPress Core

Opened 5 months ago

Closed 7 days ago

#50690 closed enhancement (reported-upstream)

Gallery block CSS could be more efficient

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


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.


Change History (4)

#1 @sabernhardt
4 months ago

  • Component changed from Gallery to Editor

Hi @sonspring and thanks for the report!

Development for the editor is on GitHub, and the SCSS file to change should be

If you're comfortable with submitting a pull request, you could create one there and mention this ticket. (Or someone else could create a PR.)

#2 @sonspring
4 months ago


Cool, thanks.

I will submit a PR sometime this week.


#3 @sonspring
4 months ago


Just FYI:

I posted a PR here…


Thanks for the suggestion!

#4 @noisysocks
7 days ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.