@wordpress/block-library 8.4.0 → 8.6.0

package/src/navigation/edit/index.js

@@ -7,11 +7,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
+	useCallback,
 	useState,
 	useEffect,
 	useRef,
 	Platform,
-	useMemo,
 } from '@wordpress/element';
 import {
 	InspectorControls,
@@ -106,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( {
@@ -148,34 +152,6 @@ function Navigation( {
 		createNavigationMenu( '' );
 	};
 
-	useEffect( () => {
-		hideNavigationMenuStatusNotice();
-
-		if ( isCreatingNavigationMenu ) {
-			speak( __( `Creating Navigation Menu.` ) );
-		}
-
-		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
-				focusNavigationBlock: true,
-			} );
-
-			showNavigationMenuStatusNotice(
-				__( `Navigation Menu successfully created.` )
-			);
-		}
-
-		if ( createNavigationMenuIsError ) {
-			showNavigationMenuStatusNotice(
-				__( 'Failed to create Navigation Menu.' )
-			);
-		}
-	}, [
-		createNavigationMenuStatus,
-		createNavigationMenuError,
-		createNavigationMenuPost,
-	] );
-
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
@@ -224,17 +200,21 @@ 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 ]
+	// 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;
+
+	const handleUpdateMenu = useCallback(
+		( menuId, options = { focusNavigationBlock: false } ) => {
+			const { focusNavigationBlock } = options;
+			setRef( menuId );
+			if ( focusNavigationBlock ) {
+				selectBlock( clientId );
+			}
+		},
+		[ selectBlock, clientId, setRef ]
 	);
 
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
@@ -249,7 +229,7 @@ function Navigation( {
 			hasUncontrolledInnerBlocks ||
 			isCreatingNavigationMenu ||
 			ref ||
-			! fallbackNavigationMenus?.length
+			! fallbackNavigationMenuId
 		) {
 			return;
 		}
@@ -262,19 +242,35 @@ 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 =
+		! isNavigationMenuMissing && isNavigationMenuResolved;
+
+	// If the block has inner blocks, but no menu id, then these blocks are either:
+	// - inserted via a pattern.
+	// - inserted directly via Code View (or otherwise).
+	// - from an older version of navigation block added before the block used a wp_navigation entity.
+	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
+	// that automatically saves the menu as an entity when changes are made to the inner blocks.
+	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
+
 	useEffect( () => {
 		if (
+			ref ||
+			! hasResolvedClassicMenus ||
 			! hasResolvedNavigationMenus ||
 			isConvertingClassicMenu ||
-			fallbackNavigationMenus?.length > 0 ||
+			fallbackNavigationMenuId ||
+			hasUnsavedBlocks ||
 			! classicMenus?.length
 		) {
 			return;
@@ -306,7 +302,17 @@ function Navigation( {
 				'publish'
 			);
 		}
-	}, [ hasResolvedNavigationMenus ] );
+	}, [
+		hasResolvedClassicMenus,
+		hasResolvedNavigationMenus,
+		hasUnsavedBlocks,
+		classicMenus,
+		convertClassicMenu,
+		createNavigationMenu,
+		fallbackNavigationMenuId,
+		isConvertingClassicMenu,
+		ref,
+	] );
 
 	const navRef = useRef();
 
@@ -337,10 +343,13 @@ function Navigation( {
 			__unstableMarkNextChangeAsNotPersistent();
 			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
 		}
-	}, [ clientId, isPlaceholder, ref ] );
-
-	const isEntityAvailable =
-		! isNavigationMenuMissing && isNavigationMenuResolved;
+	}, [
+		clientId,
+		isPlaceholder,
+		ref,
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceInnerBlocks,
+	] );
 
 	// "loading" state:
 	// - there is a menu creation process in progress.
@@ -393,17 +402,6 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
-	const handleUpdateMenu = (
-		menuId,
-		options = { focusNavigationBlock: false }
-	) => {
-		const { focusNavigationBlock } = options;
-		setRef( menuId );
-		if ( focusNavigationBlock ) {
-			selectBlock( clientId );
-		}
-	};
-
 	const onSelectClassicMenu = async ( classicMenu ) => {
 		const navMenu = await convertClassicMenu(
 			classicMenu.id,
@@ -421,6 +419,40 @@ function Navigation( {
 		handleUpdateMenu( menuId );
 	};
 
+	useEffect( () => {
+		hideNavigationMenuStatusNotice();
+
+		if ( isCreatingNavigationMenu ) {
+			speak( __( `Creating Navigation Menu.` ) );
+		}
+
+		if ( createNavigationMenuIsSuccess ) {
+			handleUpdateMenu( createNavigationMenuPost?.id, {
+				focusNavigationBlock: true,
+			} );
+
+			showNavigationMenuStatusNotice(
+				__( `Navigation Menu successfully created.` )
+			);
+		}
+
+		if ( createNavigationMenuIsError ) {
+			showNavigationMenuStatusNotice(
+				__( 'Failed to create Navigation Menu.' )
+			);
+		}
+	}, [
+		createNavigationMenuStatus,
+		createNavigationMenuError,
+		createNavigationMenuPost?.id,
+		createNavigationMenuIsError,
+		createNavigationMenuIsSuccess,
+		isCreatingNavigationMenu,
+		handleUpdateMenu,
+		hideNavigationMenuStatusNotice,
+		showNavigationMenuStatusNotice,
+	] );
+
 	useEffect( () => {
 		hideClassicMenuConversionNotice();
 		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING ) {
@@ -438,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.
@@ -447,7 +484,11 @@ function Navigation( {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { orientation } );
 		}
-	}, [ orientation ] );
+	}, [
+		orientation,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+	] );
 
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
@@ -477,7 +518,11 @@ function Navigation( {
 				setDetectedOverlayBackgroundColor
 			);
 		}
-	} );
+	}, [
+		enableContrastChecking,
+		overlayTextColor.color,
+		overlayBackgroundColor.color,
+	] );
 
 	useEffect( () => {
 		if ( ! isSelected && ! isInnerBlockSelected ) {
@@ -518,6 +563,9 @@ function Navigation( {
 		canUserCreateNavigationMenu,
 		hasResolvedCanUserCreateNavigationMenu,
 		ref,
+		hideNavigationMenuPermissionsNotice,
+		showNavigationMenuPermissionsNotice,
+		navMenuResolvedButMissing,
 	] );
 
 	const hasManagePermissions =
@@ -598,6 +646,7 @@ function Navigation( {
 							<>
 								<h3>{ __( 'Submenus' ) }</h3>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ openSubmenusOnClick }
 									onChange={ ( value ) => {
 										setAttributes( {
@@ -611,6 +660,7 @@ function Navigation( {
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ showSubmenuIcon }
 									onChange={ ( value ) => {
 										setAttributes( {
@@ -682,14 +732,6 @@ function Navigation( {
 		</>
 	);
 
-	// If the block has inner blocks, but no menu id, then these blocks are either:
-	// - inserted via a pattern.
-	// - inserted directly via Code View (or otherwise).
-	// - from an older version of navigation block added before the block used a wp_navigation entity.
-	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
-	// that automatically saves the menu as an entity when changes are made to the inner blocks.
-	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
-
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 
@@ -743,6 +785,7 @@ function Navigation( {
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
+					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
@@ -850,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 ] );
+	}, [ 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/overlay-menu-preview.js

@@ -17,6 +17,7 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Show icon button' ) }
 				help={ __(
 					'Configure the visual appearance of the button opening the overlay menu.'

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

@@ -38,7 +38,7 @@ export default function NavigationPlaceholder( {
 		if ( hasResolvedMenus ) {
 			speak( __( 'Navigation block setup options ready.' ) );
 		}
-	}, [ isResolvingMenus, isSelected ] );
+	}, [ hasResolvedMenus, isResolvingMenus, isSelected ] );
 
 	const isResolvingActions =
 		isResolvingMenus && isResolvingCanUserCreateNavigationMenu;

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

@@ -120,39 +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 );
-	}, [
-		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';