Navigation editor: Fix content mode (#56856)

packages/editor/src/components/provider/index.js

@@ -9,7 +9,6 @@ import {
 	BlockEditorProvider,
 	BlockContextProvider,
 	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
@@ -23,42 +22,13 @@ import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
+import NavigationBlockEditingMode from './navigation-block-editing-mode';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
 const noop = () => {};
 
-/**
- * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
- *
- * Set block editing mode to contentOnly when entering Navigation focus mode.
- * this ensures that non-content controls on the block will be hidden and thus
- * the user can focus on editing the Navigation Menu content only.
- *
- * @param {string} navigationBlockClientId ClientId.
- */
-function useForceFocusModeForNavigation( navigationBlockClientId ) {
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
-
-	useEffect( () => {
-		if ( ! navigationBlockClientId ) {
-			return;
-		}
-
-		setBlockEditingMode( navigationBlockClientId, 'contentOnly' );
-
-		return () => {
-			unsetBlockEditingMode( navigationBlockClientId );
-		};
-	}, [
-		navigationBlockClientId,
-		unsetBlockEditingMode,
-		setBlockEditingMode,
-	] );
-}
-
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -114,9 +84,6 @@ function useBlockEditorProps( post, template, mode ) {
 	const disableRootLevelChanges =
 		( !! template && mode === 'template-locked' ) ||
 		post.type === 'wp_navigation';
-	const navigationBlockClientId =
-		post.type === 'wp_navigation' && blocks && blocks[ 0 ]?.clientId;
-	useForceFocusModeForNavigation( navigationBlockClientId );
 	if ( disableRootLevelChanges ) {
 		return [ blocks, noop, noop ];
 	}
@@ -274,6 +241,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ mode === 'template-locked' && (
 								<DisableNonPageContentBlocks />
 							) }
+							{ type === 'wp_navigation' && (
+								<NavigationBlockEditingMode />
+							) }
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

packages/editor/src/components/provider/navigation-block-editing-mode.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
+ *
+ * Set block editing mode to contentOnly when entering Navigation focus mode.
+ * this ensures that non-content controls on the block will be hidden and thus
+ * the user can focus on editing the Navigation Menu content only.
+ */
+
+export default function NavigationBlockEditingMode() {
+	// In the navigation block editor,
+	// the navigation block is the only root block.
+	const blockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockOrder()?.[ 0 ],
+		[]
+	);
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( ! blockClientId ) {
+			return;
+		}
+
+		setBlockEditingMode( blockClientId, 'contentOnly' );
+
+		return () => {
+			unsetBlockEditingMode( blockClientId );
+		};
+	}, [ blockClientId, unsetBlockEditingMode, setBlockEditingMode ] );
+}