-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gallery block: update the gallery gap to load styles in header for block themes #41015
Conversation
Just need to work out exactly where the method fits in terms of compat folders before this is ready for review |
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:
Can confirm that classic theme gap styles remain in the footer while block theme gap styles are in the header. |
98599ae
to
b005f27
Compare
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. |
b005f27
to
ae6b7cd
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This LGTM.
In WordPress 6.0 without the plugin, the gap on a gallery block is a fixed size in the generated inline CSS: |
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)
} |
This shouldnt be merged until after #41423 |
Thanks @glendaviesnz, that works fine. The same applies to the columns block; does that need a separate ticket? |
9ecb837
to
5d66c81
Compare
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. |
Thanks @glendaviesnz I ran through the test instructions, using the site editor and block editor with multiple galleries. |
…ock themes (#41015) Co-authored-by: Glen Davies <glen.davies@a8c.com> Co-authored-by: ramonjd <ramonjd@gmail.com>
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 themesTesting Instructions
.wp-block-gallery-{id}
inline style is loaded near end of header and the gallery shows the correct gapbody
and that the gap is still applied.Screenshots or screencast
Before:
After:
Block theme
Non block theme