diff --git a/packages/block-library/src/navigation/edit/existing-menus-options.js b/packages/block-library/src/navigation/edit/existing-menus-options.js deleted file mode 100644 index a47ae613489bf..0000000000000 --- a/packages/block-library/src/navigation/edit/existing-menus-options.js +++ /dev/null @@ -1,70 +0,0 @@ -/** - * WordPress dependencies - */ -import { MenuGroup, MenuItem } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { decodeEntities } from '@wordpress/html-entities'; - -const ExistingMenusOptions = ( { - showNavigationMenus, - showClassicMenus = false, - navigationMenus, - classicMenus, - onSelectNavigationMenu, - onSelectClassicMenu, - actionLabel, -} ) => { - const hasNavigationMenus = !! navigationMenus?.length; - const hasClassicMenus = !! classicMenus?.length; - - /* translators: %s: The name of a menu. */ - const createActionLabel = __( "Create from '%s'" ); - - actionLabel = actionLabel || createActionLabel; - - return ( - <> - { showNavigationMenus && hasNavigationMenus && ( - - { navigationMenus.map( ( menu ) => { - const label = decodeEntities( menu.title.rendered ); - return ( - { - onSelectNavigationMenu( menu ); - } } - key={ menu.id } - aria-label={ sprintf( actionLabel, label ) } - > - { label } - - ); - } ) } - - ) } - { showClassicMenus && hasClassicMenus && ( - - { classicMenus.map( ( menu ) => { - const label = decodeEntities( menu.name ); - return ( - { - onSelectClassicMenu( menu ); - } } - key={ menu.id } - aria-label={ sprintf( - createActionLabel, - label - ) } - > - { label } - - ); - } ) } - - ) } - - ); -}; - -export default ExistingMenusOptions; diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 705a46845c105..e780ae7372aeb 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -496,12 +496,9 @@ function Navigation( { onClose(); } } onCreateNew={ startWithEmptyMenu } - canUserCreateNavigation={ - canUserCreateNavigation - } - canUserSwitchNavigation={ - canSwitchNavigationMenu - } + /* translators: %s: The name of a menu. */ + actionLabel={ __( "Switch to '%s'" ) } + showManageActions /> ) } 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 168ef06caade9..4f5b61e71f3ad 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -2,8 +2,8 @@ * WordPress dependencies */ import { MenuGroup, MenuItem } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - +import { __, sprintf } from '@wordpress/i18n'; +import { decodeEntities } from '@wordpress/html-entities'; import { addQueryArgs } from '@wordpress/url'; /** @@ -13,20 +13,27 @@ import useNavigationMenu from '../use-navigation-menu'; import useNavigationEntities from '../use-navigation-entities'; import useConvertClassicMenu from '../use-convert-classic-menu'; import useCreateNavigationMenu from './use-create-navigation-menu'; -import ExistingMenusOptions from './existing-menus-options'; export default function NavigationMenuSelector( { clientId, onSelect, onCreateNew, - canUserCreateNavigation = false, - canUserSwitchNavigation = false, + showManageActions = false, + actionLabel, } ) { + /* translators: %s: The name of a menu. */ + const createActionLabel = __( "Create from '%s'" ); + + actionLabel = actionLabel || createActionLabel; + + const { menus: classicMenus } = useNavigationEntities(); + const { - menus: classicMenus, - hasMenus: hasClassicMenus, - } = useNavigationEntities(); - const { navigationMenus } = useNavigationMenu(); + navigationMenus, + canUserCreateNavigation: canUserCreateNavigationMenu, + canUserUpdateNavigationEntity: canUserUpdateNavigationMenu, + canSwitchNavigationMenu, + } = useNavigationMenu(); const createNavigationMenu = useCreateNavigationMenu( clientId ); @@ -34,7 +41,7 @@ export default function NavigationMenuSelector( { blocks, navigationMenuTitle = null ) => { - if ( ! canUserCreateNavigation ) { + if ( ! canUserCreateNavigationMenu ) { return; } @@ -49,9 +56,15 @@ export default function NavigationMenuSelector( { onFinishMenuCreation ); + const hasNavigationMenus = !! navigationMenus?.length; + const hasClassicMenus = !! classicMenus?.length; + const showNavigationMenus = !! canSwitchNavigationMenu; + const showClassicMenus = !! canUserCreateNavigationMenu; + const hasManagePermissions = + canUserCreateNavigationMenu || canUserUpdateNavigationMenu; const showSelectMenus = - ( canUserSwitchNavigation || canUserCreateNavigation ) && - ( navigationMenus?.length || hasClassicMenus ); + ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) && + ( hasNavigationMenus || hasClassicMenus ); if ( ! showSelectMenus ) { return null; @@ -59,24 +72,56 @@ export default function NavigationMenuSelector( { return ( <> - - convertClassicMenuToBlocks( id, name ) - } - /* translators: %s: The name of a menu. */ - actionLabel={ __( "Switch to '%s'" ) } - /> + { showNavigationMenus && hasNavigationMenus && ( + + { navigationMenus.map( ( menu ) => { + const label = decodeEntities( menu.title.rendered ); + return ( + { + onSelect( menu ); + } } + key={ menu.id } + aria-label={ sprintf( actionLabel, label ) } + > + { label } + + ); + } ) } + + ) } + { showClassicMenus && hasClassicMenus && ( + + { classicMenus.map( ( menu ) => { + const label = decodeEntities( menu.name ); + return ( + { + convertClassicMenuToBlocks( + menu.id, + menu.name + ); + } } + key={ menu.id } + aria-label={ sprintf( + createActionLabel, + label + ) } + > + { label } + + ); + } ) } + + ) } - { canUserCreateNavigation && ( + { showManageActions && hasManagePermissions && ( - - { __( 'Create new menu' ) } - + { canUserCreateNavigationMenu && ( + + { __( 'Create new menu' ) } + + ) } { () => ( - - convertClassicMenu( - id, - name - ) - } - showClassicMenus={ - canUserCreateNavigation - } + ) } diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js index 50c28445a7adb..ccac0a1f935ab 100644 --- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js +++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js @@ -119,6 +119,11 @@ async function selectClassicMenu( optionText ) { `//*[contains(@class, 'components-menu-item__item')][ text()="${ optionText }" ]` ); await theOption.click(); + + await page.waitForResponse( + ( response ) => + response.url().includes( 'menu-items' ) && response.status() === 200 + ); } const PLACEHOLDER_ACTIONS_CLASS = 'wp-block-navigation-placeholder__actions';