Refactor: label updation logic to use refs

WordPress · Jan 9, 2025 · 9e5240d · 9e5240d
1 parent 54b9364
commit 9e5240d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 23 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, menuTitle, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
+-	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, 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,9 +24,6 @@
 		"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,7 +205,6 @@ function Navigation( {
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	const {
-		menuTitle,
 		openSubmenusOnClick,
 		overlayMenu,
 		showSubmenuIcon,
@@ -301,7 +300,6 @@ function Navigation( {
 		canUserCreateNavigationMenus,
 		isResolvingCanUserCreateNavigationMenus,
 		hasResolvedCanUserCreateNavigationMenus,
-		navigationMenu,
 	} = useNavigationMenu( ref );
 
 	const navMenuResolvedButMissing =
@@ -344,20 +342,6 @@ 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
@@ -3,6 +3,8 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { navigation as icon } from '@wordpress/icons';
+import { select } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -52,12 +54,22 @@ export const settings = {
 	},
 	edit,
 	save,
-	__experimentalLabel: ( { menuTitle } ) => {
-		return menuTitle
+	__experimentalLabel: ( { ref } ) => {
+		if ( ! ref ) {
+			return __( 'Navigation' );
+		}
+
+		const navigation = select( coreStore ).getEntityRecord(
+			'postType',
+			'wp_navigation',
+			ref
+		);
+
+		return navigation?.title?.rendered
 			? sprintf(
 					/* translators: %s: menu title */
 					__( 'Navigation (%s)' ),
-					menuTitle
+					navigation.title.rendered
 			  )
 			: __( 'Navigation' );
 	},