Fix enqueuing block theme styles when separate asset loading is enabled. #60098
Conversation
tellthemachines
added
[Type] Bug
tellthemachines
requested review from
aaronrobertshaw,
andrewserong,
aristath,
oandregal and
ramonjd
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Thanks for the quick work on this fix @tellthemachines 🚀
It tests as advertised.
✅ Could replicate the issue on trunk
✅ Block theme styles are now only in their -theme-inline-css style tag
✅ Block theme styles are consistent between editor and frontend
✅ Block theme styles aren't included when wp-block-styles support isn't opted into
✅ Theme styles are still combined and not duplicated when should_load_separate_core_block_assets is false
The only minor difference I noted was that on trunk the core block theme styles appear minified whereas they aren't on this PR.
| // Dequeue the full stylesheet. | ||
| // Make sure this only runs once, it doesn't need to run for every block. | ||
| static $stylesheet_removed; | ||
| if ( ! $stylesheet_removed ) { | ||
| add_action( | ||
| 'wp_enqueue_scripts', | ||
| static function () { | ||
| wp_dequeue_style( 'wp-block-library-theme' ); | ||
| } | ||
| ); | ||
| $stylesheet_removed = true; | ||
| } | ||
|
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
lib/blocks.php
Outdated
| } | ||
|
|
||
| // If the current theme supports wp-block-styles, dequeue the full stylesheet | ||
| // and instead attach each block's theme-styles to their block styles stylesheet. |
There was a problem hiding this comment.
Tiny nit: one line above this comment (Github wouldn't let me comment on it) the comment says "dequeue the full stylesheet". Looks like we can remove that part of the comment now?
There was a problem hiding this comment.
Oh well spotted! I'll update the comment.
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
Working nicely for me, too!
✅ When trying to manually add a :where() rule to the margin rules, in trunk this only applies to the wp-block-audio-inline-css with the other theme styles overriding it. With this PR applied, the rules get applied to wp-block-audio-theme-inline-css as expected, with no duplication 👍
| Before | After |
|---|---|
 |
 |
LGTM, too! ✨
…ed. (WordPress#60098) Co-authored-by: tellthemachines <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]>
What?
Fixes this issue encountered in testing #59457.
When
wp_should_load_separate_core_block_assets()is true, full block library stylesheets are dequeued in favour of loading only the styles for blocks present on the page, each in its own<style>tag. If the theme has support forwp-block-stylesand the block has atheme.scssstylesheet, that also gets enqueued in its own style tag.The bug in Gutenberg is that the styles coming from
theme.scsswere being appended to the tag containing the main block styles, so they're being duplicated (because core is still enqueuing the theme styles in their own tag).This PR changes the logic so that the
theme.scssstyles get enqueued in their own tag, with the core ones being dequeued first.I also removed a redundant bit of logic to de-register the main stylesheet, because that already gets removed on the core side when
wp_should_load_separate_core_block_assets()is true.Testing Instructions
wp-block-audio-theme-inline-cssare duplicated inwp-block-audio-inline-cssand changes made to the Audio blocktheme.scssfile end up insidewp-block-audio-inline-css;theme.scssfile are shown inwp-block-audio-theme-inline-css.Testing Instructions for Keyboard
Screenshots or screencast
Trunk:
This PR:
