diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 94d1890af8420..eb221cbd27a7c 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -11,6 +11,7 @@ import { moreVertical } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; import { useEffect, useMemo, useState } from '@wordpress/element'; +import { useEntityProp } from '@wordpress/core-data'; /** * Internal dependencies @@ -18,6 +19,14 @@ import { useEffect, useMemo, useState } from '@wordpress/element'; import useNavigationMenu from '../use-navigation-menu'; import useNavigationEntities from '../use-navigation-entities'; +function buildMenuLabel( title, id ) { + const label = + decodeEntities( title?.rendered ) || + /* translators: %s is the index of the menu in the list of menus. */ + sprintf( __( '(no title %s)' ), id ); + return label; +} + function NavigationMenuSelector( { currentMenuId, onSelectNavigationMenu, @@ -30,7 +39,6 @@ function NavigationMenuSelector( { /* translators: %s: The name of a menu. */ const createActionLabel = __( "Create from '%s'" ); - const [ selectorLabel, setSelectorLabel ] = useState( '' ); const [ isCreatingMenu, setIsCreatingMenu ] = useState( false ); actionLabel = actionLabel || createActionLabel; @@ -39,25 +47,23 @@ function NavigationMenuSelector( { const { navigationMenus, + isResolvingNavigationMenus, hasResolvedNavigationMenus, canUserCreateNavigationMenu, canSwitchNavigationMenu, } = useNavigationMenu(); + const [ currentTitle ] = useEntityProp( + 'postType', + 'wp_navigation', + 'title' + ); + const menuChoices = useMemo( () => { return ( navigationMenus?.map( ( { id, title }, index ) => { - const label = - decodeEntities( title?.rendered ) || - /* translators: %s is the index of the menu in the list of menus. */ - sprintf( __( '(no title %s)' ), index + 1 ); - - if ( id === currentMenuId && ! isCreatingMenu ) { - setSelectorLabel( - /* translators: %s is the name of a navigation menu. */ - sprintf( __( 'You are currently editing %s' ), label ) - ); - } + const label = buildMenuLabel( title, index + 1 ); + return { value: id, label, @@ -65,7 +71,7 @@ function NavigationMenuSelector( { }; } ) || [] ); - }, [ currentMenuId, navigationMenus, actionLabel, isCreatingMenu ] ); + }, [ navigationMenus, actionLabel ] ); const hasNavigationMenus = !! navigationMenus?.length; const hasClassicMenus = !! classicMenus?.length; @@ -77,20 +83,31 @@ function NavigationMenuSelector( { const menuUnavailable = hasResolvedNavigationMenus && currentMenuId === null; - useEffect( () => { - if ( ! hasResolvedNavigationMenus && ! canUserCreateNavigationMenu ) { - setSelectorLabel( __( 'Loading …' ) ); - } else if ( noMenuSelected || noBlockMenus || menuUnavailable ) { - setSelectorLabel( __( 'Choose or create a Navigation menu' ) ); - } + let selectorLabel = ''; + if ( isCreatingMenu || isResolvingNavigationMenus ) { + selectorLabel = __( 'Loading …' ); + } else if ( noMenuSelected || noBlockMenus || menuUnavailable ) { + // Note: classic Menus may be available. + selectorLabel = __( 'Choose or create a Navigation menu' ); + } else { + // Current Menu's title. + selectorLabel = currentTitle; + } + + useEffect( () => { if ( isCreatingMenu && ( createNavigationMenuIsSuccess || createNavigationMenuIsError ) ) { setIsCreatingMenu( false ); } - }, [ hasResolvedNavigationMenus, createNavigationMenuIsSuccess ] ); + }, [ + isCreatingMenu, + createNavigationMenuIsError, + createNavigationMenuIsSuccess, + setIsCreatingMenu, + ] ); const NavigationMenuSelectorDropdown = ( { - setSelectorLabel( __( 'Loading …' ) ); setIsCreatingMenu( true ); onSelectNavigationMenu( menuId ); onClose(); @@ -122,9 +138,6 @@ function NavigationMenuSelector( { return ( { - setSelectorLabel( - __( 'Loading …' ) - ); setIsCreatingMenu( true ); onSelectClassicMenu( menu ); onClose(); @@ -151,7 +164,6 @@ function NavigationMenuSelector( { onClose(); onCreateNew(); setIsCreatingMenu( true ); - setSelectorLabel( __( 'Loading …' ) ); } } > { __( 'Create new menu' ) }