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/layout/index.js

@@ -25,9 +25,12 @@ import { useRef } 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 {
+	MenuIdContext,
+	useNavigationEditor,
+	useNavigationBlockEditor,
+	useMenuNotifications,
+} from '../../hooks';
 import ErrorBoundary from '../error-boundary';
 import NavigationEditorShortcuts from './shortcuts';
 import Header from '../header';
@@ -76,51 +79,55 @@ export default function Layout( { blockEditorSettings } ) {
 							'has-block-inspector': isBlockEditorReady,
 						} ) }
 					>
-						<Header
-							isPending={ ! hasLoadedMenus }
-							menus={ menus }
-							selectedMenuId={ selectedMenuId }
-							onSelectMenu={ selectMenu }
-							navigationPost={ navigationPost }
-						/>
+						<MenuIdContext.Provider value={ selectedMenuId }>
+							<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 }
+							{ isBlockEditorReady && (
+								<BlockEditorProvider
+									value={ blocks }
+									onInput={ onInput }
+									onChange={ onChange }
+									settings={ {
+										...blockEditorSettings,
+										templateLock: 'all',
+									} }
+									useSubRegistry={ false }
 								>
-									<Editor
-										isPending={ ! hasLoadedMenus }
-										blocks={ blocks }
+									<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 }
 									/>
-								</div>
-								<InspectorAdditions
-									menuId={ selectedMenuId }
-									onDeleteMenu={ deleteMenu }
-								/>
-								<BlockInspector bubblesVirtually={ false } />
-							</BlockEditorProvider>
-						) }
+								</BlockEditorProvider>
+							) }
+						</MenuIdContext.Provider>
 					</div>
 
 					<Popover.Slot />

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { BlockControls } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+import { useMenuEntity, useNavigationEditorMenu } from '../../hooks';
+
+export function NameEditor() {
+	const { menuName, menuId } = useNavigationEditorMenu();
+	const { editMenuName } = useMenuEntity( menuId );
+	const [ tmpMenuName, setTmpMenuName ] = useState( menuName );
+	useEffect( () => setTmpMenuName( menuName ), [ menuName ] );
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarItem
+						as="input"
+						value={ tmpMenuName }
+						onChange={ ( { target: { value } } ) => {
+							setTmpMenuName( value );
+							editMenuName( value );
+						} }
+						aria-label={ __( 'Edit menu name' ) }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+		</>
+	);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { NameEditor } from '../components/name-editor';
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useNavigationEditor } from '../hooks';
+
+const addMenuNameEditor = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		if ( props.name !== 'core/navigation' ) {
+			return <BlockEdit { ...props } />;
+		}
+		const { menuName } = useNavigationEditor();
+		return (
+			<>
+				<BlockEdit { ...props } menuName={ menuName } />
+				<NameEditor { ...props } />
+			</>
+		);
+	},
+	'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();
+};

packages/edit-navigation/src/filters/remove-edit-unsupported-features.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+const removeNavigationBlockEditUnsupportedFeatures = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		if ( props.name !== 'core/navigation' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		return (
+			<BlockEdit
+				{ ...props }
+				hasSubmenuIndicatorSetting={ false }
+				hasItemJustificationControls={ false }
+				hasListViewModal={ false }
+			/>
+		);
+	},
+	'removeNavigationBlockEditUnsupportedFeatures'
+);
+
+export default () =>
+	addFilter(
+		'editor.BlockEdit',
+		'core/edit-navigation/remove-navigation-block-edit-unsupported-features',
+		removeNavigationBlockEditUnsupportedFeatures
+	);

packages/edit-navigation/src/filters/remove-settings-unsupported-features.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+function removeNavigationBlockSettingsUnsupportedFeatures( settings, name ) {
+	if ( name !== 'core/navigation' ) {
+		return settings;
+	}
+
+	return {
+		...settings,
+		supports: {
+			customClassName: false,
+			html: false,
+			inserter: true,
+		},
+		// Remove any block variations.
+		variations: undefined,
+	};
+}
+
+export default () =>
+	addFilter(
+		'blocks.registerBlockType',
+		'core/edit-navigation/remove-navigation-block-settings-unsupported-features',
+		removeNavigationBlockSettingsUnsupportedFeatures
+	);

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

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createContext } from '@wordpress/element';
+
+export const untitledMenu = __( '(untitled menu)' );
+export const MenuIdContext = createContext();
+
+export { default as useMenuEntity } from './use-menu-entity';
+export { default as useNavigationEditor } from './use-navigation-editor';
+export { default as useNavigationBlockEditor } from './use-navigation-block-editor';
+export { default as useMenuNotifications } from './use-menu-notifications';
+export { default as useNavigationEditorMenu } from './use-navigation-editor-menu';
+export { default as useMenuLocations } from './use-menu-locations';

packages/edit-navigation/src/hooks/use-menu-entity.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+/**
+ * External dependencies
+ */
+import { isUndefined, negate } from 'lodash';
+/**
+ * Internal dependencies
+ */
+import { MENU_KIND, MENU_POST_TYPE } from '../utils/constants';
+
+import { untitledMenu } from './index';
+
+export default function useMenuEntity( menuId ) {
+	const { editEntityRecord, saveEditedEntityRecord } = useDispatch( 'core' );
+
+	const menuEntityData = [ MENU_KIND, MENU_POST_TYPE, menuId ];
+	const editedMenu = useSelect(
+		( select ) =>
+			select( 'core' ).getEditedEntityRecord( ...menuEntityData ),
+		[ menuId ]
+	);
+
+	const editedMenuName = menuId && editedMenu.name;
+
+	const saveMenuName = () =>
+		negate( isUndefined )( editedMenuName ) &&
+		saveEditedEntityRecord( ...menuEntityData );
+
+	const editMenuName = ( name = untitledMenu ) =>
+		editEntityRecord( ...menuEntityData, { name } );
+
+	return {
+		saveMenuName,
+		editMenuName,
+	};
+}

packages/edit-navigation/src/components/layout/use-menu-notifications.js → packages/edit-navigation/src/hooks/use-menu-notifications.js

@@ -4,17 +4,21 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
+/**
+ * Internal dependencies
+ */
+import { MENU_POST_TYPE, MENU_KIND } from '../utils/constants';
 
 export default function useMenuNotifications( menuId ) {
 	const { lastSaveError, lastDeleteError } = useSelect(
 		( select ) => ( {
 			lastSaveError: select( 'core' ).getLastEntitySaveError(
-				'root',
-				'menu'
+				MENU_KIND,
+				MENU_POST_TYPE
 			),
 			lastDeleteError: select( 'core' ).getLastEntityDeleteError(
-				'root',
-				'menu',
+				MENU_KIND,
+				MENU_POST_TYPE,
 				menuId
 			),
 		} ),