@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.0

package/src/navigation/edit/inner-blocks.js

@@ -38,7 +38,6 @@ const LAYOUT = {
 };
 
 export default function NavigationInnerBlocks( {
-	isVisible,
 	clientId,
 	hasCustomPlaceholder,
 	orientation,
@@ -66,7 +65,7 @@ export default function NavigationInnerBlocks( {
 				] )?.length,
 
 				// This prop is already available but computing it here ensures it's
-				// fresh compared to isImmediateParentOfSelectedBlock
+				// fresh compared to isImmediateParentOfSelectedBlock.
 				isSelected: selectedBlockId === clientId,
 			};
 		},
@@ -98,6 +97,15 @@ export default function NavigationInnerBlocks( {
 
 	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
 
+	const hasMenuItems = !! blocks?.length;
+
+	// If there is a `ref` attribute pointing to a `wp_navigation` but
+	// that menu has no **items** (i.e. empty) then show a placeholder.
+	// The block must also be selected else the placeholder will display
+	// alongside the appender.
+	const showPlaceholder =
+		! hasCustomPlaceholder && ! hasMenuItems && ! isSelected;
+
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-navigation__container',
@@ -130,8 +138,7 @@ export default function NavigationInnerBlocks( {
 			// inherit templateLock={ 'all' }.
 			templateLock: false,
 			__experimentalLayout: LAYOUT,
-			placeholder:
-				! isVisible || hasCustomPlaceholder ? undefined : placeholder,
+			placeholder: showPlaceholder ? placeholder : undefined,
 		}
 	);
 

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

@@ -1,91 +1,154 @@
 /**
  * WordPress dependencies
  */
-import { MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
+import {
+	MenuGroup,
+	MenuItem,
+	MenuItemsChoice,
+	ToolbarDropdownMenu,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * 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,
+	currentMenuId,
 	onSelect,
 	onCreateNew,
-	canUserCreateNavigation = false,
-	canUserSwitchNavigation = false,
+	showManageActions = false,
+	actionLabel,
+	toggleProps = {},
 } ) {
+	/* 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,
+		canUserCreateNavigationMenu,
+		canUserUpdateNavigationMenu,
+		canSwitchNavigationMenu,
+	} = useNavigationMenu();
 
-	const createNavigationMenu = useCreateNavigationMenu( clientId );
+	const handleSelect = useCallback(
+		( _onClose ) => ( selectedId ) => {
+			_onClose();
+			onSelect(
+				navigationMenus?.find( ( post ) => post.id === selectedId )
+			);
+		},
+		[ navigationMenus ]
+	);
 
-	const onFinishMenuCreation = async (
-		blocks,
-		navigationMenuTitle = null
-	) => {
-		if ( ! canUserCreateNavigation ) {
-			return;
-		}
+	const handleSelectClassic = useCallback(
+		( _onClose, menu ) => () => {
+			_onClose();
+			onSelect( menu );
+		},
+		[]
+	);
 
-		const navigationMenu = await createNavigationMenu(
-			navigationMenuTitle,
-			blocks
+	const menuChoices = useMemo( () => {
+		return (
+			navigationMenus?.map( ( { id, title } ) => {
+				const label = decodeEntities( title.rendered );
+				return {
+					value: id,
+					label,
+					ariaLabel: sprintf( actionLabel, label ),
+				};
+			} ) || []
 		);
-		onSelect( navigationMenu );
-	};
+	}, [ navigationMenus ] );
 
-	const convertClassicMenuToBlocks = useConvertClassicMenu(
-		onFinishMenuCreation
-	);
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasClassicMenus = !! classicMenus?.length;
+	const showNavigationMenus = !! canSwitchNavigationMenu;
+	const showClassicMenus = !! canUserCreateNavigationMenu;
+	const hasManagePermissions =
+		canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
 
+	// Show the selector if:
+	// - has switch or create permissions and there are block or classic menus.
+	// - user has create or update permisisons and component should show the menu actions.
 	const showSelectMenus =
-		( canUserSwitchNavigation || canUserCreateNavigation ) &&
-		( navigationMenus?.length || hasClassicMenus );
+		( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
+			( hasNavigationMenus || hasClassicMenus ) ) ||
+		( hasManagePermissions && showManageActions );
 
 	if ( ! showSelectMenus ) {
 		return null;
 	}
 
 	return (
-		<>
-			<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'" ) }
-			/>
+		<ToolbarDropdownMenu
+			label={ __( 'Select Menu' ) }
+			text={ __( 'Select Menu' ) }
+			icon={ null }
+			toggleProps={ toggleProps }
+		>
+			{ ( { onClose } ) => (
+				<>
+					{ showNavigationMenus && hasNavigationMenus && (
+						<MenuGroup label={ __( 'Menus' ) }>
+							<MenuItemsChoice
+								value={ currentMenuId }
+								onSelect={ handleSelect( onClose ) }
+								choices={ menuChoices }
+							/>
+						</MenuGroup>
+					) }
+					{ showClassicMenus && hasClassicMenus && (
+						<MenuGroup label={ __( 'Classic Menus' ) }>
+							{ classicMenus?.map( ( menu ) => {
+								const label = decodeEntities( menu.name );
+								return (
+									<MenuItem
+										onClick={ handleSelectClassic(
+											onClose,
+											menu
+										) }
+										key={ menu.id }
+										aria-label={ sprintf(
+											createActionLabel,
+											label
+										) }
+									>
+										{ label }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
 
-			{ canUserCreateNavigation && (
-				<MenuGroup label={ __( 'Tools' ) }>
-					<MenuItem onClick={ onCreateNew }>
-						{ __( 'Create new menu' ) }
-					</MenuItem>
-					<MenuItem
-						href={ addQueryArgs( 'edit.php', {
-							post_type: 'wp_navigation',
-						} ) }
-					>
-						{ __( 'Manage menus' ) }
-					</MenuItem>
-				</MenuGroup>
+					{ showManageActions && hasManagePermissions && (
+						<MenuGroup label={ __( 'Tools' ) }>
+							{ canUserCreateNavigationMenu && (
+								<MenuItem onClick={ onCreateNew }>
+									{ __( 'Create new menu' ) }
+								</MenuItem>
+							) }
+							<MenuItem
+								href={ addQueryArgs( 'edit.php', {
+									post_type: 'wp_navigation',
+								} ) }
+							>
+								{ __( 'Manage menus' ) }
+							</MenuItem>
+						</MenuGroup>
+					) }
+				</>
 			) }
-		</>
+		</ToolbarDropdownMenu>
 	);
 }

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

@@ -1,141 +1,94 @@
 /**
  * WordPress dependencies
  */
-import { Placeholder, Button, DropdownMenu } from '@wordpress/components';
+import { Placeholder, Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
+import { speak } from '@wordpress/a11y';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-
 import useNavigationEntities from '../../use-navigation-entities';
 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';
-import ExistingMenusOptions from '../existing-menus-options';
+import NavigationMenuSelector from '../navigation-menu-selector';
 
 export default function NavigationPlaceholder( {
+	isSelected,
+	currentMenuId,
 	clientId,
+	canUserCreateNavigationMenu = false,
+	isResolvingCanUserCreateNavigationMenu,
 	onFinish,
-	canSwitchNavigationMenu,
-	hasResolvedNavigationMenus,
-	canUserCreateNavigation = false,
+	onCreateEmpty,
 } ) {
-	const createNavigationMenu = useCreateNavigationMenu( clientId );
+	const { isResolvingMenus, hasResolvedMenus } = useNavigationEntities();
 
-	const onFinishMenuCreation = async (
-		blocks,
-		navigationMenuTitle = null
-	) => {
-		if ( ! canUserCreateNavigation ) {
+	useEffect( () => {
+		if ( ! isSelected ) {
 			return;
 		}
 
-		const navigationMenu = await createNavigationMenu(
-			navigationMenuTitle,
-			blocks
-		);
-		onFinish( navigationMenu, blocks );
-	};
-
-	const convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );
-
-	const {
-		isResolvingPages,
-		menus,
-		isResolvingMenus,
-		hasMenus,
-	} = useNavigationEntities();
-
-	const isStillLoading = isResolvingPages || isResolvingMenus;
-
-	const onCreateEmptyMenu = () => {
-		onFinishMenuCreation( [] );
-	};
-
-	const { navigationMenus } = useNavigationMenu();
+		if ( isResolvingMenus ) {
+			speak( __( 'Loading Navigation block setup options.' ) );
+		}
 
-	const hasNavigationMenus = !! navigationMenus?.length;
+		if ( hasResolvedMenus ) {
+			speak( __( 'Navigation block setup options ready.' ) );
+		}
+	}, [ isResolvingMenus, isSelected ] );
 
-	const showSelectMenus =
-		( canSwitchNavigationMenu || canUserCreateNavigation ) &&
-		( hasNavigationMenus || hasMenus );
+	const isResolvingActions =
+		isResolvingMenus && isResolvingCanUserCreateNavigationMenu;
 
 	return (
 		<>
-			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
-				<PlaceholderPreview isLoading />
-			) }
-			{ hasResolvedNavigationMenus && ! isStillLoading && (
-				<Placeholder className="wp-block-navigation-placeholder">
-					<PlaceholderPreview />
-					<div className="wp-block-navigation-placeholder__controls">
-						<div className="wp-block-navigation-placeholder__actions">
-							<div className="wp-block-navigation-placeholder__actions__indicator">
-								<Icon icon={ navigation } />{ ' ' }
-								{ __( 'Navigation' ) }
-							</div>
-
-							<hr />
-
-							{ showSelectMenus ? (
-								<>
-									<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"
-									onClick={ onCreateEmptyMenu }
-								>
-									{ __( 'Start empty' ) }
-								</Button>
-							) }
+			<Placeholder className="wp-block-navigation-placeholder">
+				{
+					// The <PlaceholderPreview> component is displayed conditionally via CSS depending on
+					// whether the block is selected or not. This is achieved via CSS to avoid
+					// component re-renders
+				 }
+				<PlaceholderPreview isVisible={ ! isSelected } />
+				<div
+					aria-hidden={ ! isSelected ? true : undefined }
+					className="wp-block-navigation-placeholder__controls"
+				>
+					<div className="wp-block-navigation-placeholder__actions">
+						<div className="wp-block-navigation-placeholder__actions__indicator">
+							<Icon icon={ navigation } /> { __( 'Navigation' ) }
 						</div>
+
+						<hr />
+
+						{ isResolvingActions && <Spinner /> }
+
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							clientId={ clientId }
+							onSelect={ onFinish }
+							toggleProps={ {
+								variant: 'tertiary',
+								iconPosition: 'right',
+								className:
+									'wp-block-navigation-placeholder__actions__dropdown',
+							} }
+						/>
+
+						<hr />
+
+						{ canUserCreateNavigationMenu && (
+							<Button
+								variant="tertiary"
+								onClick={ onCreateEmpty }
+							>
+								{ __( 'Start empty' ) }
+							</Button>
+						) }
 					</div>
-				</Placeholder>
-			) }
+				</div>
+			</Placeholder>
 		</>
 	);
 }

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

@@ -1,21 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { Icon, navigation } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
-const PlaceholderPreview = ( { isLoading } ) => {
+const PlaceholderPreview = ( { isVisible = true } ) => {
 	return (
 		<div
-			className={ classnames(
-				'wp-block-navigation-placeholder__preview',
-				{ 'is-loading': isLoading }
-			) }
+			aria-hidden={ ! isVisible ? true : undefined }
+			className="wp-block-navigation-placeholder__preview"
 		>
 			<div className="wp-block-navigation-placeholder__actions__indicator">
 				<Icon icon={ navigation } />

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -72,7 +72,9 @@ export default function UnsavedInnerBlocks( {
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const createNavigationMenu = useCreateNavigationMenu( clientId );
+	const { create: createNavigationMenu } = useCreateNavigationMenu(
+		clientId
+	);
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( async () => {

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useCreateNavigationMenu from './use-create-navigation-menu';
+import menuItemsToBlocks from '../menu-items-to-blocks';
+
+export const CLASSIC_MENU_CONVERSION_SUCCESS = 'success';
+export const CLASSIC_MENU_CONVERSION_ERROR = 'error';
+export const CLASSIC_MENU_CONVERSION_PENDING = 'pending';
+export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
+
+function useConvertClassicToBlockMenu( clientId ) {
+	const { create: createNavigationMenu } = useCreateNavigationMenu(
+		clientId
+	);
+	const registry = useRegistry();
+
+	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
+	const [ value, setValue ] = useState( null );
+	const [ error, setError ] = useState( null );
+
+	async function convertClassicMenuToBlockMenu( menuId, menuName ) {
+		let navigationMenu;
+		let classicMenuItems;
+
+		// 1. Fetch the classic Menu items.
+		try {
+			classicMenuItems = await registry
+				.resolveSelect( coreStore )
+				.getMenuItems( {
+					menus: menuId,
+					per_page: -1,
+					context: 'view',
+				} );
+		} catch ( err ) {
+			throw new Error(
+				sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( `Unable to fetch classic menu "%s" from API.` ),
+					menuName
+				),
+				{
+					cause: err,
+				}
+			);
+		}
+
+		// Handle offline response which resolves to `null`.
+		if ( classicMenuItems === null ) {
+			throw new Error(
+				sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( `Unable to fetch classic menu "%s" from API.` ),
+					menuName
+				)
+			);
+		}
+
+		// 2. Convert the classic items into blocks.
+		const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
+
+		// 3. Create the `wp_navigation` Post with the blocks.
+		try {
+			navigationMenu = await createNavigationMenu(
+				menuName,
+				innerBlocks
+			);
+		} catch ( err ) {
+			throw new Error(
+				sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( `Unable to create Navigation Menu "%s".` ),
+					menuName
+				),
+				{
+					cause: err,
+				}
+			);
+		}
+
+		return navigationMenu;
+	}
+
+	const convert = useCallback(
+		( menuId, menuName ) => {
+			if ( ! menuId || ! menuName ) {
+				setError( 'Unable to convert menu. Missing menu details.' );
+				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+				return;
+			}
+
+			setStatus( CLASSIC_MENU_CONVERSION_PENDING );
+			setValue( null );
+			setError( null );
+
+			convertClassicMenuToBlockMenu( menuId, menuName )
+				.then( ( navMenu ) => {
+					setValue( navMenu );
+					setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+				} )
+				.catch( ( err ) => {
+					setError( err?.message );
+					setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+
+					// Rethrow error for debugging.
+					throw new Error(
+						sprintf(
+							// translators: %s: the name of a menu (e.g. Header navigation).
+							__( `Unable to create Navigation Menu "%s".` ),
+							menuName
+						),
+						{
+							cause: err,
+						}
+					);
+				} );
+		},
+		[ clientId ]
+	);
+
+	return {
+		convert,
+		status,
+		value,
+		error,
+	};
+}
+
+export default useConvertClassicToBlockMenu;