Fix enqueuing block theme styles when separate asset loading is enabled.

[tellthemachines]

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 for wp-block-styles and the block has a theme.scss stylesheet, that also gets enqueued in its own style tag.

The bug in Gutenberg is that the styles coming from theme.scss were 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.scss styles 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

1. Activate Twenty Twenty Two theme;
2. Add an Audio block to a post and inspect its styles on the front end;
3. On trunk, verify that the styles inside wp-block-audio-theme-inline-css are duplicated in wp-block-audio-inline-css and changes made to the Audio block theme.scss file end up inside wp-block-audio-inline-css;
4. On this branch, verify that there is no duplication of styles in these two tags and changes made to the Audio block theme.scss file are shown in wp-block-audio-theme-inline-css.

Testing Instructions for Keyboard

Screenshots or screencast

Trunk:

This PR:

[aaronrobertshaw]

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.

[aaronrobertshaw]

Nice clean up 👍

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[andrewserong]

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?

[tellthemachines]

Oh well spotted! I'll update the comment.

[andrewserong]

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! ✨