Theme.json: Fix complex variation selectors when using selectors API

[aaronrobertshaw]

This PR backports the PHP changes from WordPress/gutenberg#67061

The old approach to converting a block's CSS selectors for block style variations was fairly simplistic. It worked when a block used a simple class based selector however as blocks evolve and the Selectors API is used more, it needs to handle more complex selectors such as the List block's .wp-block-list:not(.wp-block-list .wp-block-list).

The changes in the linked Gutenberg PR prevent generation of malformed block style variation selectors when a block's selector leverages a CSS function such as :not() or chains multiple classes e.g. .wp-block-list.my-custom-class.

Trac ticket: https://core.trac.wordpress.org/ticket/62471

Test Instructions

1. Confirm Theme.json unit tests are passing:
   npm run test:php -- --filter Tests_Theme_wpThemeJson
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

Screenshots

Before	After

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props aaronrobertshaw, peterwilsoncc, ramonopoly, joemcgill.

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

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[ramonjd]

Checked that the synced changes match https://github.com/WordPress/wordpress-develop/pull/7825/files

I also ran through the tests again. Things work as expected on the frontend.

[joemcgill]

This looks good to me. Thanks for adding tests for this!

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 59814
GitHub commit: ac2eeb9

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.