Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Gallery block: the CSS generated for the block spacing is printed at the end of the page unlike other blocks #40936

Closed
dianeco opened this issue May 9, 2022 · 3 comments · Fixed by #41015
Closed

Gallery block: the CSS generated for the block spacing is printed at the end of the page unlike other blocks #40936

dianeco opened this issue May 9, 2022 · 3 comments · Fixed by #41015
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images

Comments

@dianeco
Copy link

dianeco commented May 9, 2022 •
edited
Loading

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;
}

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/gallery/index.php#L66-L71

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
@glendaviesnz glendaviesnz mentioned this issue May 12, 2022
Merged
@glendaviesnz
Copy link
Contributor

I am working on a potential fix for this here #41015, which will load the styles in the header for block themes

@justintadlock justintadlock added the [Block] Gallery Affects the Gallery Block - used to display groups of images label May 23, 2022
@markhowellsmead
Copy link

@glendaviesnz Additional: the gap is a fixed size in the generated inline CSS: gap: 0.5em instead of a custom CSS property

@3000nz
Copy link

3000nz commented Apr 18, 2024

@glendaviesnz Additional: the gap is a fixed size in the generated inline CSS: gap: 0.5em instead of a custom CSS property

I need to make the value 0 instead of 0.5 for a specific page (at the end). BUT wordpress overrides my in-line page css injection of 0 because the wordpress CSS is last on the page load (it's overriding my 0). Is there a solution?

all this needs to be 0

:where(.is-layout-flex) {
    gap: 0.5em;
}


.wp-block-gallery.wp-block-gallery-1 {
    --wp--style--unstable-gallery-gap: var(--wp--style--gallery-gap-default, var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))); */
     gap: var(--wp--style--gallery-gap-default, var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em))); 
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Gallery block: update the gallery gap to load styles in header for block themes WordPress/gutenberg
5 participants
@markhowellsmead @justintadlock @glendaviesnz @3000nz @dianeco