Navigation Editor: Allow menu renaming

packages/edit-navigation/src/components/header/manage-locations.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useMenuLocations from './use-menu-locations';
+import useMenuLocations from '../../hooks/use-menu-locations';
 
 export default function ManageLocations() {
 	const menus = useSelect( ( select ) => select( 'core' ).getMenus(), [] );

packages/edit-navigation/src/components/header/save-button.js

@@ -9,8 +9,12 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { store as editNavigationStore } from '../../store';
+import { useMenuEntity, MenuIdContext } from '../../hooks';
+import { useContext } from '@wordpress/element';
 
 export default function SaveButton( { navigationPost } ) {
+	const menuId = useContext( MenuIdContext );
+	const { saveMenuName } = useMenuEntity( menuId );
 	const { saveNavigationPost } = useDispatch( editNavigationStore );
 
 	return (
@@ -19,6 +23,7 @@ export default function SaveButton( { navigationPost } ) {
 			isPrimary
 			onClick={ () => {
 				saveNavigationPost( navigationPost );
+				saveMenuName();
 			} }
 			disabled={ ! navigationPost }
 		>

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

@@ -9,6 +9,9 @@ import { InspectorControls } from '@wordpress/block-editor';
  */
 import AutoAddPagesPanel from './auto-add-pages-panel';
 import DeleteMenuPanel from './delete-menu-panel';
+import { NameEditor } from '../name-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 export default function InspectorAdditions( { menuId, onDeleteMenu } ) {
 	const selectedBlock = useSelect(
@@ -22,8 +25,11 @@ export default function InspectorAdditions( { menuId, onDeleteMenu } ) {
 
 	return (
 		<InspectorControls>
-			<AutoAddPagesPanel menuId={ menuId } />
-			<DeleteMenuPanel onDeleteMenu={ onDeleteMenu } />
+			<PanelBody title={ __( 'Menu Settings' ) }>
+				<NameEditor />
+				<AutoAddPagesPanel menuId={ menuId } />
+				<DeleteMenuPanel onDeleteMenu={ onDeleteMenu } />
+			</PanelBody>
 		</InspectorControls>
 	);
 }

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

@@ -19,15 +19,19 @@ import {
 	BlockInspector,
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 } from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import EmptyState from './empty-state';
-import useNavigationEditor from './use-navigation-editor';
-import useNavigationBlockEditor from './use-navigation-block-editor';
-import useMenuNotifications from './use-menu-notifications';
+import {
+	IsMenuEditorFocused,
+	MenuIdContext,
+	useNavigationEditor,
+	useNavigationBlockEditor,
+	useMenuNotifications,
+} from '../../hooks';
 import ErrorBoundary from '../error-boundary';
 import NavigationEditorShortcuts from './shortcuts';
 import Header from '../header';
@@ -39,7 +43,9 @@ import { store as editNavigationStore } from '../../store';
 export default function Layout( { blockEditorSettings } ) {
 	const canvasRef = useRef();
 	useBlockSelectionClearer( canvasRef );
-
+	const [ isMenuNameEditFocused, setIsMenuNameEditFocused ] = useState(
+		false
+	);
 	const { saveNavigationPost } = useDispatch( editNavigationStore );
 	const savePost = () => saveNavigationPost( navigationPost );
 
@@ -76,51 +82,62 @@ export default function Layout( { blockEditorSettings } ) {
 							'has-block-inspector': isBlockEditorReady,
 						} ) }
 					>
-						<Header
-							isPending={ ! hasLoadedMenus }
-							menus={ menus }
-							selectedMenuId={ selectedMenuId }
-							onSelectMenu={ selectMenu }
-							navigationPost={ navigationPost }
-						/>
+						<MenuIdContext.Provider value={ selectedMenuId }>
+							<IsMenuEditorFocused.Provider
+								value={ [
+									isMenuNameEditFocused,
+									setIsMenuNameEditFocused,
+								] }
+							>
+								<Header
+									isPending={ ! hasLoadedMenus }
+									menus={ menus }
+									selectedMenuId={ selectedMenuId }
+									onSelectMenu={ selectMenu }
+									navigationPost={ navigationPost }
+								/>
 
-						{ ! hasFinishedInitialLoad && <Spinner /> }
+								{ ! hasFinishedInitialLoad && <Spinner /> }
 
-						{ hasFinishedInitialLoad && ! hasMenus && (
-							<EmptyState />
-						) }
+								{ hasFinishedInitialLoad && ! hasMenus && (
+									<EmptyState />
+								) }
 
-						{ isBlockEditorReady && (
-							<BlockEditorProvider
-								value={ blocks }
-								onInput={ onInput }
-								onChange={ onChange }
-								settings={ {
-									...blockEditorSettings,
-									templateLock: 'all',
-								} }
-								useSubRegistry={ false }
-							>
-								<BlockEditorKeyboardShortcuts />
-								<NavigationEditorShortcuts
-									saveBlocks={ savePost }
-								/>
-								<div
-									className="edit-navigation-layout__canvas"
-									ref={ canvasRef }
-								>
-									<Editor
-										isPending={ ! hasLoadedMenus }
-										blocks={ blocks }
-									/>
-								</div>
-								<InspectorAdditions
-									menuId={ selectedMenuId }
-									onDeleteMenu={ deleteMenu }
-								/>
-								<BlockInspector bubblesVirtually={ false } />
-							</BlockEditorProvider>
-						) }
+								{ isBlockEditorReady && (
+									<BlockEditorProvider
+										value={ blocks }
+										onInput={ onInput }
+										onChange={ onChange }
+										settings={ {
+											...blockEditorSettings,
+											templateLock: 'all',
+										} }
+										useSubRegistry={ false }
+									>
+										<BlockEditorKeyboardShortcuts />
+										<NavigationEditorShortcuts
+											saveBlocks={ savePost }
+										/>
+										<div
+											className="edit-navigation-layout__canvas"
+											ref={ canvasRef }
+										>
+											<Editor
+												isPending={ ! hasLoadedMenus }
+												blocks={ blocks }
+											/>
+										</div>
+										<InspectorAdditions
+											menuId={ selectedMenuId }
+											onDeleteMenu={ deleteMenu }
+										/>
+										<BlockInspector
+											bubblesVirtually={ false }
+										/>
+									</BlockEditorProvider>
+								) }
+							</IsMenuEditorFocused.Provider>
+						</MenuIdContext.Provider>
 					</div>
 
 					<Popover.Slot />

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { BlockControls } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import { useNavigationEditorMenu, IsMenuEditorFocused } from '../../hooks';
+import { useContext } from '@wordpress/element';
+
+export default function NameDisplay() {
+	const { menuName } = useNavigationEditorMenu();
+	const [ , setIsMenuNameEditFocused ] = useContext( IsMenuEditorFocused );
+	return (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarButton onClick={ setIsMenuNameEditFocused }>
+					{ menuName }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

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

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef, useState, useContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import {
+	IsMenuEditorFocused,
+	useMenuEntity,
+	useNavigationEditorMenu,
+} from '../../hooks';
+import { useInstanceId } from '@wordpress/compose';
+
+export function NameEditor() {
+	const [ isMenuNameEditFocused, setIsMenuNameEditFocused ] = useContext(
+		IsMenuEditorFocused
+	);
+
+	const { menuName, menuId } = useNavigationEditorMenu();
+	const { editMenuName } = useMenuEntity( menuId );
+	const inputRef = useRef();
+	const [ tmpMenuName, setTmpMenuName ] = useState( menuName );
+	const instanceId = useInstanceId( NameEditor );
+	const id = `components-edit-navigation-name-editor__input-${ instanceId }`;
+	useEffect( () => setTmpMenuName( menuName ), [ menuName ] );
+	useEffect( () => {
+		if ( isMenuNameEditFocused ) inputRef.current.focus();
+	}, [ isMenuNameEditFocused ] );
+	return (
+		<>
+			<TextControl
+				ref={ inputRef }
+				help={ __(
+					'A short, descriptive name used to refer to this menu elsewhere.'
+				) }
+				label={ __( 'Name' ) }
+				id={ id }
+				onBlur={ () => setIsMenuNameEditFocused( false ) }
+				className="components-name-editor__text-control"
+				value={ tmpMenuName }
+				onChange={ ( value ) => {
+					setTmpMenuName( value );
+					editMenuName( value );
+				} }
+				aria-label={ __( 'Edit menu name' ) }
+			/>
+			{ /*<div>*/ }
+			{ /*	<input*/ }
+			{ /*		ref={ inputRef }*/ }
+			{ /*		id={ id }*/ }
+			{ /*		onBlur={ () => setIsMenuNameEditFocused( false ) }*/ }
+			{ /*		className="components-text-control__input"*/ }
+			{ /*		value={ tmpMenuName }*/ }
+			{ /*		onChange={ ( { target: { value } } ) => {*/ }
+			{ /*			setTmpMenuName( value );*/ }
+			{ /*			editMenuName( value );*/ }
+			{ /*		} }*/ }
+			{ /*		aria-label={ __( 'Edit menu name' ) }*/ }
+			{ /*	/>*/ }
+			{ /*</div>*/ }
+		</>
+	);
+}

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

@@ -0,0 +1,11 @@
+.edit-navigation-name-editor__edit-name-description {
+	font-size: $helptext-font-size;
+	font-style: normal;
+	color: $gray-700;
+}
+
+.components-name-editor__text-control {
+	.components-base-control {
+		border: none;
+	}
+}

packages/edit-navigation/src/filters/add-menu-name-editor.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import NameDisplay from '../components/name-display';
+
+const addMenuNameEditor = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		if ( props.name !== 'core/navigation' ) {
+			return <BlockEdit { ...props } />;
+		}
+		return (
+			<>
+				<BlockEdit { ...props } />
+				<NameDisplay />
+			</>
+		);
+	},
+	'withMenuName'
+);
+
+export default () =>
+	addFilter(
+		'editor.BlockEdit',
+		'core/edit-navigation/with-menu-name',
+		addMenuNameEditor
+	);

packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+/**
+ * External dependencies
+ */
+import { set } from 'lodash';
+
+function disableInsertingNonNavigationBlocks( settings, name ) {
+	if ( ! [ 'core/navigation', 'core/navigation-link' ].includes( name ) ) {
+		set( settings, [ 'supports', 'inserter' ], false );
+	}
+	return settings;
+}
+
+export default () =>
+	addFilter(
+		'blocks.registerBlockType',
+		'core/edit-navigation/disable-inserting-non-navigation-blocks',
+		disableInsertingNonNavigationBlocks
+	);

packages/edit-navigation/src/filters/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import addMenuNameEditor from './add-menu-name-editor';
+import disableInsertingNonNavigationBlocks from './disable-inserting-non-navigation-blocks';
+import removeEditUnsupportedFeatures from './remove-edit-unsupported-features';
+import removeSettingsUnsupportedFeatures from './remove-settings-unsupported-features';
+
+export const addFilters = (
+	shouldAddDisableInsertingNonNavigationBlocksFilter
+) => {
+	addMenuNameEditor();
+	if ( shouldAddDisableInsertingNonNavigationBlocksFilter ) {
+		disableInsertingNonNavigationBlocks();
+	}
+	removeEditUnsupportedFeatures();
+	removeSettingsUnsupportedFeatures();
+};