Navigation Editor: Introduce useMenuEntityProp hook

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

@@ -10,7 +10,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import SaveButton from './save-button';
 import MenuSwitcher from '../menu-switcher';
-import { useMenuEntity } from '../../hooks';
+import { useMenuEntityProp } from '../../hooks';
 
 export default function Header( {
 	isMenuSelected,
@@ -20,8 +20,7 @@ export default function Header( {
 	isPending,
 	navigationPost,
 } ) {
-	const { editedMenu: selectedMenu } = useMenuEntity( selectedMenuId );
-	const menuName = selectedMenu ? selectedMenu.name : undefined;
+	const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
 	let actionHeaderText;
 
 	if ( menuName ) {

packages/edit-navigation/src/components/inspector-additions/auto-add-pages.js

@@ -1,25 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function AutoAddPages( { menuId } ) {
-	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ), [
-		menuId,
-	] );
-
-	const [ autoAddPages, setAutoAddPages ] = useState( null );
-
-	useEffect( () => {
-		if ( autoAddPages === null && menu ) {
-			setAutoAddPages( menu.auto_add );
-		}
-	}, [ autoAddPages, menu ] );
+/**
+ * Internal dependencies
+ */
+import { useMenuEntityProp } from '../../hooks';
 
-	const { saveMenu } = useDispatch( 'core' );
+export default function AutoAddPages( { menuId } ) {
+	const [ autoAddPages, setAutoAddPages ] = useMenuEntityProp(
+		'auto_add',
+		menuId
+	);
 
 	return (
 		<ToggleControl
@@ -28,13 +22,7 @@ export default function AutoAddPages( { menuId } ) {
 				'Automatically add published top-level pages to this menu.'
 			) }
 			checked={ autoAddPages ?? false }
-			onChange={ ( newAutoAddPages ) => {
-				setAutoAddPages( newAutoAddPages );
-				saveMenu( {
-					...menu,
-					auto_add: newAutoAddPages,
-				} );
-			} }
+			onChange={ setAutoAddPages }
 		/>
 	);
 }

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

@@ -9,20 +9,20 @@ import { BlockControls } from '@wordpress/block-editor';
  */
 import {
 	untitledMenu,
-	useMenuEntity,
 	useSelectedMenuId,
+	useMenuEntityProp,
 	IsMenuNameControlFocusedContext,
 } from '../../hooks';
 
 import { sprintf, __ } from '@wordpress/i18n';
 export default function NameDisplay() {
 	const [ menuId ] = useSelectedMenuId();
-	const { editedMenu } = useMenuEntity( menuId );
+	const [ name ] = useMenuEntityProp( 'name', menuId );
 	const [ , setIsMenuNameEditFocused ] = useContext(
 		IsMenuNameControlFocusedContext
 	);
 
-	const menuName = editedMenu?.name ?? untitledMenu;
+	const menuName = name ?? untitledMenu;
 
 	return (
 		<BlockControls>

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

@@ -2,15 +2,15 @@
  * 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,
 	useSelectedMenuId,
 } from '../../hooks';
 
@@ -20,18 +20,13 @@ export function NameEditor() {
 	);
 
 	const [ menuId ] = useSelectedMenuId();
-	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 +37,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

@@ -8,6 +8,7 @@ export const untitledMenu = __( '(untitled menu)' );
 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 );
+}