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 .



git-svn-id: https://develop.svn.wordpress.org/trunk@59814 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Peter Wilson 2025-02-12 03:38:09 +00:00
parent 108af60daf
commit ac2eeb9868
2 changed files with 82 additions and 2 deletions
src/wp-includes
tests/phpunit/tests/theme

@ -2850,8 +2850,14 @@ class WP_Theme_JSON {
// Combine selectors with style variation's selector and add to overall style variation declarations.
foreach ( $variation_declarations as $current_selector => $new_declarations ) {
// If current selector includes block classname, remove it but leave the whitespace in.
$shortened_selector = str_replace( $block_metadata['selector'] . ' ', ' ', $current_selector );
/*
* Clean up any whitespace between comma separated selectors.
* This prevents these spaces breaking compound selectors such as:
* - `.wp-block-list:not(.wp-block-list .wp-block-list)`
* - `.wp-block-image img, .wp-block-image.my-class img`
*/
$clean_current_selector = preg_replace( '/,\s+/', ',', $current_selector );
$shortened_selector = str_replace( $block_metadata['selector'], '', $clean_current_selector );
// Prepend the variation selector to the current selector.
$split_selectors = explode( ',', $shortened_selector );

@ -4627,6 +4627,80 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
);
}
/**
* Tests that block style variation selectors are generated correctly
* for block selectors of various structures.
*
* @ticket 62471
*/
public function test_get_styles_for_block_with_style_variations_and_custom_selectors() {
register_block_type(
'test/milk',
array(
'api_version' => 3,
'selectors' => array(
'root' => '.milk',
'color' => '.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle',
),
)
);
register_block_style(
'test/milk',
array(
'name' => 'chocolate',
'label' => 'Chocolate',
)
);
$theme_json = new WP_Theme_JSON(
array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'styles' => array(
'blocks' => array(
'test/milk' => array(
'color' => array(
'background' => 'white',
),
'variations' => array(
'chocolate' => array(
'color' => array(
'background' => '#35281E',
),
),
),
),
),
),
)
);
$metadata = array(
'name' => 'test/milk',
'path' => array( 'styles', 'blocks', 'test/milk' ),
'selector' => '.wp-block-test-milk',
'selectors' => array(
'color' => '.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle',
),
'variations' => array(
'chocolate' => array(
'path' => array( 'styles', 'blocks', 'test/milk', 'variations', 'chocolate' ),
'selector' => '.is-style-chocolate.wp-block-test-milk',
),
),
);
$actual_styles = $theme_json->get_styles_for_block( $metadata );
$default_styles = ':root :where(.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle){background-color: white;}';
$variation_styles = ':root :where(.is-style-chocolate.wp-block-test-milk .liquid,.is-style-chocolate.wp-block-test-milk:not(.spoiled),.is-style-chocolate.wp-block-test-milk.in-bottle){background-color: #35281E;}';
$expected = $default_styles . $variation_styles;
unregister_block_style( 'test/milk', 'chocolate' );
unregister_block_type( 'test/milk' );
$this->assertSame( $expected, $actual_styles );
}
public function test_block_style_variations() {
wp_set_current_user( static::$administrator_id );