Block Style Variations: Fix complex variation selectors when using selectors API

[aaronrobertshaw]

Fixes: #66885

What?

Fixes a bug in the manipulation of selectors for block style variations that would result in an incorrect selector and fail to match the appropriate elements on the frontend.

Why?

• Bugs = bad
• Frontend should match editor.

How?

Tweaks how the original block name in the block's selector is replaced so that it doesn't miss more complex selectors e.g. ones with compound classes, CSS functions etc.

Testing Instructions

1. Confirm Theme.json unit tests are passing:
   npm run test:unit:php:base -- --filter WP_Theme_JSON_Gutenberg_Test
2. Register a custom block style variation for a block that uses the Selectors API with compound selector or something with a CSS function in it. The List block sparked the original issue fixed by this PR, see snippet below for List block style.

   register_block_style(
   	'core/list',
   	array(
   		'name'       => 'my-list-border',
   		'label'      => __( 'my list border' ),
   		'style_data' => array(
   			'border'  => array(
   				'color' => 'green',
   				'style' => 'solid',
   				'width' => '2px',
   			),
   			'color'   => array(
   				'background' => '#FBFAF3',
   			),
   			'spacing' => array(
   				'padding' => array(
   					'bottom' => 'var(--wp--preset--spacing--30)',
   					'left'   => 'var(--wp--preset--spacing--50)',
   					'right'  => 'var(--wp--preset--spacing--50)',
   					'top'    => 'var(--wp--preset--spacing--30)',
   				),
   			),
   		),
   	),
   )

3. Edit a post, add a List block to it, and apply the custom block style from the last step.
4. Save the post and view on the frontend.
5. Confirm the List block's border styles are now reflected there as well (they still should not be recursively applied to nested lists)
6. In the site editor, add some global styles for the Image block.
   • Add a border to all images
   • Add a different border to the rounded Image block style
7. Confirm the borders for images continue to work as before.
8. Make sure other blocks using the selectors API to set custom selectors within block.json work e.g. Post Featured Image, Avatar, List Item.
9. Check blocks like Button, that still use old __experimentalSelector property in block.json

There might be more use cases I'm missing so bonus points for testing more than the list above 😅

Screenshots or screencast

Before	After

Note the missing border in the Before image above.

[github-actions]

Flaky tests detected in 9d0147e.
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/11904578790
📝 Reported issues:

• [Flaky Test] Redirection after template creation #60678 in /test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
• [Flaky Test] should apply Heading block styles to all Heading blocks #49942 in /test/e2e/specs/site-editor/push-to-global-styles.spec.js

[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 <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: Anuj-Rathore24 <[email protected]>
Co-authored-by: shimotmk <[email protected]>

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

[ramonjd]

Given my list block in the editor:

Here's the frontend:

Trunk	This PR

Images, buttons and their alternative styles appear as expected (I can't see any regressions)

[ramonjd]

LGTM

Thanks for the instructions and unit tests. 🚢