@wordpress/block-library 7.0.2 → 7.1.0

package/src/navigation/edit/index.js

@@ -35,10 +35,11 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToolbarGroup,
-	ToolbarDropdownMenu,
 	Button,
+	Spinner,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -47,7 +48,6 @@ import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
-import PlaceholderPreview from './placeholder/placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
 import NavigationInnerBlocks from './inner-blocks';
 import NavigationMenuSelector from './navigation-menu-selector';
@@ -56,6 +56,16 @@ import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 import useNavigationNotice from './use-navigation-notice';
 import OverlayMenuIcon from './overlay-menu-icon';
+import useConvertClassicToBlockMenu, {
+	CLASSIC_MENU_CONVERSION_ERROR,
+	CLASSIC_MENU_CONVERSION_PENDING,
+	CLASSIC_MENU_CONVERSION_SUCCESS,
+} from './use-convert-classic-menu-to-block-menu';
+import useCreateNavigationMenu, {
+	CREATE_NAVIGATION_MENU_ERROR,
+	CREATE_NAVIGATION_MENU_PENDING,
+	CREATE_NAVIGATION_MENU_SUCCESS,
+} from './use-create-navigation-menu';
 
 const EMPTY_ARRAY = [];
 
@@ -157,6 +167,51 @@ function Navigation( {
 	// the Select Menu dropdown.
 	useNavigationEntities();
 
+	const [
+		showNavigationMenuCreateNotice,
+		hideNavigationMenuCreateNotice,
+	] = useNavigationNotice( {
+		name: 'block-library/core/navigation/create',
+	} );
+
+	const {
+		create: createNavigationMenu,
+		status: createNavigationMenuStatus,
+		error: createNavigationMenuError,
+		value: createNavigationMenuPost,
+	} = useCreateNavigationMenu( clientId );
+
+	const isCreatingNavigationMenu =
+		createNavigationMenuStatus === CREATE_NAVIGATION_MENU_PENDING;
+
+	useEffect( () => {
+		hideNavigationMenuCreateNotice();
+
+		if ( createNavigationMenuStatus === CREATE_NAVIGATION_MENU_PENDING ) {
+			speak( __( `Creating Navigation Menu.` ) );
+		}
+
+		if ( createNavigationMenuStatus === CREATE_NAVIGATION_MENU_SUCCESS ) {
+			setRef( createNavigationMenuPost.id );
+			selectBlock( clientId );
+
+			showNavigationMenuCreateNotice(
+				__( `Navigation Menu successfully created.` )
+			);
+		}
+
+		if ( createNavigationMenuStatus === CREATE_NAVIGATION_MENU_ERROR ) {
+			showNavigationMenuCreateNotice(
+				__( 'Failed to create Navigation Menu.' )
+			);
+		}
+	}, [
+		createNavigationMenu,
+		createNavigationMenuStatus,
+		createNavigationMenuError,
+		createNavigationMenuPost,
+	] );
+
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
@@ -173,8 +228,7 @@ function Navigation( {
 			// introduce a selector like `getUncontrolledInnerBlocks`, just in
 			// case `getBlock` is fixed.
 			const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks;
-			const _hasUncontrolledInnerBlocks =
-				_uncontrolledInnerBlocks?.length;
+			const _hasUncontrolledInnerBlocks = !! _uncontrolledInnerBlocks?.length;
 			const _controlledInnerBlocks = _hasUncontrolledInnerBlocks
 				? EMPTY_ARRAY
 				: getBlocks( clientId );
@@ -206,10 +260,6 @@ function Navigation( {
 
 	const isWithinUnassignedArea = !! navigationArea && ! ref;
 
-	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
-		! hasUncontrolledInnerBlocks || isWithinUnassignedArea
-	);
-
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
 		false
 	);
@@ -219,8 +269,6 @@ function Navigation( {
 	const {
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
-		canSwitchNavigationMenu,
-		hasResolvedNavigationMenus,
 		navigationMenus,
 		navigationMenu,
 		canUserUpdateNavigationMenu,
@@ -228,6 +276,7 @@ function Navigation( {
 		canUserDeleteNavigationMenu,
 		hasResolvedCanUserDeleteNavigationMenu,
 		canUserCreateNavigationMenu,
+		isResolvingCanUserCreateNavigationMenu,
 		hasResolvedCanUserCreateNavigationMenu,
 	} = useNavigationMenu( ref );
 
@@ -238,9 +287,45 @@ function Navigation( {
 		clientId
 	);
 
+	const {
+		convert,
+		status: classicMenuConversionStatus,
+		error: classicMenuConversionError,
+		value: classicMenuConversionResult,
+	} = useConvertClassicToBlockMenu( clientId );
+
+	const isConvertingClassicMenu =
+		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
+
+	// The standard HTML5 tag for the block wrapper.
+	const TagName = 'nav';
+
+	// "placeholder" shown if:
+	// - there is no ref attribute pointing to a Navigation Post.
+	// - there is no classic menu conversion process in progress.
+	// - there is no menu creation process in progress.
+	// - there are no uncontrolled blocks.
+	// - (legacy) there is a Navigation Area without a ref attribute pointing to a Navigation Post.
+	const isPlaceholder =
+		! ref &&
+		! isCreatingNavigationMenu &&
+		! isConvertingClassicMenu &&
+		( ! hasUncontrolledInnerBlocks || isWithinUnassignedArea );
+
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;
 
+	// "loading" state:
+	// - there is a menu creation process in progress.
+	// - there is a classic menu conversion process in progress.
+	// OR
+	// - there is a ref attribute pointing to a Navigation Post
+	// - the Navigation Post isn't available (hasn't resolved) yet.
+	const isLoading =
+		isCreatingNavigationMenu ||
+		isConvertingClassicMenu ||
+		!! ( ref && ! isEntityAvailable && ! isConvertingClassicMenu );
+
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
@@ -302,6 +387,42 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
+	const [
+		showClassicMenuConversionErrorNotice,
+		hideClassicMenuConversionErrorNotice,
+	] = useNavigationNotice( {
+		name: 'block-library/core/navigation/classic-menu-conversion/error',
+	} );
+
+	function handleUpdateMenu( menuId ) {
+		setRef( menuId );
+		selectBlock( clientId );
+	}
+
+	useEffect( () => {
+		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING ) {
+			speak( __( 'Classic menu importing.' ) );
+		}
+
+		if (
+			classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS &&
+			classicMenuConversionResult
+		) {
+			handleUpdateMenu( classicMenuConversionResult?.id );
+			hideClassicMenuConversionErrorNotice();
+			speak( __( 'Classic menu imported successfully.' ) );
+		}
+
+		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR ) {
+			showClassicMenuConversionErrorNotice( classicMenuConversionError );
+			speak( __( 'Classic menu import failed.' ) );
+		}
+	}, [
+		classicMenuConversionStatus,
+		classicMenuConversionResult,
+		classicMenuConversionError,
+	] );
+
 	// Spacer block needs orientation from context. This is a patch until
 	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
 	useEffect( () => {
@@ -332,11 +453,6 @@ function Navigation( {
 		}
 	} );
 
-	// Hide the placeholder if an navigation menu entity has loaded.
-	useEffect( () => {
-		setIsPlaceholderShown( ! isEntityAvailable );
-	}, [ isEntityAvailable ] );
-
 	const [ showCantEditNotice, hideCantEditNotice ] = useNavigationNotice( {
 		name: 'block-library/core/navigation/permissions/update',
 		message: __(
@@ -385,7 +501,26 @@ function Navigation( {
 		ref,
 	] );
 
-	const startWithEmptyMenu = useCallback( () => {
+	const handleSelectNavigation = useCallback(
+		( navPostOrClassicMenu ) => {
+			if ( ! navPostOrClassicMenu ) {
+				return;
+			}
+
+			const isClassicMenu = navPostOrClassicMenu.hasOwnProperty(
+				'auto_add'
+			);
+
+			if ( isClassicMenu ) {
+				convert( navPostOrClassicMenu.id, navPostOrClassicMenu.name );
+			} else {
+				handleUpdateMenu( navPostOrClassicMenu.id );
+			}
+		},
+		[ convert, handleUpdateMenu ]
+	);
+
+	const resetToEmptyBlock = useCallback( () => {
 		registry.batch( () => {
 			if ( navigationArea ) {
 				setAreaMenu( 0 );
@@ -396,7 +531,6 @@ function Navigation( {
 			if ( ! ref ) {
 				replaceInnerBlocks( clientId, [] );
 			}
-			setIsPlaceholderShown( true );
 		} );
 	}, [ clientId, ref ] );
 
@@ -408,7 +542,7 @@ function Navigation( {
 	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
 	if ( hasUnsavedBlocks ) {
 		return (
-			<nav { ...blockProps }>
+			<TagName { ...blockProps }>
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
@@ -435,7 +569,7 @@ function Navigation( {
 						} }
 					/>
 				</ResponsiveWrapper>
-			</nav>
+			</TagName>
 		);
 	}
 
@@ -448,7 +582,7 @@ function Navigation( {
 					{ __(
 						'Navigation menu has been deleted or is unavailable. '
 					) }
-					<Button onClick={ startWithEmptyMenu } variant="link">
+					<Button onClick={ resetToEmptyBlock } variant="link">
 						{ __( 'Create a new menu?' ) }
 					</Button>
 				</Warning>
@@ -477,31 +611,39 @@ function Navigation( {
 		{ open: overlayMenuPreview }
 	);
 
+	if ( isPlaceholder ) {
+		return (
+			<TagName { ...blockProps }>
+				<PlaceholderComponent
+					isSelected={ isSelected }
+					currentMenuId={ ref }
+					clientId={ clientId }
+					canUserCreateNavigationMenu={ canUserCreateNavigationMenu }
+					isResolvingCanUserCreateNavigationMenu={
+						isResolvingCanUserCreateNavigationMenu
+					}
+					onFinish={ handleSelectNavigation }
+					onCreateEmpty={ () => createNavigationMenu( '', [] ) }
+				/>
+			</TagName>
+		);
+	}
+
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider>
 				<BlockControls>
 					{ ! isDraftNavigationMenu && isEntityAvailable && (
-						<ToolbarGroup>
-							<ToolbarDropdownMenu
-								label={ __( 'Select Menu' ) }
-								text={ __( 'Select Menu' ) }
-								icon={ null }
-							>
-								{ ( { onClose } ) => (
-									<NavigationMenuSelector
-										clientId={ clientId }
-										onSelect={ ( { id } ) => {
-											setRef( id );
-											onClose();
-										} }
-										onCreateNew={ startWithEmptyMenu }
-										/* translators: %s: The name of a menu. */
-										actionLabel={ __( "Switch to '%s'" ) }
-										showManageActions
-									/>
-								) }
-							</ToolbarDropdownMenu>
+						<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
+							<NavigationMenuSelector
+								currentMenuId={ ref }
+								clientId={ clientId }
+								onSelect={ handleSelectNavigation }
+								onCreateNew={ resetToEmptyBlock }
+								/* translators: %s: The name of a menu. */
+								actionLabel={ __( "Switch to '%s'" ) }
+								showManageActions
+							/>
 						</ToolbarGroup>
 					) }
 					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
@@ -652,36 +794,20 @@ function Navigation( {
 						{ hasResolvedCanUserDeleteNavigationMenu &&
 							canUserDeleteNavigationMenu && (
 								<NavigationMenuDeleteControl
-									onDelete={ startWithEmptyMenu }
+									onDelete={ resetToEmptyBlock }
 								/>
 							) }
 					</InspectorControls>
 				) }
-				<nav { ...blockProps }>
-					{ isPlaceholderShown && (
-						<PlaceholderComponent
-							onFinish={ ( post ) => {
-								setIsPlaceholderShown( false );
-								if ( post ) {
-									setRef( post.id );
-								}
-								selectBlock( clientId );
-							} }
-							canSwitchNavigationMenu={ canSwitchNavigationMenu }
-							hasResolvedNavigationMenus={
-								hasResolvedNavigationMenus
-							}
-							clientId={ clientId }
-							canUserCreateNavigationMenu={
-								canUserCreateNavigationMenu
-							}
-						/>
-					) }
-					{ ! hasResolvedCanUserCreateNavigationMenu ||
-						( ! isEntityAvailable && ! isPlaceholderShown && (
-							<PlaceholderPreview isLoading />
-						) ) }
-					{ ! isPlaceholderShown && (
+
+				{ isLoading && (
+					<TagName { ...blockProps }>
+						<Spinner className="wp-block-navigation__loading-indicator" />
+					</TagName>
+				) }
+
+				{ ! isLoading && (
+					<TagName { ...blockProps }>
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
@@ -695,7 +821,6 @@ function Navigation( {
 						>
 							{ isEntityAvailable && (
 								<NavigationInnerBlocks
-									isVisible={ ! isPlaceholderShown }
 									clientId={ clientId }
 									hasCustomPlaceholder={
 										!! CustomPlaceholder
@@ -704,8 +829,8 @@ function Navigation( {
 								/>
 							) }
 						</ResponsiveWrapper>
-					) }
-				</nav>
+					</TagName>
+				) }
 			</RecursionProvider>
 		</EntityProvider>
 	);

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,25 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { MenuGroup, MenuItem } from '@wordpress/components';
+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';
 
 export default function NavigationMenuSelector( {
-	clientId,
+	currentMenuId,
 	onSelect,
 	onCreateNew,
 	showManageActions = false,
 	actionLabel,
+	toggleProps = {},
 } ) {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
@@ -35,26 +40,36 @@ export default function NavigationMenuSelector( {
 		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 ( ! canUserCreateNavigationMenu ) {
-			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 );
-	};
-
-	const convertClassicMenuToBlocks = useConvertClassicMenu(
-		onFinishMenuCreation
-	);
+	}, [ navigationMenus ] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
@@ -62,75 +77,78 @@ export default function NavigationMenuSelector( {
 	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 =
-		( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
-		( hasNavigationMenus || hasClassicMenus );
+		( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
+			( hasNavigationMenus || hasClassicMenus ) ) ||
+		( hasManagePermissions && showManageActions );
 
 	if ( ! showSelectMenus ) {
 		return null;
 	}
 
 	return (
-		<>
-			{ showNavigationMenus && hasNavigationMenus && (
-				<MenuGroup label={ __( 'Menus' ) }>
-					{ navigationMenus.map( ( menu ) => {
-						const label = decodeEntities( menu.title.rendered );
-						return (
-							<MenuItem
-								onClick={ () => {
-									onSelect( 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 (
+		<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>
+					) }
+
+					{ showManageActions && hasManagePermissions && (
+						<MenuGroup label={ __( 'Tools' ) }>
+							{ canUserCreateNavigationMenu && (
+								<MenuItem onClick={ onCreateNew }>
+									{ __( 'Create new menu' ) }
+								</MenuItem>
+							) }
 							<MenuItem
-								onClick={ () => {
-									convertClassicMenuToBlocks(
-										menu.id,
-										menu.name
-									);
-								} }
-								key={ menu.id }
-								aria-label={ sprintf(
-									createActionLabel,
-									label
-								) }
+								href={ addQueryArgs( 'edit.php', {
+									post_type: 'wp_navigation',
+								} ) }
 							>
-								{ label }
+								{ __( 'Manage menus' ) }
 							</MenuItem>
-						);
-					} ) }
-				</MenuGroup>
-			) }
-
-			{ showManageActions && hasManagePermissions && (
-				<MenuGroup label={ __( 'Tools' ) }>
-					{ canUserCreateNavigationMenu && (
-						<MenuItem onClick={ onCreateNew }>
-							{ __( 'Create new menu' ) }
-						</MenuItem>
+						</MenuGroup>
 					) }
-					<MenuItem
-						href={ addQueryArgs( 'edit.php', {
-							post_type: 'wp_navigation',
-						} ) }
-					>
-						{ __( 'Manage menus' ) }
-					</MenuItem>
-				</MenuGroup>
+				</>
 			) }
-		</>
+		</ToolbarDropdownMenu>
 	);
 }