adds editing functionality for menu name

packages/components/src/edit-in-place-control/index.js

@@ -56,7 +56,7 @@ function EditInPlaceControl( { label = '', onClick = noop, onChange = noop } ) {
 					} }
 					onBlur={ () => {
 						setEdit( false );
-						onChange();
+						onChange( value );
 					} }
 					onKeyDown={ ( event ) => {
 						if (
@@ -67,9 +67,10 @@ function EditInPlaceControl( { label = '', onClick = noop, onChange = noop } ) {
 							event.stopPropagation();
 							if ( ESCAPE === event.keyCode ) {
 								setValue( prevValue.current );
+							} else {
+								setEdit( ! edit );
+								onChange( value );
 							}
-							setEdit( ! edit );
-							onChange();
 						}
 					} }
 				/>

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

@@ -1,21 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { addFilter } from '@wordpress/hooks';
 import {
 	DropZoneProvider,
-	__experimentalEditInPlaceControl as EditInPlaceControl,
 	FocusReturnProvider,
 	Popover,
 	SlotFillProvider,
-	ToolbarGroup,
 } from '@wordpress/components';
 import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
-	BlockControls,
 } from '@wordpress/block-editor';
-import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,28 +25,7 @@ import Notices from '../notices';
 import Toolbar from '../toolbar';
 import Editor from '../editor';
 import InspectorAdditions from '../inspector-additions';
-
-const withMenuName = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		return (
-			<>
-				<BlockEdit { ...props } />
-				<BlockControls>
-					<ToolbarGroup>
-						<EditInPlaceControl label="Sample menu" />
-					</ToolbarGroup>
-				</BlockControls>
-			</>
-		);
-	},
-	'withMenuName'
-);
-
-addFilter(
-	'navigation.BlockEdit',
-	'core/edit-navigation/with-menu-name',
-	withMenuName
-);
+import useNavigationBlockWithName from './use-navigation-block-with-name';
 
 export default function Layout( { blockEditorSettings } ) {
 	const {
@@ -68,6 +42,10 @@ export default function Layout( { blockEditorSettings } ) {
 
 	useMenuNotifications( selectedMenuId );
 
+	useNavigationBlockWithName( {
+		menuId: selectedMenuId,
+	} );
+
 	return (
 		<ErrorBoundary>
 			<SlotFillProvider>

packages/edit-navigation/src/components/layout/use-navigation-block-with-name.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { BlockControls } from '@wordpress/block-editor';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import {
+	__experimentalEditInPlaceControl as EditInPlaceControl,
+	ToolbarGroup,
+} from '@wordpress/components';
+
+export default function useNavigationBlockWithName( { menuId } ) {
+	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ), [
+		menuId,
+	] );
+
+	const { saveMenu } = useDispatch( 'core' );
+
+	removeFilter(
+		'navigation.BlockEdit',
+		'core/edit-navigation/with-menu-name'
+	);
+
+	const withMenuName = createHigherOrderComponent(
+		( BlockEdit ) => ( props ) => {
+			return (
+				<>
+					<BlockEdit { ...props } />
+					<BlockControls>
+						<ToolbarGroup>
+							<EditInPlaceControl
+								label={ menu?.name ?? '(untitled menu)' }
+								onChange={ ( value ) => {
+									if ( value === '' ) {
+										value = null;
+									}
+									saveMenu( {
+										...menu,
+										name: value ?? '(untitled menu)',
+									} );
+								} }
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+				</>
+			);
+		},
+		'withMenuName'
+	);
+
+	addFilter(
+		'navigation.BlockEdit',
+		'core/edit-navigation/with-menu-name',
+		withMenuName
+	);
+}