Fix malformed variation selector in theme.json when block uses non-trival CSS selector

[aaronrobertshaw]

This ticket tracks the backport of PHP files for the following Gutenberg updates:

​https://github.com/WordPress/gutenberg/pull/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.

This PR backports the PHP changes from ​https://github.com/WordPress/gutenberg/pull/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

[sppramodh]

Test report on Github: ​https://github.com/WordPress/wordpress-develop/pull/7825#pullrequestreview-2449938306

[peterwilsoncc]

In 59814:

Editor: Fix complex variation selectors when using selectors API.

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.

Props aaronrobertshaw, ramonopoly, joemcgill.
Fixes #62471.