Creation of menus on the edit navigation screen

packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js

@@ -12,14 +12,15 @@ export default function NavigationStructurePanel( { blocks, initialOpen } ) {
 		[]
 	);
 	const { selectBlock } = useDispatch( 'core/block-editor' );
+	const showNavigationStructure = !! blocks.length;
 
 	return (
 		<Panel className="edit-navigation-menu-editor__navigation-structure-panel">
 			<PanelBody
 				title={ __( 'Navigation structure' ) }
 				initialOpen={ initialOpen }
 			>
-				{ !! blocks.length && (
+				{ showNavigationStructure && (
 					<__experimentalBlockNavigationTree
 						blocks={ blocks }
 						selectedBlockClientId={ selectedBlockClientIds[ 0 ] }

packages/edit-navigation/src/components/menu-editor/style.scss

@@ -50,7 +50,7 @@
 }
 
 .edit-navigation-menu-editor__navigation-structure-panel {
-	// IE11 requires the column to be explicity declared.
+	// IE11 requires the column to be explicitly declared.
 	grid-column: 1;
 
 	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
@@ -59,7 +59,7 @@
 
 .edit-navigation-menu-editor__block-editor-panel {
 	@include break-medium {
-		// IE11 requires the column to be explicity declared.
+		// IE11 requires the column to be explicitly declared.
 		// Only shift this into the second column on desktop.
 		grid-column: 2;
 	}

packages/edit-navigation/src/components/menus-editor/create-menu-panel.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import { some } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Panel,
+	PanelBody,
+	TextControl,
+	withFocusReturn,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+const { DOMParser } = window;
+
+const noticeId = 'edit-navigation-create-menu-error';
+
+const menuNameMatches = ( menuName ) => ( menu ) =>
+	menu.name.toLowerCase() === menuName.toLowerCase();
+
+export function CreateMenuForm( { onCancel, onCreateMenu, menus } ) {
+	const [ menuName, setMenuName ] = useState( '' );
+	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+	const menuSaveError = useSelect( ( select ) =>
+		select( 'core' ).getLastEntitySaveError( 'root', 'menu' )
+	);
+	const { saveMenu } = useDispatch( 'core' );
+	const { createInfoNotice, createErrorNotice, removeNotice } = useDispatch(
+		'core/notices'
+	);
+
+	// Handle REST API Error messages.
+	useEffect( () => {
+		if ( menuSaveError ) {
+			// Error messages from the REST API often contain HTML.
+			// createErrorNotice does not support HTML in error text, so first
+			// strip HTML out using DOMParser.
+			const document = new DOMParser().parseFromString(
+				menuSaveError.message,
+				'text/html'
+			);
+			const errorText = document.body.textContent || '';
+			createErrorNotice( errorText, { id: noticeId } );
+		}
+	}, [ menuSaveError ] );
+
+	const createMenu = useCallback(
+		async ( event ) => {
+			// Prevent form submission.
+			event.preventDefault();
+
+			// Remove existing notices.
+			removeNotice( noticeId );
+
+			if ( menuName.length === 0 ) {
+				// Button is aria-disabled, do nothing.
+				return;
+			}
+
+			// Validate the menu name doesn't match an existing menu.
+			if ( some( menus, menuNameMatches( menuName ) ) ) {
+				const message = sprintf(
+					// translators: %s: the name of a menu.
+					__(
+						'The menu name %s conflicts with another menu name. Please try another.'
+					),
+					menuName
+				);
+				createErrorNotice( message, { id: noticeId } );
+				return;
+			}
+
+			setIsCreatingMenu( true );
+
+			const menu = await saveMenu( { name: menuName } );
+			if ( menu ) {
+				createInfoNotice( __( 'Menu created' ), {
+					type: 'snackbar',
+					isDismissible: true,
+				} );
+				onCreateMenu( menu.id );
+			}
+
+			setIsCreatingMenu( false );
+		},
+		[ menuName, menus ]
+	);
+
+	return (
+		<Panel className="edit-navigation-menus-editor__create-menu-panel">
+			<PanelBody title={ __( 'Create navigation menu' ) }>
+				<form onSubmit={ createMenu }>
+					<TextControl
+						// Disable reason - autoFocus is legitimate in this usage,
+						// The first focusable on the form should be focused,
+						// which is this element.
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus
+						label={ __( 'Menu name' ) }
+						value={ menuName }
+						onChange={ setMenuName }
+						placeholder={ __( 'Main Navigation' ) }
+					/>
+					<Button
+						type="submit"
+						isBusy={ isCreatingMenu }
+						onClick={ createMenu }
+						aria-disabled={ menuName.length === 0 }
+						isPrimary
+					>
+						{ __( 'Create menu' ) }
+					</Button>
+					{ onCancel && (
+						<Button
+							className="edit-navigation-menus-editor__cancel-create-menu-button"
+							isSecondary
+							onClick={ onCancel }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+					) }
+				</form>
+			</PanelBody>
+		</Panel>
+	);
+}
+
+export default withFocusReturn( CreateMenuForm );

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

@@ -3,49 +3,113 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import { Card, CardBody, Spinner, SelectControl } from '@wordpress/components';
+import {
+	Button,
+	Card,
+	CardBody,
+	Spinner,
+	SelectControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import CreateMenuPanel from './create-menu-panel';
 import MenuEditor from '../menu-editor';
 
 export default function MenusEditor( { blockEditorSettings } ) {
-	const menus = useSelect( ( select ) => select( 'core' ).getMenus() );
+	const { menus, hasLoadedMenus } = useSelect( ( select ) => {
+		const { getMenus, hasFinishedResolution } = select( 'core' );
+		return {
+			menus: getMenus(),
+			hasLoadedMenus: hasFinishedResolution( 'getMenus' ),
+		};
+	}, [] );
 
-	const [ menuId, setMenuId ] = useState( 0 );
-	const [ stateMenus, setStateMenus ] = useState( null );
+	const [ hasCompletedFirstLoad, setHasCompletedFirstLoad ] = useState(
+		false
+	);
+
+	useEffect( () => {
+		if ( ! hasCompletedFirstLoad && hasLoadedMenus ) {
+			setHasCompletedFirstLoad( true );
+		}
+	}, [ hasLoadedMenus ] );
+
+	const [ menuId, setMenuId ] = useState();
+	const [ stateMenus, setStateMenus ] = useState();
+	const [ showCreateMenuPanel, setShowCreateMenuPanel ] = useState( false );
 
 	useEffect( () => {
 		if ( menus?.length ) {
 			setStateMenus( menus );
-			setMenuId( menus[ 0 ].id );
+
+			// Only set menuId if it's currently unset.
+			if ( ! menuId ) {
+				setMenuId( menus[ 0 ].id );
+			}
 		}
-	}, [ menus ] );
+	}, [ menus, menuId ] );
 
-	if ( ! stateMenus ) {
+	if ( ! hasCompletedFirstLoad ) {
 		return <Spinner />;
 	}
 
+	const hasMenus = !! stateMenus?.length;
+	const isCreateMenuPanelVisible =
+		hasCompletedFirstLoad && ( ! hasMenus || showCreateMenuPanel );
+
 	return (
 		<>
 			<Card className="edit-navigation-menus-editor__menu-selection-card">
-				<CardBody>
-					<SelectControl
-						className="edit-navigation-menus-editor__menu-select-control"
-						label={ __( 'Select navigation to edit:' ) }
-						options={ stateMenus.map( ( menu ) => ( {
-							value: menu.id,
-							label: menu.name,
-						} ) ) }
-						onChange={ ( selectedMenuId ) =>
-							setMenuId( selectedMenuId )
-						}
-					/>
+				<CardBody className="edit-navigation-menus-editor__menu-selection-card-body">
+					{ hasCompletedFirstLoad && ! hasMenus && (
+						<p className="edit-navigation-menus-editor__menu-selection-card-instructional-text">
+							{ __( 'Create your first menu below.' ) }
+						</p>
+					) }
+					{ hasMenus && (
+						<>
+							<SelectControl
+								className="edit-navigation-menus-editor__menu-select-control"
+								label={ __( 'Select navigation to edit:' ) }
+								options={ stateMenus?.map( ( menu ) => ( {
+									value: menu.id,
+									label: menu.name,
+								} ) ) }
+								onChange={ ( selectedMenuId ) =>
+									setMenuId( selectedMenuId )
+								}
+								value={ menuId }
+							/>
+							<Button
+								isLink
+								onClick={ () => setShowCreateMenuPanel( true ) }
+							>
+								{ __( 'Create a new menu' ) }
+							</Button>
+						</>
+					) }
 				</CardBody>
 			</Card>
-			{ !! menuId && (
+			{ isCreateMenuPanelVisible && (
+				<CreateMenuPanel
+					menus={ stateMenus }
+					onCancel={
+						// User can only cancel out of menu creation if there
+						// are other menus to fall back to showing.
+						hasMenus
+							? () => setShowCreateMenuPanel( false )
+							: undefined
+					}
+					onCreateMenu={ ( newMenuId ) => {
+						setMenuId( newMenuId );
+						setShowCreateMenuPanel( false );
+					} }
+				/>
+			) }
+			{ hasMenus && (
 				<MenuEditor
 					menuId={ menuId }
 					blockEditorSettings={ blockEditorSettings }
@@ -56,6 +120,8 @@ export default function MenusEditor( { blockEditorSettings } ) {
 						setStateMenus( newStateMenus );
 						if ( newStateMenus.length ) {
 							setMenuId( newStateMenus[ 0 ].id );
+						} else {
+							setMenuId();
 						}
 					} }
 				/>

packages/edit-navigation/src/components/menus-editor/style.scss

@@ -2,7 +2,33 @@
 	margin-bottom: 10px;
 }
 
+.edit-navigation-menus-editor__menu-selection-card-body {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+
+	.edit-navigation-menus-editor__menu-select-control {
+		margin-right: 0;
+		margin-bottom: 10px;
+		align-self: normal;
+	}
+
+	@include break-large {
+		flex-direction: row;
+		align-items: center;
+
+		.edit-navigation-menus-editor__menu-select-control {
+			align-self: center;
+			margin-right: 1ch;
+			margin-bottom: 0;
+		}
+	}
+}
+
 .edit-navigation-menus-editor__menu-select-control {
+	flex: 1;
+	margin-right: 1ch;
+
 	@include break-small {
 		.components-base-control__field {
 			display: flex;
@@ -15,3 +41,16 @@
 		}
 	}
 }
+
+.edit-navigation-menus-editor__menu-selection-card-instructional-text {
+	margin: 0;
+}
+
+.edit-navigation-menus-editor__create-menu-panel {
+	margin-bottom: 10px;
+}
+
+.edit-navigation-menus-editor__cancel-create-menu-button {
+	margin-left: 8px;
+}
+