diff --git a/src/wp-includes/block-supports/elements.php b/src/wp-includes/block-supports/elements.php index 54b96aa1dc064..41fd62eaa5ff7 100644 --- a/src/wp-includes/block-supports/elements.php +++ b/src/wp-includes/block-supports/elements.php @@ -16,7 +16,8 @@ * @return string The unique class name. */ function wp_get_elements_class_name( $block ) { - return 'wp-elements-' . md5( serialize( $block ) ); + $hash = md5( serialize( $block ) ); + return wp_unique_prefixed_id( 'wp-elements-' . $hash ); } /** diff --git a/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php b/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php index 007ba8312e495..831189b6af6fc 100644 --- a/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php +++ b/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php @@ -159,6 +159,74 @@ public function test_elements_block_support_class_with_invalid_elements_prefix() ); } + /** + * Tests that duplicate blocks get distinct elements class names + * on their rendered markup to avoid CSS cascade conflicts. + * + * @ticket 65435 + * + * @covers ::wp_get_elements_class_name + */ + public function test_elements_block_support_class_with_duplicate_blocks() { + $this->test_block_name = 'test/element-block-supports'; + + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'color' => array( + 'link' => true, + ), + ), + ) + ); + + $block = array( + 'blockName' => $this->test_block_name, + 'attrs' => array( + 'style' => array( + 'elements' => array( + 'link' => array( + 'color' => array( + 'text' => 'var:preset|color|vivid-red', + ), + ), + ), + ), + ), + ); + + $block_markup = '
Hello WordPress!
'; + $block_one = wp_render_elements_support_styles( $block ); + $block_two = wp_render_elements_support_styles( $block ); + $markup_one = wp_render_elements_class_name( $block_markup, $block_one ); + $markup_two = wp_render_elements_class_name( $block_markup, $block_two ); + + $this->assertMatchesRegularExpression( + '/^Hello WordPress<\/a>!<\/p>$/',
+ $markup_one,
+ 'First block should have wp-elements class applied'
+ );
+ $this->assertMatchesRegularExpression(
+ '/^ Hello WordPress<\/a>!<\/p>$/',
+ $markup_two,
+ 'Second block should also have wp-elements class applied'
+ );
+
+ // Extract class names and verify they are different.
+ preg_match( '/wp-elements-([a-f0-9]{32}[0-9]+)/', $markup_one, $match_one );
+ preg_match( '/wp-elements-([a-f0-9]{32}[0-9]+)/', $markup_two, $match_two );
+ $this->assertNotEmpty( $match_one, 'First block class name should be extractable' );
+ $this->assertNotEmpty( $match_two, 'Second block class name should be extractable' );
+ $this->assertNotSame( $match_one[1], $match_two[1], 'Class names for identical blocks should be unique' );
+ }
+
/**
* Data provider.
*
@@ -238,7 +306,7 @@ public function data_elements_block_support_class() {
'button' => array( 'color' => $color_styles ),
),
'block_markup' => ' Hello WordPress! Hello WordPress<\/a>!<\/p>$/',
+ 'expected_markup' => '/^ Hello WordPress<\/a>!<\/p>$/',
),
'link element styles apply class to wrapper' => array(
'color_settings' => array( 'link' => true ),
@@ -246,7 +314,7 @@ public function data_elements_block_support_class() {
'link' => array( 'color' => $color_styles ),
),
'block_markup' => ' Hello WordPress! Hello WordPress<\/a>!<\/p>$/',
+ 'expected_markup' => '/^ Hello WordPress<\/a>!<\/p>$/',
),
'heading element styles apply class to wrapper' => array(
'color_settings' => array( 'heading' => true ),
@@ -254,7 +322,7 @@ public function data_elements_block_support_class() {
'heading' => array( 'color' => $color_styles ),
),
'block_markup' => ' Hello WordPress! Hello WordPress<\/a>!<\/p>$/',
+ 'expected_markup' => '/^ Hello WordPress<\/a>!<\/p>$/',
),
'element styles apply class to wrapper when it has other classes' => array(
'color_settings' => array( 'link' => true ),
@@ -262,7 +330,7 @@ public function data_elements_block_support_class() {
'link' => array( 'color' => $color_styles ),
),
'block_markup' => ' Hello WordPress! Hello WordPress<\/a>!<\/p>$/',
+ 'expected_markup' => '/^ Hello WordPress<\/a>!<\/p>$/',
),
'element styles apply class to wrapper when it has other attributes' => array(
'color_settings' => array( 'link' => true ),
@@ -270,7 +338,7 @@ public function data_elements_block_support_class() {
'link' => array( 'color' => $color_styles ),
),
'block_markup' => ' Hello WordPress!