Align Submenu block and Nav Link block by including description and w…

…rapping span (#67198) * Fix missing wp-block-navigation-item__label span * Addressed feedback * Updated README.md Co-authored-by: prajapatisagar <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: carolinan <[email protected]>
WordPress · Dec 3, 2024 · 826c430 · 826c430 · github-actions · Dec 3, 2024
1 parent df9a213
commit 826c430
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
@@ -474,6 +474,11 @@ export default function NavigationSubmenuEdit( {
 							}
 						} }
 					/>
+					{ description && (
+						<span className="wp-block-navigation-item__description">
+							{ description }
+						</span>
+					) }
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<LinkUI
 							clientId={ clientId }

diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
@@ -159,7 +159,16 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		$html .= '>';
 		// End appending HTML attributes to anchor tag.
 
+		$html .= '<span class="wp-block-navigation-item__label">';
 		$html .= $label;
+		$html .= '</span>';
+
+		// Add description if available.
+		if ( ! empty( $attributes['description'] ) ) {
+			$html .= '<span class="wp-block-navigation-item__description">';
+			$html .= wp_kses_post( $attributes['description'] );
+			$html .= '</span>';
+		}
 
 		$html .= '</a>';
 		// End anchor tag content.
@@ -180,6 +189,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		$html .= '</span>';
 
+		// Add description if available.
+		if ( ! empty( $attributes['description'] ) ) {
+			$html .= '<span class="wp-block-navigation-item__description">';
+			$html .= wp_kses_post( $attributes['description'] );
+			$html .= '</span>';
+		}
+
 		$html .= '</button>';
 
 		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';

diff --git a/packages/block-library/src/navigation/README.md b/packages/block-library/src/navigation/README.md
@@ -10,4 +10,5 @@ The structural CSS for the navigation block targets generic classnames across me
 -   `.wp-block-navigation-item` is applied to every menu item.
 -   `.wp-block-navigation-item__content` is applied to the link inside a menu item.
 -   `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
+-   `.wp-block-navigation-item__description` is applied to the innermost container around the menu item description.
 -   `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).