WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 2 weeks ago

#50690 new enhancement

Gallery block CSS could be more efficient

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

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

Change History (3)

#1 @sabernhardt
3 weeks 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
​https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/gallery/style.scss

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
3 weeks ago

@sabernhardt

Cool, thanks.

I will submit a PR sometime this week.

πŸ‘

#3 @sonspring
2 weeks ago

@sabernhardt

Just FYI:

I posted a PR here…

​https://github.com/WordPress/gutenberg/pull/24145

Thanks for the suggestion!

Note: See TracTickets for help on using tickets.