Skip to content

Backport: Navigation shared icon rendering functions to wp/7.0 #79754

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
cbravobernal merged 2 commits into from
Jul 1, 2026
Merged

Backport: Navigation shared icon rendering functions to wp/7.0 #79754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f936aeb
Navigation: Use the shared icon rendering functions for all navigatio…
scruffian Mar 12, 2026
92cc397
Elements: Accept both md5 and sequential `wp-elements-*` class names …
andrewserong Jun 18, 2026
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
8 changes: 7 additions & 1 deletion packages/block-library/src/navigation-link/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,13 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {

if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
// The submenu icon can be hidden by a CSS rule on the Navigation Block.
$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_render_submenu_icon() . '</span>';
$html .= '<span class="wp-block-navigation__submenu-icon">';
if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
} else {
$html .= block_core_shared_navigation_render_submenu_icon();
}
$html .= '</span>';
}

if ( $has_submenu ) {
Expand Down
16 changes: 14 additions & 2 deletions packages/block-library/src/navigation-submenu/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
if ( $show_submenu_indicators && $has_submenu ) {
// The submenu icon is rendered in a button here
// so that there's a clickable element to open the submenu.
$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_render_submenu_icon() . '</button>';
$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
} else {
$html .= block_core_shared_navigation_render_submenu_icon();
}
$html .= '</button>';
}
} else {
$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
Expand All @@ -275,7 +281,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
$html .= '</button>';

if ( $has_submenu ) {
$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_render_submenu_icon() . '</span>';
$html .= '<span class="wp-block-navigation__submenu-icon">';
if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
} else {
$html .= block_core_shared_navigation_render_submenu_icon();
}
$html .= '</span>';
}
}

Expand Down
11 changes: 0 additions & 11 deletions packages/block-library/src/navigation/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1354,17 +1354,6 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
return $font_sizes;
}

/**
* Returns the top-level submenu SVG chevron icon.
*
* @since 5.9.0
*
* @return string
*/
function block_core_navigation_render_submenu_icon() {
return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
}

/**
* Filter out empty "null" blocks from the block list.
* 'parse_blocks' includes a null block with '\n\n' as the content when
Expand Down
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 @@ -99,6 +99,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 @@ -139,39 +142,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 @@ -221,6 +224,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 @@ -268,7 +274,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 @@ -280,15 +286,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 @@ -300,12 +306,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