Gallery block: the CSS generated for the block spacing is printed at the end of the page unlike other blocks #40936
Description
Description
Using a block theme, the inline CSS generated by a block is printed in the <head> of the page using gutenberg_enqueue_block_support_styles()
https://github.com/WordPress/gutenberg/blob/trunk/lib/compat/wordpress-5.9/script-loader.php#L63-L74
For example, when you insert a Columns block, the following CSS is printed in the <head>:
.wp-container-1 {
display: flex;
gap: var( --wp--style--block-gap, 0.5em );
flex-wrap: nowrap;
align-items: center;
}
However, for the Gallery block, the CSS is printed just above the closing </body> tag, which creates a flash of unstyled content:
.wp-block-gallery-1 {
--wp--style--unstable-gallery-gap: 20px;
gap: 20px;
}
Is there a reason to use the wp_footer hook instead of wp_head for the gallery block?
Step-by-step reproduction instructions
1 Insert a Columns block.
2. Insert a Gallery block.
3. View the page source.
4. Observe that the CSS for the columns is printed inside the <head> while the CSS for the gallery is printed just above the closing </body> tag.
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes