Navigation Screen: Indicate when a menu is deleted and show the menu switcher afterwards

packages/base-styles/_z-index.scss

@@ -170,6 +170,7 @@ $z-layers: (
 	".components-circular-option-picker__option.is-pressed": 1,
 	// Needs to be higher than .components-circular-option-picker__option.is-pressed.
 	".components-circular-option-picker__option.is-pressed + svg": 2,
+	".edit-navigation-layout__overlay": 999,
 );
 
 @function z-index( $key ) {

packages/edit-navigation/src/components/header/index.js

@@ -17,6 +17,7 @@ import SaveButton from './save-button';
 import MenuSwitcher from '../menu-switcher';
 
 export default function Header( {
+	isMenuSelected,
 	menus,
 	selectedMenuId,
 	onSelectMenu,
@@ -40,19 +41,17 @@ export default function Header( {
 		actionHeaderText = __( 'No menus available' );
 	}
 
-	const hasMenus = !! menus?.length;
-
 	return (
 		<div className="edit-navigation-header">
 			<div className="edit-navigation-header__title-subtitle">
 				<h1 className="edit-navigation-header__title">
 					{ __( 'Navigation' ) }
 				</h1>
 				<h2 className="edit-navigation-header__subtitle">
-					{ hasMenus && actionHeaderText }
+					{ isMenuSelected && actionHeaderText }
 				</h2>
 			</div>
-			{ hasMenus && (
+			{ isMenuSelected && (
 				<div className="edit-navigation-header__actions">
 					<DropdownMenu
 						icon={ null }

packages/edit-navigation/src/components/inspector-additions/delete-menu.js

@@ -4,12 +4,13 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function DeleteMenu( { onDeleteMenu } ) {
+export default function DeleteMenu( { onDeleteMenu, isMenuBeingDeleted } ) {
 	return (
 		<Button
 			className="edit-navigation-inspector-additions__delete-menu-button"
-			isTertiary
+			isSecondary
 			isDestructive
+			isBusy={ isMenuBeingDeleted }
 			onClick={ () => {
 				if (
 					// eslint-disable-next-line no-alert

packages/edit-navigation/src/components/inspector-additions/index.js

@@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 export default function InspectorAdditions( {
 	menuId,
 	menus,
+	isMenuBeingDeleted,
 	onDeleteMenu,
 	onSelectMenu,
 	isManageLocationsModalOpen,
@@ -37,7 +38,10 @@ export default function InspectorAdditions( {
 			<PanelBody title={ __( 'Menu settings' ) }>
 				<NameEditor />
 				<AutoAddPages menuId={ menuId } />
-				<DeleteMenu onDeleteMenu={ onDeleteMenu } />
+				<DeleteMenu
+					onDeleteMenu={ onDeleteMenu }
+					isMenuBeingDeleted={ isMenuBeingDeleted }
+				/>
 			</PanelBody>
 			<PanelBody title={ __( 'Theme locations' ) }>
 				<ManageLocations

packages/edit-navigation/src/components/layout/index.js

@@ -19,7 +19,7 @@ import {
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useMemo, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	InterfaceSkeleton,
 	ComplementaryArea,
@@ -30,7 +30,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import EmptyState from './empty-state';
+import UnselectedMenuState from './unselected-menu-state';
 import {
 	IsMenuNameControlFocusedContext,
 	MenuIdContext,
@@ -72,17 +72,28 @@ export default function Layout( { blockEditorSettings } ) {
 		hasFinishedInitialLoad,
 		selectedMenuId,
 		navigationPost,
+		isMenuBeingDeleted,
 		selectMenu,
 		deleteMenu,
 		openManageLocationsModal,
 		closeManageLocationsModal,
 		isManageLocationsModalOpen,
+		isMenuSelected,
 	} = useNavigationEditor();
 
 	const [ blocks, onInput, onChange ] = useNavigationBlockEditor(
 		navigationPost
 	);
 
+	const [ isMenuLoaded, setIsMenuLoaded ] = useState( false );
+
+	useEffect( () => {
+		if ( ! isMenuLoaded && menus?.length ) {
+			setIsMenuLoaded( true );
+			selectMenu( menus[ 0 ].id );
+		}
+	}, [ menus ] );
+
 	const { hasSidebarEnabled } = useSelect(
 		( select ) => ( {
 			hasSidebarEnabled: !! select(
@@ -92,14 +103,29 @@ export default function Layout( { blockEditorSettings } ) {
 		[]
 	);
 
+	useEffect( () => {
+		if ( ! selectedMenuId && menus?.length ) {
+			selectMenu( menus[ 0 ].id );
+		}
+	}, [] );
+
 	useMenuNotifications( selectedMenuId );
 
 	const hasMenus = !! menus?.length;
-	const isBlockEditorReady = !! ( hasMenus && navigationPost );
 	const hasPermanentSidebar = isLargeViewport && hasMenus;
 
+	const isBlockEditorReady = !! (
+		hasMenus &&
+		navigationPost &&
+		isMenuSelected
+	);
+
 	return (
 		<ErrorBoundary>
+			<div
+				hidden={ ! isMenuBeingDeleted }
+				className={ 'edit-navigation-layout__overlay' }
+			/>
 			<SlotFillProvider>
 				<DropZoneProvider>
 					<BlockEditorKeyboardShortcuts.Register />
@@ -136,6 +162,7 @@ export default function Layout( { blockEditorSettings } ) {
 									labels={ interfaceLabels }
 									header={
 										<Header
+											isMenuSelected={ isMenuSelected }
 											isPending={ ! hasLoadedMenus }
 											menus={ menus }
 											selectedMenuId={ selectedMenuId }
@@ -149,9 +176,16 @@ export default function Layout( { blockEditorSettings } ) {
 												<Spinner />
 											) }
 
-											{ hasFinishedInitialLoad &&
-												! hasMenus && <EmptyState /> }
-
+											{ ! isMenuSelected &&
+												hasFinishedInitialLoad && (
+													<UnselectedMenuState
+														onSelectMenu={
+															selectMenu
+														}
+														onCreate={ selectMenu }
+														menus={ menus }
+													/>
+												) }
 											{ isBlockEditorReady && (
 												<>
 													<BlockToolbar
@@ -189,6 +223,9 @@ export default function Layout( { blockEditorSettings } ) {
 															onDeleteMenu={
 																deleteMenu
 															}
+															isMenuBeingDeleted={
+																isMenuBeingDeleted
+															}
 														/>
 													</div>
 												</>

packages/edit-navigation/src/components/layout/style.scss

@@ -101,3 +101,11 @@
 		margin-top: $navigation-editor-spacing-top;
 	}
 }
+
+.edit-navigation-layout__overlay {
+	z-index: z-index(".edit-navigation-layout__overlay");
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: rgba(86, 85, 85, 0.5);
+}

packages/edit-navigation/src/components/layout/unselected-menu-state.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { Card, CardBody, NavigableMenu } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AddMenu from '../add-menu';
+import MenuSwitcher from '../menu-switcher';
+
+export default function UnselectedMenuState( {
+	onCreate,
+	onSelectMenu,
+	menus,
+} ) {
+	const showMenuSwitcher = menus?.length > 0;
+	return (
+		<div className="edit-navigation-empty-state">
+			{ showMenuSwitcher && <h4>{ __( 'Choose a menu to edit:' ) }</h4> }
+			<Card>
+				<CardBody>
+					{ showMenuSwitcher ? (
+						<NavigableMenu>
+							<MenuSwitcher
+								onSelectMenu={ onSelectMenu }
+								menus={ menus }
+							/>
+						</NavigableMenu>
+					) : (
+						<AddMenu
+							onCreate={ onCreate }
+							titleText={ __( 'Create your first menu' ) }
+							helpText={ __(
+								'A short descriptive name for your menu.'
+							) }
+							focusInputOnMount
+						/>
+					) }
+				</CardBody>
+			</Card>
+		</div>
+	);
+}

packages/edit-navigation/src/components/name-editor/index.js

@@ -35,9 +35,7 @@ export function NameEditor() {
 				onBlur={ () => setIsMenuNameEditFocused( false ) }
 				className="edit-navigation-name-editor__text-control"
 				value={ editedMenuName }
-				onChange={ ( value ) => {
-					editMenuName( value );
-				} }
+				onChange={ editMenuName }
 			/>
 		</>
 	);

packages/edit-navigation/src/hooks/use-navigation-editor.js

@@ -7,6 +7,8 @@ import { useState, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as editNavigationStore } from '../store';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
 
 const getMenusData = ( select ) => {
 	const selectors = select( 'core' );
@@ -32,20 +34,28 @@ export default function useNavigationEditor() {
 	const [ hasFinishedInitialLoad, setHasFinishedInitialLoad ] = useState(
 		false
 	);
-
 	const { menus, hasLoadedMenus } = useSelect( getMenusData, [] );
+	const [ isMenuSelected, setIsMenuSelected ] = useState( true );
+
+	const { createErrorNotice, createInfoNotice } = useDispatch( noticesStore );
+	const isMenuBeingDeleted = useSelect(
+		( select ) =>
+			select( 'core' ).isDeletingEntityRecord(
+				'root',
+				'menu',
+				selectedMenuId
+			),
+		[ selectedMenuId ]
+	);
+	const selectedMenuName =
+		menus?.find( ( { id } ) => id === selectedMenuId )?.name || '';
+
 	useEffect( () => {
 		if ( hasLoadedMenus ) {
 			setHasFinishedInitialLoad( true );
 		}
 	}, [ hasLoadedMenus ] );
 
-	useEffect( () => {
-		if ( ! selectedMenuId && menus?.length ) {
-			setSelectedMenuId( menus[ 0 ].id );
-		}
-	}, [ selectedMenuId, menus ] );
-
 	const navigationPost = useSelect(
 		( select ) => {
 			if ( ! selectedMenuId ) {
@@ -64,19 +74,37 @@ export default function useNavigationEditor() {
 		} );
 		if ( didDeleteMenu ) {
 			setSelectedMenuId( null );
+			createInfoNotice(
+				sprintf(
+					// translators: %s: the name of a menu.
+					__( '"%s" menu has been deleted' ),
+					selectedMenuName
+				),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} else {
+			createErrorNotice( __( 'Menu deletion unsuccessful' ) );
 		}
 	};
 
+	useEffect( () => setIsMenuSelected( selectedMenuId !== null ), [
+		selectedMenuId,
+	] );
 	return {
 		menus,
+		hasLoadedMenus,
+		hasFinishedInitialLoad,
 		selectedMenuId,
 		navigationPost,
+		isMenuBeingDeleted,
 		selectMenu: setSelectedMenuId,
 		deleteMenu,
-		hasFinishedInitialLoad,
-		hasLoadedMenus,
 		openManageLocationsModal,
 		closeManageLocationsModal,
 		isManageLocationsModalOpen,
+		isMenuSelected,
 	};
 }