Extract Existing Menus component in Nav block (#38179)

WordPress · Feb 4, 2022 · 8536f6f · 8536f6f
1 parent 769245a
commit 8536f6f
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 153 deletions.
diff --git a/packages/block-library/src/navigation/edit/existing-menus-options.js b/packages/block-library/src/navigation/edit/existing-menus-options.js
@@ -0,0 +1,70 @@
+/**
+ * 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 && (
+ <MenuGroup label={ __( 'Menus' ) }>
+ { navigationMenus.map( ( menu ) => {
+ const label = decodeEntities( menu.title.rendered );
+ return (
+ <MenuItem
+ onClick={ () => {
+ onSelectNavigationMenu( menu );
+ } }
+ key={ menu.id }
+ aria-label={ sprintf( actionLabel, label ) }
+ >
+ { label }
+ </MenuItem>
+ );
+ } ) }
+ </MenuGroup>
+ ) }
+ { showClassicMenus && hasClassicMenus && (
+ <MenuGroup label={ __( 'Classic Menus' ) }>
+ { classicMenus.map( ( menu ) => {
+ const label = decodeEntities( menu.name );
+ return (
+ <MenuItem
+ onClick={ () => {
+ onSelectClassicMenu( menu );
+ } }
+ key={ menu.id }
+ aria-label={ sprintf(
+ createActionLabel,
+ label
+ ) }
+ >
+ { label }
+ </MenuItem>
+ );
+ } ) }
+ </MenuGroup>
+ ) }
+ </>
+ );
+};
+
+export default ExistingMenusOptions;
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -499,6 +499,9 @@ function Navigation( {
  canUserCreateNavigation={
  canUserCreateNavigation
  }
+ canUserSwitchNavigation={
+ canSwitchNavigationMenu
+ }
  />
  ) }
  </ToolbarDropdownMenu>

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';
-import { useEntityId } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -14,19 +13,20 @@ 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,
 } ) {
  const {
  menus: classicMenus,
  hasMenus: hasClassicMenus,
  } = useNavigationEntities();
  const { navigationMenus } = useNavigationMenu();
- const ref = useEntityId( 'postType', 'wp_navigation' );
 
  const createNavigationMenu = useCreateNavigationMenu( clientId );
 
@@ -49,66 +49,42 @@ export default function NavigationMenuSelector( {
  onFinishMenuCreation
  );
 
+ const showSelectMenus =
+ ( canUserSwitchNavigation || canUserCreateNavigation ) &&
+ ( navigationMenus?.length || hasClassicMenus );
+
+ if ( ! showSelectMenus ) {
+ return null;
+ }
+
  return (
  <>
- <MenuGroup label={ __( 'Menus' ) }>
- <MenuItemsChoice
- value={ ref }
- onSelect={ ( selectedId ) =>
- onSelect(
- navigationMenus.find(
- ( post ) => post.id === selectedId
- )
- )
- }
- choices={ navigationMenus.map( ( { id, title } ) => {
- const label = decodeEntities( title.rendered );
- return {
- value: id,
- label,
- 'aria-label': sprintf(
- /* translators: %s: The name of a menu. */
- __( "Switch to '%s'" ),
- label
- ),
- };
- } ) }
- />
- </MenuGroup>
+ <ExistingMenusOptions
+ showNavigationMenus={ canUserSwitchNavigation }
+ showClassicMenus={ canUserCreateNavigation }
+ navigationMenus={ navigationMenus }
+ classicMenus={ classicMenus }
+ onSelectNavigationMenu={ onSelect }
+ onSelectClassicMenu={ ( { id, name } ) =>
+ convertClassicMenuToBlocks( id, name )
+ }
+ /* translators: %s: The name of a menu. */
+ actionLabel={ __( "Switch to '%s'" ) }
+ />
+
  { canUserCreateNavigation && (
- <>
- { hasClassicMenus && (
- <MenuGroup label={ __( 'Classic Menus' ) }>
- { classicMenus.map( ( menu ) => {
- return (
- <MenuItem
- onClick={ () => {
- convertClassicMenuToBlocks(
- menu.id,
- menu.name
- );
- } }
- key={ menu.id }
- >
- { decodeEntities( menu.name ) }
- </MenuItem>
- );
- } ) }
- </MenuGroup>
- ) }
- <MenuGroup label={ __( 'Tools' ) }>
- <MenuItem onClick={ onCreateNew }>
- { __( 'Create new menu' ) }
- </MenuItem>
- <MenuItem
- href={ addQueryArgs( 'edit.php', {
- post_type: 'wp_navigation',
- } ) }
- >
- { __( 'Manage menus' ) }
- </MenuItem>
- </MenuGroup>
- </>
+ <MenuGroup label={ __( 'Tools' ) }>
+ <MenuItem onClick={ onCreateNew }>
+ { __( 'Create new menu' ) }
+ </MenuItem>
+ <MenuItem
+ href={ addQueryArgs( 'edit.php', {
+ post_type: 'wp_navigation',
+ } ) }
+ >
+ { __( 'Manage menus' ) }
+ </MenuItem>
+ </MenuGroup>
  ) }
  </>
  );

diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -1,16 +1,9 @@
 /**
  * WordPress dependencies
  */
-import {
- Placeholder,
- Button,
- DropdownMenu,
- MenuGroup,
- MenuItem,
-} from '@wordpress/components';
+import { Placeholder, Button, DropdownMenu } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -21,77 +14,7 @@ import PlaceholderPreview from './placeholder-preview';
 import useNavigationMenu from '../../use-navigation-menu';
 import useCreateNavigationMenu from '../use-create-navigation-menu';
 import useConvertClassicMenu from '../../use-convert-classic-menu';
-
-const ExistingMenusDropdown = ( {
- showNavigationMenus,
- navigationMenus,
- onFinish,
- menus,
- onCreateFromMenu,
- showClassicMenus = false,
-} ) => {
- const toggleProps = {
- variant: 'tertiary',
- iconPosition: 'right',
- className: 'wp-block-navigation-placeholder__actions__dropdown',
- };
-
- const hasNavigationMenus = !! navigationMenus?.length;
- const hasClassicMenus = !! menus?.length;
-
- return (
- <DropdownMenu
- text={ __( 'Select menu' ) }
- icon={ null }
- toggleProps={ toggleProps }
- popoverProps={ { isAlternate: true } }
- >
- { ( { onClose } ) => (
- <>
- { showNavigationMenus && hasNavigationMenus && (
- <MenuGroup label={ __( 'Menus' ) }>
- { navigationMenus.map( ( menu ) => {
- return (
- <MenuItem
- onClick={ () => {
- onFinish( menu );
- } }
- onClose={ onClose }
- key={ menu.id }
- >
- { decodeEntities(
- menu.title.rendered
- ) }
- </MenuItem>
- );
- } ) }
- </MenuGroup>
- ) }
- { showClassicMenus && hasClassicMenus && (
- <MenuGroup label={ __( 'Classic Menus' ) }>
- { menus.map( ( menu ) => {
- return (
- <MenuItem
- onClick={ () => {
- onCreateFromMenu(
- menu.id,
- menu.name
- );
- } }
- onClose={ onClose }
- key={ menu.id }
- >
- { decodeEntities( menu.name ) }
- </MenuItem>
- );
- } ) }
- </MenuGroup>
- ) }
- </>
- ) }
- </DropdownMenu>
- );
-};
+import ExistingMenusOptions from '../existing-menus-options';
 
 export default function NavigationPlaceholder( {
  clientId,
@@ -159,21 +82,48 @@ export default function NavigationPlaceholder( {
 
  { showSelectMenus ? (
  <>
- <ExistingMenusDropdown
- showNavigationMenus={
- canSwitchNavigationMenu
- }
- navigationMenus={ navigationMenus }
- onFinish={ onFinish }
- menus={ menus }
- onCreateFromMenu={ convertClassicMenu }
- showClassicMenus={
- canUserCreateNavigation
- }
- />
+ <DropdownMenu
+ text={ __( 'Select menu' ) }
+ icon={ null }
+ toggleProps={ {
+ variant: 'tertiary',
+ iconPosition: 'right',
+ className:
+ 'wp-block-navigation-placeholder__actions__dropdown',
+ } }
+ popoverProps={ { isAlternate: true } }
+ >
+ { () => (
+ <ExistingMenusOptions
+ showNavigationMenus={
+ canSwitchNavigationMenu
+ }
+ navigationMenus={
+ navigationMenus
+ }
+ onSelectNavigationMenu={
+ onFinish
+ }
+ classicMenus={ menus }
+ onSelectClassicMenu={ ( {
+ id,
+ name,
+ } ) =>
+ convertClassicMenu(
+ id,
+ name
+ )
+ }
+ showClassicMenus={
+ canUserCreateNavigation
+ }
+ />
+ ) }
+ </DropdownMenu>
  <hr />
  </>
  ) : undefined }
+
  { canUserCreateNavigation && (
  <Button
  variant="tertiary"