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

Theme CSS being overridden and small styles not inlined using add_filter( 'load_separate_block_assets', '__return_true' ); #31013

Closed
LukaszJaro opened this issue Apr 20, 2021 · 2 comments · Fixed by #31072
Closed

Theme CSS being overridden and small styles not inlined using add_filter( 'load_separate_block_assets', '__return_true' ); #31013

LukaszJaro opened this issue Apr 20, 2021 · 2 comments · Fixed by #31072
Labels
[Type] Help Request Help with setup, implementation, or "How do I?" questions.

Comments

@LukaszJaro
Copy link

Hi,

I'm not using a FSE theme, just a standard theme trying to take advantage of the new improved CSS block loading(load only required block CSS if block is present on page) using latest version of Gutenberg and WP.

Two Issues:

  • I noticed my theme styles are being overridden when using the filter add_filter( 'load_separate_block_assets', '__return_true' );
  • Small block stylesheets are not being inlined, instead the stylesheets are being loaded separately

Is this still not a fully ready filter to be using? Seems like I would have to get even more specific with my CSS selectors so Gutenberg doesn't override my styles?

If I disable the filter it works without overriding my styles.
@aristath aristath added the [Type] Help Request Help with setup, implementation, or "How do I?" questions. label Apr 21, 2021
@aristath
Copy link
Member

aristath commented Apr 21, 2021 •
edited
Loading

I noticed my theme styles are being overridden when using the filter add_filter( 'load_separate_block_assets', '__return_true' );

In an FSE theme, blocks get parsed before the <head>, while in classic themes blocks get parsed on-render. The result of that is that in FSE themes stylesheets get printed in <head>, and in classic themes they get printed in the footer.
In order for your theme's styles to override them, you can either make them more specific, OR load them in the footer (you can accomplish that by hooking your wp_enqueue_style calls in wp_footer for example).

Small block stylesheets are not being inlined, instead the stylesheets are being loaded separately

I haven't tested this with classic themes, but maybe you could try adding this:

add_action( 'wp_footer', 'gutenberg_maybe_inline_styles', 1 );

Let me know if that works! If it does we can push the relevant fix in Gutenberg 👍

@LukaszJaro
Copy link
Author

Awesome, thanks @aristath ! The filter you provided is now inlining the CSS, my http requests were reduced by half!

Thanks for the explanation, I'm actually using wprig starter theme, it has it's own unique way of progressively loading CSS through in-body tags and It's not using enqueue hook. Using print styles instead "wp_rig()->print_styles()" but same concept as Gutenberg, only load required styles.

If curious https://github.com/wprig/docs/blob/master/documentation/css.md#progressive-loading-of-css

In that case will have to investigate with wprig but simplest solution now would be to use more specific CSS selectors.

Thanks again! I'm going to continue testing as I build out my theme and see how it goes :)

@aristath aristath mentioned this issue Apr 22, 2021
Merged
7 tasks
@aristath aristath linked a pull request Apr 22, 2021 that will close this issue
Hook maybe_inline_styles in the footer #31072
Merged
7 tasks
@LukaszJaro LukaszJaro mentioned this issue Apr 22, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Type] Help Request Help with setup, implementation, or "How do I?" questions.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Hook maybe_inline_styles in the footer WordPress/gutenberg
2 participants
@aristath @LukaszJaro