@wordpress/block-library 6.0.23 → 7.0.0

package/src/navigation/edit/navigation-menu-selector.js

@@ -1,53 +1,79 @@
 /**
  * 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';
 
 /**
  * Internal dependencies
  */
 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,
-	showCreate = false,
+	canUserCreateNavigation = false,
+	canUserSwitchNavigation = false,
 } ) {
+	const {
+		menus: classicMenus,
+		hasMenus: hasClassicMenus,
+	} = useNavigationEntities();
 	const { navigationMenus } = useNavigationMenu();
-	const ref = useEntityId( 'postType', 'wp_navigation' );
+
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
+
+	const onFinishMenuCreation = async (
+		blocks,
+		navigationMenuTitle = null
+	) => {
+		if ( ! canUserCreateNavigation ) {
+			return;
+		}
+
+		const navigationMenu = await createNavigationMenu(
+			navigationMenuTitle,
+			blocks
+		);
+		onSelect( navigationMenu );
+	};
+
+	const convertClassicMenuToBlocks = useConvertClassicMenu(
+		onFinishMenuCreation
+	);
+
+	const showSelectMenus =
+		( canUserSwitchNavigation || canUserCreateNavigation ) &&
+		( navigationMenus?.length || hasClassicMenus );
+
+	if ( ! showSelectMenus ) {
+		return null;
+	}
 
 	return (
 		<>
-			<MenuGroup>
-				<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>
-			{ showCreate && (
-				<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 && (
+				<MenuGroup label={ __( 'Tools' ) }>
 					<MenuItem onClick={ onCreateNew }>
 						{ __( 'Create new menu' ) }
 					</MenuItem>

package/src/navigation/edit/overlay-menu-icon.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Rect } from '@wordpress/primitives';
+
+export default function OverlayMenuIcon() {
+	return (
+		<SVG
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			width="24"
+			height="24"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<Rect x="4" y="7.5" width="16" height="1.5" />
+			<Rect x="4" y="15" width="16" height="1.5" />
+		</SVG>
+	);
+}

package/src/navigation/edit/placeholder/index.js

@@ -1,18 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
-import {
-	Placeholder,
-	Button,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-} from '@wordpress/components';
-import { useCallback, useState, useEffect } from '@wordpress/element';
+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
@@ -20,75 +11,10 @@ import { decodeEntities } from '@wordpress/html-entities';
 
 import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
-import menuItemsToBlocks from '../../menu-items-to-blocks';
 import useNavigationMenu from '../../use-navigation-menu';
 import useCreateNavigationMenu from '../use-create-navigation-menu';
-
-const ExistingMenusDropdown = ( {
-	canSwitchNavigationMenu,
-	navigationMenus,
-	setSelectedMenu,
-	onFinish,
-	menus,
-	onCreateFromMenu,
-	showClassicMenus = false,
-} ) => {
-	const toggleProps = {
-		variant: 'tertiary',
-		iconPosition: 'right',
-		className: 'wp-block-navigation-placeholder__actions__dropdown',
-	};
-	return (
-		<DropdownMenu
-			text={ __( 'Select menu' ) }
-			icon={ null }
-			toggleProps={ toggleProps }
-			popoverProps={ { isAlternate: true } }
-		>
-			{ ( { onClose } ) => (
-				<>
-					<MenuGroup label={ __( 'Menus' ) }>
-						{ canSwitchNavigationMenu &&
-							navigationMenus?.map( ( menu ) => {
-								return (
-									<MenuItem
-										onClick={ () => {
-											setSelectedMenu( menu.id );
-											onFinish( menu );
-										} }
-										onClose={ onClose }
-										key={ menu.id }
-									>
-										{ decodeEntities(
-											menu.title.rendered
-										) }
-									</MenuItem>
-								);
-							} ) }
-					</MenuGroup>
-					{ showClassicMenus && (
-						<MenuGroup label={ __( 'Classic Menus' ) }>
-							{ menus?.map( ( menu ) => {
-								return (
-									<MenuItem
-										onClick={ () => {
-											setSelectedMenu( menu.id );
-											onCreateFromMenu( menu.name );
-										} }
-										onClose={ onClose }
-										key={ menu.id }
-									>
-										{ decodeEntities( menu.name ) }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-					) }
-				</>
-			) }
-		</DropdownMenu>
-	);
-};
+import useConvertClassicMenu from '../../use-convert-classic-menu';
+import ExistingMenusOptions from '../existing-menus-options';
 
 export default function NavigationPlaceholder( {
 	clientId,
@@ -97,9 +23,6 @@ export default function NavigationPlaceholder( {
 	hasResolvedNavigationMenus,
 	canUserCreateNavigation = false,
 } ) {
-	const [ selectedMenu, setSelectedMenu ] = useState();
-	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-	const [ menuName, setMenuName ] = useState( '' );
 	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
 	const onFinishMenuCreation = async (
@@ -117,58 +40,28 @@ export default function NavigationPlaceholder( {
 		onFinish( navigationMenu, blocks );
 	};
 
+	const convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );
+
 	const {
 		isResolvingPages,
 		menus,
 		isResolvingMenus,
-		menuItems,
-		hasResolvedMenuItems,
-		hasPages,
 		hasMenus,
-	} = useNavigationEntities( selectedMenu );
+	} = useNavigationEntities();
 
 	const isStillLoading = isResolvingPages || isResolvingMenus;
 
-	const createFromMenu = useCallback(
-		( name ) => {
-			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-			onFinishMenuCreation( blocks, name );
-		},
-		[ menuItems, menuItemsToBlocks, onFinish ]
-	);
-
-	const onCreateFromMenu = ( name ) => {
-		// If we have menu items, create the block right away.
-		if ( hasResolvedMenuItems ) {
-			createFromMenu( name );
-			return;
-		}
-
-		// Otherwise, create the block when resolution finishes.
-		setIsCreatingFromMenu( true );
-		// Store the name to use later.
-		setMenuName( name );
-	};
-
 	const onCreateEmptyMenu = () => {
 		onFinishMenuCreation( [] );
 	};
 
-	const onCreateAllPages = () => {
-		const block = [ createBlock( 'core/page-list' ) ];
-		onFinishMenuCreation( block );
-	};
+	const { navigationMenus } = useNavigationMenu();
 
-	useEffect( () => {
-		// If the user selected a menu but we had to wait for menu items to
-		// finish resolving, then create the block once resolution finishes.
-		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
-			createFromMenu( menuName );
-			setIsCreatingFromMenu( false );
-		}
-	}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );
+	const hasNavigationMenus = !! navigationMenus?.length;
 
-	const { navigationMenus } = useNavigationMenu();
+	const showSelectMenus =
+		( canSwitchNavigationMenu || canUserCreateNavigation ) &&
+		( hasNavigationMenus || hasMenus );
 
 	return (
 		<>
@@ -187,32 +80,46 @@ export default function NavigationPlaceholder( {
 
 							<hr />
 
-							{ hasMenus || navigationMenus?.length ? (
+							{ showSelectMenus ? (
 								<>
-									<ExistingMenusDropdown
-										canSwitchNavigationMenu={
-											canSwitchNavigationMenu
-										}
-										navigationMenus={ navigationMenus }
-										setSelectedMenu={ setSelectedMenu }
-										onFinish={ onFinish }
-										menus={ menus }
-										onCreateFromMenu={ onCreateFromMenu }
-										showClassicMenus={
-											canUserCreateNavigation
-										}
-									/>
-									<hr />
-								</>
-							) : undefined }
-							{ canUserCreateNavigation && hasPages ? (
-								<>
-									<Button
-										variant="tertiary"
-										onClick={ onCreateAllPages }
+									<DropdownMenu
+										text={ __( 'Select menu' ) }
+										icon={ null }
+										toggleProps={ {
+											variant: 'tertiary',
+											iconPosition: 'right',
+											className:
+												'wp-block-navigation-placeholder__actions__dropdown',
+										} }
+										popoverProps={ { isAlternate: true } }
 									>
-										{ __( 'Add all pages' ) }
-									</Button>
+										{ () => (
+											<ExistingMenusOptions
+												showNavigationMenus={
+													canSwitchNavigationMenu
+												}
+												navigationMenus={
+													navigationMenus
+												}
+												onSelectNavigationMenu={
+													onFinish
+												}
+												classicMenus={ menus }
+												onSelectClassicMenu={ ( {
+													id,
+													name,
+												} ) =>
+													convertClassicMenu(
+														id,
+														name
+													)
+												}
+												showClassicMenus={
+													canUserCreateNavigation
+												}
+											/>
+										) }
+									</DropdownMenu>
 									<hr />
 								</>
 							) : undefined }

package/src/navigation/edit/placeholder/placeholder-preview.js

@@ -6,24 +6,22 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Icon, search } from '@wordpress/icons';
+import { Icon, navigation } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 const PlaceholderPreview = ( { isLoading } ) => {
 	return (
-		<ul
+		<div
 			className={ classnames(
 				'wp-block-navigation-placeholder__preview',
-				'wp-block-navigation__container',
 				{ 'is-loading': isLoading }
 			) }
 		>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-placeholder__preview-search-icon">
-				<Icon icon={ search } />
-			</li>
-		</ul>
+			<div className="wp-block-navigation-placeholder__actions__indicator">
+				<Icon icon={ navigation } />
+				{ __( 'Navigation' ) }
+			</div>
+		</div>
 	);
 };
 

package/src/navigation/edit/responsive-wrapper.js

@@ -8,9 +8,13 @@ import classnames from 'classnames';
  */
 import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
-import { SVG, Rect } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
 export default function ResponsiveWrapper( {
 	children,
 	id,
@@ -20,6 +24,7 @@ export default function ResponsiveWrapper( {
 	isHiddenByDefault,
 	classNames,
 	styles,
+	hasIcon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -57,18 +62,12 @@ export default function ResponsiveWrapper( {
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
-					<SVG
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						width="24"
-						height="24"
-						role="img"
-						aria-hidden="true"
-						focusable="false"
-					>
-						<Rect x="4" y="7.5" width="16" height="1.5" />
-						<Rect x="4" y="15" width="16" height="1.5" />
-					</SVG>
+					{ hasIcon && <OverlayMenuIcon /> }
+					{ ! hasIcon && (
+						<span className="wp-block-navigation__toggle_button_label">
+							{ __( 'Menu' ) }
+						</span>
+					) }
 				</Button>
 			) }