Add menuTitle attribute to navigation block and update label display

yogeshbhutkar · Jan 1, 2025 · 54b9364 · 54b9364
1 parent b4304f8
commit 54b9364
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -473,7 +473,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 -	**Category:** theme
 -	**Allowed Blocks:** core/navigation-link, core/search, core/social-links, core/page-list, core/spacer, core/home-link, core/site-title, core/site-logo, core/navigation-submenu, core/loginout, core/buttons
 -	**Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~
--	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
+-	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, menuTitle, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
 
 ## Custom Link
 

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -24,6 +24,9 @@
 		"ref": {
 			"type": "number"
 		},
+		"menuTitle": {
+			"type": "string"
+		},
 		"textColor": {
 			"type": "string"
 		},

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -205,6 +205,7 @@ function Navigation( {
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	const {
+		menuTitle,
 		openSubmenusOnClick,
 		overlayMenu,
 		showSubmenuIcon,
@@ -300,6 +301,7 @@ function Navigation( {
 		canUserCreateNavigationMenus,
 		isResolvingCanUserCreateNavigationMenus,
 		hasResolvedCanUserCreateNavigationMenus,
+		navigationMenu,
 	} = useNavigationMenu( ref );
 
 	const navMenuResolvedButMissing =
@@ -342,6 +344,20 @@ function Navigation( {
 		? getNavigationFallbackId()
 		: null;
 
+	const initializeMenuTitle = useCallback( () => {
+		const { title: navTitle } = navigationMenu || {};
+
+		if ( ! menuTitle || ! navTitle || menuTitle === navTitle ) {
+			return;
+		}
+
+		setAttributes( { menuTitle: navTitle } );
+	}, [ navigationMenu, menuTitle, setAttributes ] );
+
+	useEffect( () => {
+		initializeMenuTitle();
+	}, [ initializeMenuTitle ] );
+
 	useEffect( () => {
 		// If:
 		// - there is an existing menu, OR

diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { navigation as icon } from '@wordpress/icons';
 
 /**
@@ -52,6 +52,15 @@ export const settings = {
 	},
 	edit,
 	save,
+	__experimentalLabel: ( { menuTitle } ) => {
+		return menuTitle
+			? sprintf(
+					/* translators: %s: menu title */
+					__( 'Navigation (%s)' ),
+					menuTitle
+			  )
+			: __( 'Navigation' );
+	},
 	deprecated,
 };