From 3d7c9d28458b592618a31ea4edfe69f4115fcd69 Mon Sep 17 00:00:00 2001 From: USERSATOSHI Date: Mon, 8 Jun 2026 18:34:27 +0530 Subject: [PATCH 1/2] fix(editor): deduplicate wp-elements class names for identical blocks --- src/wp-includes/block-supports/elements.php | 13 +++- .../wpRenderElementsSupport.php | 68 +++++++++++++++++++ .../wpRenderElementsSupportStyles.php | 65 ++++++++++++++++++ 3 files changed, 145 insertions(+), 1 deletion(-) diff --git a/src/wp-includes/block-supports/elements.php b/src/wp-includes/block-supports/elements.php index 374da09e8bc8c..5db91a2d0e945 100644 --- a/src/wp-includes/block-supports/elements.php +++ b/src/wp-includes/block-supports/elements.php @@ -16,7 +16,18 @@ * @return string The unique class name. */ function wp_get_elements_class_name( $block ) { - return 'wp-elements-' . md5( serialize( $block ) ); + static $seen_hashes = array(); + + $hash = md5( serialize( $block ) ); + + if ( isset( $seen_hashes[ $hash ] ) ) { + ++$seen_hashes[ $hash ]; + return 'wp-elements-' . md5( $hash . $seen_hashes[ $hash ] ); + } + + $seen_hashes[ $hash ] = 0; + + return 'wp-elements-' . $hash; } /** diff --git a/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php b/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php index 9103fcba90b66..c035674685a48 100644 --- a/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php +++ b/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php @@ -105,6 +105,74 @@ public function test_elements_block_support_class( $color_settings, $elements_st ); } + /** + * 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})/', $markup_one, $match_one ); + preg_match( '/wp-elements-([a-f0-9]{32})/', $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. * diff --git a/tests/phpunit/tests/block-supports/wpRenderElementsSupportStyles.php b/tests/phpunit/tests/block-supports/wpRenderElementsSupportStyles.php index 16ed26fc9c7bc..31213c59afa6c 100644 --- a/tests/phpunit/tests/block-supports/wpRenderElementsSupportStyles.php +++ b/tests/phpunit/tests/block-supports/wpRenderElementsSupportStyles.php @@ -68,6 +68,71 @@ public function test_elements_block_support_styles( $color_settings, $elements_s ); } + /** + * Tests that identical blocks with different elements styles + * generate distinct class names to avoid CSS cascade conflicts. + * + * @ticket 65435 + * + * @covers ::wp_get_elements_class_name + */ + public function test_elements_block_support_styles_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' => 'blue', + ), + ), + ), + ), + ), + ); + + // Process two identical blocks with the same elements styles. + wp_render_elements_support_styles( $block ); + wp_render_elements_support_styles( $block ); + $actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) ); + + // Both rules should be present with distinct class names. + $this->assertMatchesRegularExpression( + '/\.wp-elements-[a-f0-9]{32} a:where\(:not\(\.wp-element-button\)\)\{color:blue;\}/', + $actual_stylesheet, + 'First block element style should be present' + ); + $this->assertMatchesRegularExpression( + '/\.wp-elements-[a-f0-9]{32} a:where\(:not\(\.wp-element-button\)\)\{color:blue;\}/', + $actual_stylesheet, + 'Second block element style should also be present' + ); + // Count the number of distinct class names to confirm uniqueness. + preg_match_all( '/\.wp-elements-([a-f0-9]{32})/', $actual_stylesheet, $matches ); + $unique_classes = array_unique( $matches[1] ); + $this->assertCount( 2, $unique_classes, 'Both blocks should produce distinct class names' ); + } + /** * Data provider. * From e508d122ca3a3f53a7ca7ea3745017125f24f2e7 Mon Sep 17 00:00:00 2001 From: USERSATOSHI Date: Mon, 8 Jun 2026 18:50:39 +0530 Subject: [PATCH 2/2] chore: fix phpcs errors --- .../tests/block-supports/wpRenderElementsSupport.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php b/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php index c035674685a48..fc0636864928b 100644 --- a/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php +++ b/tests/phpunit/tests/block-supports/wpRenderElementsSupport.php @@ -148,11 +148,11 @@ public function test_elements_block_support_class_with_duplicate_blocks() { ), ); - $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 ); + $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>$/',