Skip to content

Elements tests: Accept both md5 and sequential wp-elements-* class names #79300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewserong merged 1 commit into from
Jun 18, 2026
Merged

Elements tests: Accept both md5 and sequential wp-elements-* class names #79300

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 21 additions & 15 deletions phpunit/block-supports/elements-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,9 @@ public function data_elements_block_support_class() {
'background' => '#fff',
);

// The `wp-elements-*` class suffix is an md5 hash on older WordPress and a
// sequential id (via `wp_unique_prefixed_id()`) on newer cores, so the
// patterns below accept either form to stay green across supported versions.
return array(
'button element styles with serialization skipped' => array(
'color_settings' => array(
Expand Down Expand Up @@ -189,39 +192,39 @@ public function data_elements_block_support_class() {
'button' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
'expected_markup' => '/^<p class="wp-elements-(?:[a-f0-9]{32}|[0-9]+)">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'link element styles apply class to wrapper' => array(
'color_settings' => array( 'link' => true ),
'elements_styles' => array(
'link' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
'expected_markup' => '/^<p class="wp-elements-(?:[a-f0-9]{32}|[0-9]+)">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'heading element styles apply class to wrapper' => array(
'color_settings' => array( 'heading' => true ),
'elements_styles' => array(
'heading' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
'expected_markup' => '/^<p class="wp-elements-(?:[a-f0-9]{32}|[0-9]+)">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'element styles apply class to wrapper when it has other classes' => array(
'color_settings' => array( 'link' => true ),
'elements_styles' => array(
'link' => array( 'color' => $color_styles ),
),
'block_markup' => '<p class="has-dark-gray-background-color has-background">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="has-dark-gray-background-color has-background wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
'expected_markup' => '/^<p class="has-dark-gray-background-color has-background wp-elements-(?:[a-f0-9]{32}|[0-9]+)">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'element styles apply class to wrapper when it has other attributes' => array(
'color_settings' => array( 'link' => true ),
'elements_styles' => array(
'link' => array( 'color' => $color_styles ),
),
'block_markup' => '<p id="anchor">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}" id="anchor">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
'expected_markup' => '/^<p class="wp-elements-(?:[a-f0-9]{32}|[0-9]+)" id="anchor">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
);
}
Expand Down Expand Up @@ -271,6 +274,9 @@ public function data_elements_block_support_styles() {
);
$color_css_rules = preg_quote( '{color:var(--wp--preset--color--vivid-red);background-color:#fff;}' );

// The `wp-elements-*` class suffix is an md5 hash on older WordPress and a
// sequential id (via `wp_unique_prefixed_id()`) on newer cores, so the
// patterns below accept either form to stay green across supported versions.
return array(
'button element styles are not applied if serialization is skipped' => array(
'color_settings' => array(
Expand Down Expand Up @@ -318,7 +324,7 @@ public function data_elements_block_support_styles() {
'elements_styles' => array(
'button' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} .wp-element-button, .wp-elements-[a-f0-9]{32} .wp-block-button__link' . $color_css_rules . '$/',
'expected_styles' => '/^.wp-elements-(?:[a-f0-9]{32}|[0-9]+) .wp-element-button, .wp-elements-(?:[a-f0-9]{32}|[0-9]+) .wp-block-button__link' . $color_css_rules . '$/',
),
'link element styles are applied' => array(
'color_settings' => array( 'link' => true ),
Expand All @@ -330,15 +336,15 @@ public function data_elements_block_support_styles() {
),
),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} a:where\(:not\(.wp-element-button\)\)' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} a:where\(:not\(.wp-element-button\)\):hover' . $color_css_rules . '$/',
'expected_styles' => '/^.wp-elements-(?:[a-f0-9]{32}|[0-9]+) a:where\(:not\(.wp-element-button\)\)' . $color_css_rules .
'.wp-elements-(?:[a-f0-9]{32}|[0-9]+) a:where\(:not\(.wp-element-button\)\):hover' . $color_css_rules . '$/',
),
'generic heading element styles are applied' => array(
'color_settings' => array( 'heading' => true ),
'elements_styles' => array(
'heading' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1, .wp-elements-[a-f0-9]{32} h2, .wp-elements-[a-f0-9]{32} h3, .wp-elements-[a-f0-9]{32} h4, .wp-elements-[a-f0-9]{32} h5, .wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
'expected_styles' => '/^.wp-elements-(?:[a-f0-9]{32}|[0-9]+) h1, .wp-elements-(?:[a-f0-9]{32}|[0-9]+) h2, .wp-elements-(?:[a-f0-9]{32}|[0-9]+) h3, .wp-elements-(?:[a-f0-9]{32}|[0-9]+) h4, .wp-elements-(?:[a-f0-9]{32}|[0-9]+) h5, .wp-elements-(?:[a-f0-9]{32}|[0-9]+) h6' . $color_css_rules . '$/',
),
'individual heading element styles are applied' => array(
'color_settings' => array( 'heading' => true ),
Expand All @@ -350,12 +356,12 @@ public function data_elements_block_support_styles() {
'h5' => array( 'color' => $color_styles ),
'h6' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h2' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h3' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h4' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h5' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
'expected_styles' => '/^.wp-elements-(?:[a-f0-9]{32}|[0-9]+) h1' . $color_css_rules .
'.wp-elements-(?:[a-f0-9]{32}|[0-9]+) h2' . $color_css_rules .
'.wp-elements-(?:[a-f0-9]{32}|[0-9]+) h3' . $color_css_rules .
'.wp-elements-(?:[a-f0-9]{32}|[0-9]+) h4' . $color_css_rules .
'.wp-elements-(?:[a-f0-9]{32}|[0-9]+) h5' . $color_css_rules .
'.wp-elements-(?:[a-f0-9]{32}|[0-9]+) h6' . $color_css_rules . '$/',
),
);
}
Expand Down
Loading