Gallery block: update the gallery gap to load styles in header for block themes

[glendaviesnz]

What?

Moves the custom gallery gap styles to the header if the theme being used is a block theme.

Why?

Currently they are always loaded in the footer, which can cause a flash of unstyled content.

Fixes: #40936

How?

Update the gallery render to use the gutenberg_enqueue_block_support_styles method so styles get put in header for block themes

Testing Instructions

• In a site with a block theme add a Gallery block and set the block gap
• In the frontend make sure the .wp-block-gallery-{id} inline style is loaded near end of header and the gallery shows the correct gap
• Switch the site to a non block theme and reload the same gallery in the frontend and check style is now near bottom of page body and that the gap is still applied.

Screenshots or screencast

Before:

After:
Block theme

Non block theme

[glendaviesnz]

Just need to work out exactly where the method fits in terms of compat folders before this is ready for review

[ramonjd]

This is testing well for me so far, though I can't see a difference between trunk and this PR for block themes. Tried network throttling and a couple of browsers.

Here's me refreshing like it's 1999:

Moves the custom gallery gap styles to the header if the theme being used is a block theme.

Can confirm that classic theme gap styles remain in the footer while block theme gap styles are in the header.

[glendaviesnz]

This is testing well for me so far, though I can't see a difference between trunk and this PR for block themes.

Yeh, I wasn't actually able to replicate the FOUC, but figured it made better sense to have the styles in the header when possible regardless.

I have rebased it to pull in the changes to the row/column gap, so could do with another test when you have a moment please.

[ramonjd]

This LGTM.

[markhowellsmead]

In WordPress 6.0 without the plugin, the gap on a gallery block is a fixed size in the generated inline CSS: gap: 0.5em instead of a custom CSS property.

[glendaviesnz]

In WordPress 6.0 without the plugin, the gap on a gallery block is a fixed size in the generated inline CSS: gap: 0.5em instead of a custom CSS property.

Thanks for reporting @markhowellsmead. There is a potential fix for this here which we can hopefully get into 6.0.1. In the meantime the following custom CSS should fix the issue:

.wp-block-gallery.has-nested-images {
	gap: var(--wp--style--gallery-gap-default)
}

[glendaviesnz]

This shouldnt be merged until after #41423

[markhowellsmead]

Thanks @glendaviesnz, that works fine. The same applies to the columns block; does that need a separate ticket?

[glendaviesnz]

Thanks @glendaviesnz, that works fine. The same applies to the columns block; does that need a separate ticket?

I see you added an issue for this here #41431 - currently the columns block does not have the option to set a default gap via a css var like the gallery does, so a matter of the functionality not being there, rather than a css load error. There is an open PR here that adds something similar for the sake of fixing the mobile stacking options. Have linked your issue to that so it can be considered as part of that work.

[ramonjd]

Thanks @glendaviesnz

I ran through the test instructions, using the site editor and block editor with multiple galleries.
The block gap value is applied as expected in block themes, and then for classic themes I tested (2020, 2014, 2019)