Block Styles: Fix block style variation styles for blocks with complex selectors

[aaronrobertshaw]

Fixes: #62122

What?

Fixes the style generation for instanced block style variations for blocks that use complex selectors. For example:

• Button: .wp-block-button .wp-block-button__link
• Image:
  • .wp-block-image
  • .wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder

Why?

Without this fix, variation styles when applied to an instance would only be applied to the block's wrapper. This means styles like the Button block's outline block style would get double borders, padding et.c

How?

Reworks the generation of the instanced block style variation stylesheets so that the result has selectors that apply different types of styles to the block's desired elements. For example, the Button block styles go to the inner .wp-block-button__link element or an Image's border goes to the inner img

The style load order was also tweaked to ensure the block style variations styles were loaded after the block library styles.

Testing Instructions

1. Register some custom block style variations following #57908's instructions
2. Apply these in a nested fashion and ensure they still continue to work
3. Make sure you have a button block in your post or page
4. Apply the outline block style to the button
5. Make sure all the blocks display correctly in both editors and the frontend
6. Disable separate core block assets via snippet below or activate a theme which does such as Powder
7. Confirm block library styles do not override the outline block style variation styles for Button blocks

add_filter( 'should_load_separate_core_block_assets', '__return_false' );

Screenshots or screencast

Before	After

[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: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>

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

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/block-supports/block-style-variations.php

[aaronrobertshaw]

The changes here have been included within the overall backport for the section styles feature: WordPress/wordpress-develop#6662.

If this PR requires further updates, that backport will also need updating.

[talldan]

It does fix the issue, but I don't understand the fix, so I'd have a hard time approving it.

I do notice there are two sets of identical styles:

If there's any way to avoid that it might be good, but it could be considered a separate change.

[aaronrobertshaw]

Appreciate the thorough review @talldan 🙇

I believe I've addressed all the feedback so far. Should be good to go for another spin now.

If there's any way to avoid that it might be good, but it could be considered a separate change.

I think that is definitely best done via a separate follow-up.

For the record, one set of styles is from the standard theme.json stylesheet but can't be relied upon as if variations are nested the load order needs to be different for the correct variation's styles to take precedence. That's where the second set of styles comes in as they are the styles specific to this individual application or instance of the block style variation.

The code creating the standard set of styles is actually leveraged to generate the individual instance styles.

It is 100% something that would be good to clean up. Right now though, I think we need to land a fix for the issue affecting outline buttons etc. then I can circle back to this optimisation and clean up.

[github-actions]

Flaky tests detected in 980ca36.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9300616448
📝 Reported issues:

• [Flaky Test] Items list is reachable via TAB #61701 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js

[bgardner]

@aaronrobertshaw

There seems to still be an issue with specificity and styles. My Powder theme which uses theme.json to style the outline variation (https://github.com/bgardner/powder/blob/main/theme.json#L288) is being overridden by the following:

:root :where(.wp-block-button .wp-block-button__link.is-style-outline), :root :where(.wp-block-button.is-style-outline>.wp-block-button__link) {
    border: 2px solid;
    padding: .667em 1.333em;
}

[bgardner]

The button should have a border of 1px thick, but looks like this (note the lower right side styles being overridden:

[aaronrobertshaw]

Thanks for the extra information @bgardner, it definitely helps 👍

After downloading your theme and poking around a bit, it looks like the style load order isn't quite right. The key difference I noted while testing was that Powder disables the separate block assets via the should_load_separate_core_block_assets filter.

The wp-block-library-inline-css styles are added after the global styles and block style variation styles. When the block styles are separated however their individual stylesheets are loaded before the global styles and variation styles.

I'll work on a fix for this first thing tomorrow. It might also be better as a separate PR.

Separate Block Assets	All Together

Note: The separate assets screenshot is actually TT4 but illustrates the point.

[bgardner]

@aaronrobertshaw That makes sense, thanks for spelling that out. If there's an alternative (more optimal) way for me to handle things in Powder, I'm all ears.

[aaronrobertshaw]

If there's an alternative (more optimal) way for me to handle things in Powder, I'm all ears.

I don't think you should need to make any changes here. Hopefully, a bit of tweaking to the order styles load in should see this working as expected.

[aaronrobertshaw]

@bgardner with fresh eyes this morning it looks like the tweak the load order is rather trivial so I've rolled it into this fix.

Before	After

[bgardner]

@aaronrobertshaw Can confirm, per the below. LGTM!

[talldan]

Looks good now, thanks for adding the improved explanations in the code, that helped me understand the issue and fix.

[aaronrobertshaw]

Appreciate all the reviews and testing. Thanks @talldan and @bgardner 🙇