Navigation Editor: Introduce useMenuEntityProp hook

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

@@ -2,15 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
 import { useEffect, useRef, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { TextControl } from '@wordpress/components';
 import {
 	IsMenuNameControlFocusedContext,
-	untitledMenu,
-	useMenuEntity,
+	useMenuEntityProp,
 	useSelectedMenuData,
 } from '../../hooks';
 
@@ -20,18 +19,13 @@ export function NameEditor() {
 	);
 
 	const { menuId } = useSelectedMenuData();
-	const { editedMenu, editMenuEntityRecord, menuEntityData } = useMenuEntity(
-		menuId
-	);
-	const editedMenuName = menuId && editedMenu.name;
-
-	const editMenuName = ( name = untitledMenu ) =>
-		editMenuEntityRecord( ...menuEntityData, { name } );
+	const [ name, setName ] = useMenuEntityProp( 'name', menuId );
 
 	const inputRef = useRef();
 	useEffect( () => {
 		if ( isMenuNameEditFocused ) inputRef.current.focus();
 	}, [ isMenuNameEditFocused ] );
+
 	return (
 		<>
 			<TextControl
@@ -42,8 +36,8 @@ export function NameEditor() {
 				label={ __( 'Name' ) }
 				onBlur={ () => setIsMenuNameEditFocused( false ) }
 				className="edit-navigation-name-editor__text-control"
-				value={ editedMenuName }
-				onChange={ editMenuName }
+				value={ name }
+				onChange={ setName }
 			/>
 		</>
 	);

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

@@ -9,6 +9,7 @@ export const MenuIdContext = createContext();
 export const IsMenuNameControlFocusedContext = createContext();
 
 export { default as useMenuEntity } from './use-menu-entity';
+export { default as useMenuEntityProp } from './use-menu-entity-prop';
 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';

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { MENU_KIND, MENU_POST_TYPE } from '../constants';
+
+/**
+ * Returns the value and setter for the specified
+ * property of the menu.
+ *
+ * @param {string} prop   A Property name.
+ * @param {string} menuId A menu ID.
+ *
+ * @return {[*, Function]} A tuple where the first item is the
+ *                         property value and the second is the
+ *                         setter.
+ */
+export default function useMenuEntityProp( prop, menuId ) {
+	return useEntityProp( MENU_KIND, MENU_POST_TYPE, prop, menuId );
+}