@wordpress/block-library 8.5.0 → 8.6.0

package/src/navigation/edit/index.js

@@ -12,7 +12,6 @@ import {
 	useEffect,
 	useRef,
 	Platform,
-	useMemo,
 } from '@wordpress/element';
 import {
 	InspectorControls,
@@ -41,7 +40,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { createBlock, getBlockType } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { close, Icon } from '@wordpress/icons';
 
 /**
@@ -107,16 +106,20 @@ function Navigation( {
 
 	const ref = attributes.ref;
 
-	const setRef = ( postId ) => {
-		setAttributes( { ref: postId } );
-	};
+	const setRef = useCallback(
+		( postId ) => {
+			setAttributes( { ref: postId } );
+		},
+		[ setAttributes ]
+	);
 
 	const recursionId = `navigationMenu/${ ref }`;
 	const hasAlreadyRendered = useHasRecursion( recursionId );
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
-	const { menus: classicMenus } = useNavigationEntities();
+	const { menus: classicMenus, hasResolvedMenus: hasResolvedClassicMenus } =
+		useNavigationEntities();
 
 	const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] =
 		useNavigationNotice( {
@@ -197,52 +200,22 @@ function Navigation( {
 	const isConvertingClassicMenu =
 		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
 
-	// Only autofallback to published menus.
-	const fallbackNavigationMenus = useMemo(
-		() =>
-			navigationMenus
-				?.filter( ( menu ) => menu.status === 'publish' )
-				?.sort( ( menuA, menuB ) => {
-					const menuADate = new Date( menuA.date );
-					const menuBDate = new Date( menuB.date );
-					return menuADate.getTime() < menuBDate.getTime();
-				} ),
-		[ navigationMenus ]
-	);
-
-	// This useEffect adds snackbar and speak status notices when menus are created.
-	// If there are no fallback navigation menus then we don't show these messages,
-	// because this means that we are creating the first, fallback navigation menu.
-	useEffect( () => {
-		hideNavigationMenuStatusNotice();
-
-		if ( fallbackNavigationMenus && isCreatingNavigationMenu ) {
-			speak( __( `Creating Navigation Menu.` ) );
-		}
-
-		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
-				focusNavigationBlock: true,
-			} );
+	// Only auto-fallback to the latest published menu.
+	// The REST API already returns items sorted by publishing date.
+	const fallbackNavigationMenuId = navigationMenus?.find(
+		( menu ) => menu.status === 'publish'
+	)?.id;
 
-			if ( fallbackNavigationMenus ) {
-				showNavigationMenuStatusNotice(
-					__( `Navigation Menu successfully created.` )
-				);
+	const handleUpdateMenu = useCallback(
+		( menuId, options = { focusNavigationBlock: false } ) => {
+			const { focusNavigationBlock } = options;
+			setRef( menuId );
+			if ( focusNavigationBlock ) {
+				selectBlock( clientId );
 			}
-		}
-
-		if ( createNavigationMenuIsError ) {
-			showNavigationMenuStatusNotice(
-				__( 'Failed to create Navigation Menu.' )
-			);
-		}
-	}, [
-		createNavigationMenuStatus,
-		createNavigationMenuError,
-		createNavigationMenuPost,
-		fallbackNavigationMenus,
-	] );
+		},
+		[ selectBlock, clientId, setRef ]
+	);
 
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
 	// - the are uncontrolled inner blocks already present in the block.
@@ -256,7 +229,7 @@ function Navigation( {
 			hasUncontrolledInnerBlocks ||
 			isCreatingNavigationMenu ||
 			ref ||
-			! fallbackNavigationMenus?.length
+			! fallbackNavigationMenuId
 		) {
 			return;
 		}
@@ -269,12 +242,14 @@ function Navigation( {
 		 *  nor to be undoable, hence why it is marked as non persistent
 		 */
 		__unstableMarkNextChangeAsNotPersistent();
-		setRef( fallbackNavigationMenus[ 0 ].id );
+		setRef( fallbackNavigationMenuId );
 	}, [
 		ref,
+		setRef,
 		isCreatingNavigationMenu,
-		fallbackNavigationMenus,
+		fallbackNavigationMenuId,
 		hasUncontrolledInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
 	const isEntityAvailable =
@@ -291,10 +266,12 @@ function Navigation( {
 	useEffect( () => {
 		if (
 			ref ||
+			! hasResolvedClassicMenus ||
 			! hasResolvedNavigationMenus ||
 			isConvertingClassicMenu ||
-			fallbackNavigationMenus?.length > 0 ||
-			hasUnsavedBlocks
+			fallbackNavigationMenuId ||
+			hasUnsavedBlocks ||
+			! classicMenus?.length
 		) {
 			return;
 		}
@@ -303,46 +280,39 @@ function Navigation( {
 		// a classic menu with a `primary` location or slug,
 		// then create a new navigation menu based on it.
 		// Otherwise, use the most recently created classic menu.
-		if ( classicMenus?.length ) {
-			const primaryMenus = classicMenus.filter(
-				( classicMenu ) =>
-					classicMenu.locations.includes( 'primary' ) ||
-					classicMenu.slug === 'primary'
-			);
+		const primaryMenus = classicMenus.filter(
+			( classicMenu ) =>
+				classicMenu.locations.includes( 'primary' ) ||
+				classicMenu.slug === 'primary'
+		);
 
-			if ( primaryMenus.length ) {
-				convertClassicMenu(
-					primaryMenus[ 0 ].id,
-					primaryMenus[ 0 ].name,
-					'publish'
-				);
-			} else {
-				classicMenus.sort( ( a, b ) => {
-					return b.id - a.id;
-				} );
-				convertClassicMenu(
-					classicMenus[ 0 ].id,
-					classicMenus[ 0 ].name,
-					'publish'
-				);
-			}
+		if ( primaryMenus.length ) {
+			convertClassicMenu(
+				primaryMenus[ 0 ].id,
+				primaryMenus[ 0 ].name,
+				'publish'
+			);
 		} else {
-			// If there are no fallback navigation menus and no classic menus,
-			// then create a new navigation menu.
-
-			// Check that we have a page-list block type.
-			let defaultBlocks = [];
-			if ( getBlockType( 'core/page-list' ) ) {
-				defaultBlocks = [ createBlock( 'core/page-list' ) ];
-			}
-
-			createNavigationMenu(
-				'Navigation', // TODO - use the template slug in future
-				defaultBlocks,
+			classicMenus.sort( ( a, b ) => {
+				return b.id - a.id;
+			} );
+			convertClassicMenu(
+				classicMenus[ 0 ].id,
+				classicMenus[ 0 ].name,
 				'publish'
 			);
 		}
-	}, [ hasResolvedNavigationMenus, hasUnsavedBlocks ] );
+	}, [
+		hasResolvedClassicMenus,
+		hasResolvedNavigationMenus,
+		hasUnsavedBlocks,
+		classicMenus,
+		convertClassicMenu,
+		createNavigationMenu,
+		fallbackNavigationMenuId,
+		isConvertingClassicMenu,
+		ref,
+	] );
 
 	const navRef = useRef();
 
@@ -362,6 +332,25 @@ function Navigation( {
 		classicMenus?.length === 0 &&
 		! hasUncontrolledInnerBlocks;
 
+	useEffect( () => {
+		if ( isPlaceholder ) {
+			/**
+			 *  this fallback only displays (both in editor and on front)
+			 *  the list of pages block if no menu is available as a fallback.
+			 *  We don't want the fallback to request a save,
+			 *  nor to be undoable, hence we mark it non persistent.
+			 */
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
+		}
+	}, [
+		clientId,
+		isPlaceholder,
+		ref,
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceInnerBlocks,
+	] );
+
 	// "loading" state:
 	// - there is a menu creation process in progress.
 	// - there is a classic menu conversion process in progress.
@@ -413,17 +402,6 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
-	const handleUpdateMenu = useCallback(
-		( menuId, options = { focusNavigationBlock: false } ) => {
-			const { focusNavigationBlock } = options;
-			setRef( menuId );
-			if ( focusNavigationBlock ) {
-				selectBlock( clientId );
-			}
-		},
-		[ selectBlock, clientId ]
-	);
-
 	const onSelectClassicMenu = async ( classicMenu ) => {
 		const navMenu = await convertClassicMenu(
 			classicMenu.id,
@@ -449,7 +427,7 @@ function Navigation( {
 		}
 
 		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
+			handleUpdateMenu( createNavigationMenuPost?.id, {
 				focusNavigationBlock: true,
 			} );
 
@@ -466,7 +444,7 @@ function Navigation( {
 	}, [
 		createNavigationMenuStatus,
 		createNavigationMenuError,
-		createNavigationMenuPost,
+		createNavigationMenuPost?.id,
 		createNavigationMenuIsError,
 		createNavigationMenuIsSuccess,
 		isCreatingNavigationMenu,
@@ -492,7 +470,12 @@ function Navigation( {
 				__( 'Classic menu import failed.' )
 			);
 		}
-	}, [ classicMenuConversionStatus, classicMenuConversionError ] );
+	}, [
+		classicMenuConversionStatus,
+		classicMenuConversionError,
+		hideClassicMenuConversionNotice,
+		showClassicMenuConversionNotice,
+	] );
 
 	// Spacer block needs orientation from context. This is a patch until
 	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
@@ -501,7 +484,11 @@ function Navigation( {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { orientation } );
 		}
-	}, [ orientation ] );
+	}, [
+		orientation,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+	] );
 
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
@@ -531,7 +518,11 @@ function Navigation( {
 				setDetectedOverlayBackgroundColor
 			);
 		}
-	} );
+	}, [
+		enableContrastChecking,
+		overlayTextColor.color,
+		overlayBackgroundColor.color,
+	] );
 
 	useEffect( () => {
 		if ( ! isSelected && ! isInnerBlockSelected ) {
@@ -572,6 +563,9 @@ function Navigation( {
 		canUserCreateNavigationMenu,
 		hasResolvedCanUserCreateNavigationMenu,
 		ref,
+		hideNavigationMenuPermissionsNotice,
+		showNavigationMenuPermissionsNotice,
+		navMenuResolvedButMissing,
 	] );
 
 	const hasManagePermissions =
@@ -791,6 +785,7 @@ function Navigation( {
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
+					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
@@ -898,7 +893,9 @@ function Navigation( {
 
 				{ isLoading && (
 					<TagName { ...blockProps }>
-						<Spinner className="wp-block-navigation__loading-indicator" />
+						<div className="wp-block-navigation__loading-indicator-container">
+							<Spinner className="wp-block-navigation__loading-indicator" />
+						</div>
 					</TagName>
 				) }
 

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

@@ -29,6 +29,9 @@ const ALLOWED_BLOCKS = [
 
 const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
+	attributes: {
+		type: 'page',
+	},
 };
 
 export default function NavigationInnerBlocks( {

package/src/navigation/edit/menu-inspector-controls.js

@@ -45,10 +45,6 @@ const MainContent = ( {
 	);
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
-	if ( currentMenuId && isNavigationMenuMissing ) {
-		return <p>{ __( 'Select or create a menu' ) }</p>;
-	}
-
 	if ( currentMenuId && isNavigationMenuMissing ) {
 		return <DeletedNavigationWarning onCreateNew={ onCreateNew } />;
 	}
@@ -69,6 +65,7 @@ const MainContent = ( {
 	return (
 		<OffCanvasEditor
 			blocks={ clientIdsTree }
+			parentClientId={ clientId }
 			isExpanded={ true }
 			LeafMoreMenu={ LeafMoreMenu }
 			description={ description }
@@ -89,9 +86,7 @@ const MenuInspectorControls = ( props ) => {
 
 	return (
 		<InspectorControls group="list">
-			<PanelBody
-				title={ process.env.IS_GUTENBERG_PLUGIN ? null : __( 'Menu' ) }
-			>
+			<PanelBody title={ null }>
 				<HStack className="wp-block-navigation-off-canvas-editor__header">
 					<Heading
 						className="wp-block-navigation-off-canvas-editor__title"

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

@@ -11,6 +11,7 @@ import { moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -18,6 +19,14 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
+function buildMenuLabel( title, id ) {
+	const label =
+		decodeEntities( title?.rendered ) ||
+		/* translators: %s is the index of the menu in the list of menus. */
+		sprintf( __( '(no title %s)' ), id );
+	return label;
+}
+
 function NavigationMenuSelector( {
 	currentMenuId,
 	onSelectNavigationMenu,
@@ -30,7 +39,6 @@ function NavigationMenuSelector( {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
-	const [ selectorLabel, setSelectorLabel ] = useState( '' );
 	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
 
 	actionLabel = actionLabel || createActionLabel;
@@ -39,25 +47,23 @@ function NavigationMenuSelector( {
 
 	const {
 		navigationMenus,
+		isResolvingNavigationMenus,
 		hasResolvedNavigationMenus,
 		canUserCreateNavigationMenu,
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
+	const [ currentTitle ] = useEntityProp(
+		'postType',
+		'wp_navigation',
+		'title'
+	);
+
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title }, index ) => {
-				const label =
-					decodeEntities( title?.rendered ) ||
-					/* translators: %s is the index of the menu in the list of menus. */
-					sprintf( __( '(no title %s)' ), index + 1 );
-
-				if ( id === currentMenuId && ! isCreatingMenu ) {
-					setSelectorLabel(
-						/* translators: %s is the name of a navigation menu. */
-						sprintf( __( 'You are currently editing %s' ), label )
-					);
-				}
+				const label = buildMenuLabel( title, index + 1 );
+
 				return {
 					value: id,
 					label,
@@ -65,7 +71,7 @@ function NavigationMenuSelector( {
 				};
 			} ) || []
 		);
-	}, [ currentMenuId, navigationMenus, actionLabel, isCreatingMenu ] );
+	}, [ navigationMenus, actionLabel ] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
@@ -77,20 +83,35 @@ function NavigationMenuSelector( {
 	const menuUnavailable =
 		hasResolvedNavigationMenus && currentMenuId === null;
 
-	useEffect( () => {
-		if ( ! hasResolvedNavigationMenus && ! canUserCreateNavigationMenu ) {
-			setSelectorLabel( __( 'Loading …' ) );
-		} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
-			setSelectorLabel( __( 'Choose or create a Navigation menu' ) );
-		}
+	let selectorLabel = '';
+
+	if ( isCreatingMenu || isResolvingNavigationMenus ) {
+		selectorLabel = __( 'Loading …' );
+	} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
+		// Note: classic Menus may be available.
+		selectorLabel = __( 'Choose or create a Navigation menu' );
+	} else {
+		// Current Menu's title.
+		selectorLabel = currentTitle;
+	}
 
+	useEffect( () => {
 		if (
 			isCreatingMenu &&
 			( createNavigationMenuIsSuccess || createNavigationMenuIsError )
 		) {
 			setIsCreatingMenu( false );
 		}
-	}, [ hasResolvedNavigationMenus, createNavigationMenuIsSuccess ] );
+	}, [
+		hasResolvedNavigationMenus,
+		createNavigationMenuIsSuccess,
+		canUserCreateNavigationMenu,
+		createNavigationMenuIsError,
+		isCreatingMenu,
+		menuUnavailable,
+		noBlockMenus,
+		noMenuSelected,
+	] );
 
 	const NavigationMenuSelectorDropdown = (
 		<DropdownMenu
@@ -105,7 +126,6 @@ function NavigationMenuSelector( {
 							<MenuItemsChoice
 								value={ currentMenuId }
 								onSelect={ ( menuId ) => {
-									setSelectorLabel( __( 'Loading …' ) );
 									setIsCreatingMenu( true );
 									onSelectNavigationMenu( menuId );
 									onClose();
@@ -122,9 +142,6 @@ function NavigationMenuSelector( {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setSelectorLabel(
-												__( 'Loading …' )
-											);
 											setIsCreatingMenu( true );
 											onSelectClassicMenu( menu );
 											onClose();
@@ -151,7 +168,6 @@ function NavigationMenuSelector( {
 									onClose();
 									onCreateNew();
 									setIsCreatingMenu( true );
-									setSelectorLabel( __( 'Loading …' ) );
 								} }
 							>
 								{ __( 'Create new menu' ) }

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

@@ -120,40 +120,53 @@ export default function UnsavedInnerBlocks( {
 	const { hasResolvedNavigationMenus } = useNavigationMenu();
 
 	// Automatically save the uncontrolled blocks.
-	useEffect( () => {
-		// The block will be disabled when used in a BlockPreview.
-		// In this case avoid automatic creation of a wp_navigation post.
-		// Otherwise the user will be spammed with lots of menus!
-		//
-		// Also ensure other navigation menus have loaded so an
-		// accurate name can be created.
-		//
-		// Don't try saving when another save is already
-		// in progress.
-		//
-		// And finally only create the menu when the block is selected,
-		// which is an indication they want to start editing.
-		if (
-			isDisabled ||
-			isSaving ||
-			! hasResolvedDraftNavigationMenus ||
-			! hasResolvedNavigationMenus ||
-			! hasSelection ||
-			! innerBlocksAreDirty
-		) {
-			return;
-		}
+	useEffect(
+		() => {
+			// The block will be disabled when used in a BlockPreview.
+			// In this case avoid automatic creation of a wp_navigation post.
+			// Otherwise the user will be spammed with lots of menus!
+			//
+			// Also ensure other navigation menus have loaded so an
+			// accurate name can be created.
+			//
+			// Don't try saving when another save is already
+			// in progress.
+			//
+			// And finally only create the menu when the block is selected,
+			// which is an indication they want to start editing.
+			if (
+				isDisabled ||
+				isSaving ||
+				! hasResolvedDraftNavigationMenus ||
+				! hasResolvedNavigationMenus ||
+				! hasSelection ||
+				! innerBlocksAreDirty
+			) {
+				return;
+			}
 
-		createNavigationMenu( null, blocks );
-	}, [
-		createNavigationMenu,
-		isDisabled,
-		isSaving,
-		hasResolvedDraftNavigationMenus,
-		hasResolvedNavigationMenus,
-		innerBlocksAreDirty,
-		hasSelection,
-	] );
+			createNavigationMenu( null, blocks );
+		},
+		/* The dependency "blocks" is intentionally omitted here.
+		 * This is because making blocks a dependency would cause
+		 * createNavigationMenu to run on every block change whereas
+		 * we only want it to run when the blocks are first detected
+		 * as dirty.
+		 * A better solution might be to add a hard saving lock using
+		 * a ref to avoid having to disbale theses eslint rules.
+		 */
+		/* eslint-disable react-hooks/exhaustive-deps */
+		[
+			createNavigationMenu,
+			isDisabled,
+			isSaving,
+			hasResolvedDraftNavigationMenus,
+			hasResolvedNavigationMenus,
+			innerBlocksAreDirty,
+			hasSelection,
+		]
+		/* eslint-enable react-hooks/exhaustive-deps */
+	);
 
 	const Wrapper = isSaving ? Disabled : 'div';