Navigation Editor: Allow menu renaming

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

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

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

@@ -2,34 +2,58 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { BlockControls } from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, BaseControl } from '@wordpress/components';
 import { useMenuEntity, useNavigationEditorMenu } from '../../hooks';
+import { useInstanceId } from '@wordpress/compose';
 
-export function NameEditor() {
+export function NameEditor( {
+	setIsMenuNameEditFocused,
+	isMenuNameEditFocused,
+} ) {
 	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 (
 		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarItem
-						as="input"
-						value={ tmpMenuName }
-						onChange={ ( { target: { value } } ) => {
-							setTmpMenuName( value );
-							editMenuName( value );
-						} }
-						aria-label={ __( 'Edit menu name' ) }
-					/>
-				</ToolbarGroup>
-			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Menu Settings' ) }>
+					<BaseControl label={ __( 'Name' ) } id={ id }>
+						<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>
+					</BaseControl>
+					<div className="edit-navigation-name-editor__edit-name-description">
+						{ __(
+							'A short, descriptive name used to refer to this menu elsewhere.'
+						) }
+					</div>
+				</PanelBody>
+			</InspectorControls>
 		</>
 	);
 }

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

@@ -0,0 +1,5 @@
+.edit-navigation-name-editor__edit-name-description {
+	font-size: $helptext-font-size;
+	font-style: normal;
+	color: $gray-700;
+}

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

@@ -4,21 +4,31 @@
 /**
  * Internal dependencies
  */
+import { useState } from '@wordpress/element';
 import { NameEditor } from '../components/name-editor';
 import { addFilter } from '@wordpress/hooks';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useNavigationEditor } from '../hooks';
+import NameDisplay from '../components/name-display';
 
 const addMenuNameEditor = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		const [ isMenuNameEditFocused, setIsMenuNameEditFocused ] = useState(
+			false
+		);
 		if ( props.name !== 'core/navigation' ) {
 			return <BlockEdit { ...props } />;
 		}
-		const { menuName } = useNavigationEditor();
 		return (
 			<>
-				<BlockEdit { ...props } menuName={ menuName } />
-				<NameEditor { ...props } />
+				<BlockEdit { ...props } />
+				<NameDisplay
+					setIsMenuNameEditFocused={ setIsMenuNameEditFocused }
+				/>
+				<NameEditor
+					{ ...props }
+					setIsMenuNameEditFocused={ setIsMenuNameEditFocused }
+					isMenuNameEditFocused={ isMenuNameEditFocused }
+				/>
 			</>
 		);
 	},