@wordpress/block-library 8.5.0 → 8.7.0

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';
 

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

@@ -36,89 +36,88 @@ function useConvertClassicToBlockMenu( clientId ) {
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
 	const [ error, setError ] = useState( null );
 
-	async function convertClassicMenuToBlockMenu(
-		menuId,
-		menuName,
-		postStatus = 'publish'
-	) {
-		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,
-				postStatus
-			);
-
-			/**
-			 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
-			 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
-			 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
-			 * without user interaction.
-			 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
-			 */
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu.id,
-				{
-					status: postStatus,
-				},
-				{ throwOnError: true }
-			);
-		} 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 convertClassicMenuToBlockMenu = useCallback(
+		async ( menuId, menuName, postStatus = 'publish' ) => {
+			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,
+					postStatus
+				);
+
+				/**
+				 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
+				 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
+				 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
+				 * without user interaction.
+				 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
+				 */
+				await editEntityRecord(
+					'postType',
+					'wp_navigation',
+					navigationMenu.id,
+					{
+						status: postStatus,
+					},
+					{ throwOnError: true }
+				);
+			} 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;
+		},
+		[ createNavigationMenu, editEntityRecord, registry ]
+	);
 
 	const convert = useCallback(
 		async ( menuId, menuName, postStatus ) => {

package/src/navigation/edit/use-create-navigation-menu.js

@@ -90,7 +90,7 @@ export default function useCreateNavigationMenu( clientId ) {
 					} );
 				} );
 		},
-		[ serialize, saveEntityRecord, editEntityRecord, generateDefaultTitle ]
+		[ saveEntityRecord, editEntityRecord, generateDefaultTitle ]
 	);
 
 	return {

package/src/navigation/edit/use-navigation-notice.js

@@ -23,7 +23,7 @@ function useNavigationNotice( { name, message = '' } = {} ) {
 				type: 'snackbar',
 			} );
 		},
-		[ noticeRef, createWarningNotice ]
+		[ noticeRef, createWarningNotice, message, name ]
 	);
 
 	const hideNotice = useCallback( () => {

package/src/navigation/editor.scss

@@ -39,8 +39,7 @@
 }
 
 // Only show the flyout on hover if the parent menu item is selected.
-.wp-block-navigation:not(.is-selected):not(.has-child-selected)
-.has-child:hover {
+.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
 	> .wp-block-navigation__submenu-container {
 		opacity: 0;
 		visibility: hidden;
@@ -49,6 +48,7 @@
 
 // Styles for submenu flyout.
 .has-child {
+
 	&.is-selected,
 	&.has-child-selected {
 		> .wp-block-navigation__submenu-container {
@@ -76,8 +76,7 @@
 	flex-direction: column;
 }
 
-.is-dragging-components-draggable
-.wp-block-navigation-link > .wp-block-navigation__container {
+.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
 	// Set opacity to 1 to still be able to show the draggable chip.
 	opacity: 1;
 	visibility: hidden;
@@ -117,6 +116,7 @@
  */
 
 $colors-selector-size: 22px;
+
 .block-library-colors-selector {
 	width: auto;
 
@@ -151,7 +151,7 @@ $colors-selector-size: 22px;
 		min-width: $colors-selector-size;
 		height: $colors-selector-size;
 		min-height: $colors-selector-size;
-		line-height: ( $colors-selector-size - 2 );
+		line-height: ($colors-selector-size - 2);
 		padding: 2px;
 
 		> svg {
@@ -161,6 +161,7 @@ $colors-selector-size: 22px;
 
 		// Styling icon color.
 		&.has-text-color {
+
 			> svg,
 			> svg path {
 				color: inherit;
@@ -171,6 +172,7 @@ $colors-selector-size: 22px;
 
 // Colors Selector Popover.
 $color-control-label-height: 20px;
+
 .block-library-colors-selector__popover {
 	.color-palette-controller-container {
 		padding: 16px;
@@ -222,13 +224,16 @@ $color-control-label-height: 20px;
 	0% {
 		opacity: 1;
 	}
+
 	50% {
 		opacity: 0.5;
 	}
+
 	100% {
 		opacity: 1;
 	}
 }
+
 // Unstyle some inherited placeholder component styles.
 .components-placeholder.wp-block-navigation-placeholder {
 	outline: none;
@@ -271,6 +276,7 @@ $color-control-label-height: 20px;
 	// against any background color.
 	color: currentColor;
 	background: transparent;
+
 	&::before {
 		content: "";
 		display: block;
@@ -338,6 +344,7 @@ $color-control-label-height: 20px;
 	// Hide the navigation indicator when in small contexts.
 	.is-small &,
 	.is-medium & {
+
 		.wp-block-navigation-placeholder__actions__indicator,
 		.wp-block-navigation-placeholder__actions__indicator + hr {
 			display: none;
@@ -427,15 +434,14 @@ $color-control-label-height: 20px;
 		}
 	}
 }
+
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
 .wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
-	top:
-		$admin-bar-height-big + $header-height + $block-toolbar-height +
-		$border-width;
+	top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 	@include break-medium() {
 		top: $admin-bar-height + $header-height + $border-width;
@@ -445,6 +451,7 @@ $color-control-label-height: 20px;
 	@include break-medium() {
 		left: $admin-sidebar-width-collapsed;
 	}
+
 	@include break-large() {
 		left: $admin-sidebar-width;
 	}
@@ -452,17 +459,13 @@ $color-control-label-height: 20px;
 
 .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 	@include break-medium() {
-		top:
-			$admin-bar-height + $header-height + $block-toolbar-height +
-			$border-width;
+		top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 	}
 }
 
 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
-	top:
-		$admin-bar-height + $header-height + $block-toolbar-height +
-		$border-width;
+	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 }
 
 .is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
@@ -473,9 +476,7 @@ $color-control-label-height: 20px;
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
-		top:
-			$admin-bar-height-big + $header-height + $block-toolbar-height +
-			$border-width;
+		top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 		@include break-medium() {
 			top: $header-height + $border-width;
@@ -495,8 +496,7 @@ $color-control-label-height: 20px;
 }
 
 // The iframe makes these rules a lot simpler.
-body.editor-styles-wrapper
-.wp-block-navigation__responsive-container.is-menu-open {
+body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;
@@ -536,6 +536,7 @@ body.editor-styles-wrapper
 .components-heading.wp-block-navigation-off-canvas-editor__title {
 	margin: 0;
 }
+
 .wp-block-navigation-off-canvas-editor__header {
 	margin-bottom: $grid-unit-10;
 }
@@ -552,6 +553,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
@@ -559,7 +561,7 @@ body.editor-styles-wrapper
 
 // Space spinner to give it breathing
 // room when block is selected and has focus outline.
-.wp-block-navigation .components-spinner {
+.wp-block-navigation__loading-indicator-container {
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
@@ -571,6 +573,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 1;
 	}
+
 	100% {
 		opacity: 0.5;
 	}