Persistent List View: Fix the list stealing focus from the canvas on …

…item mount (#31058)

When a block is selected, opening the persistent list view moves the focus away from the canvas to the corresponding list item.
To prevent the list view from stealing focus every time the selected block changes if the list view is open, the focus change only happened on list item mount.
This approach didn't take into account newly created blocks, which inherently spawn new list items, which of course mount and steal focus from the canvas.

This fix makes sure that the focus change only happens when the entire list view mounts for the first time.
Creating new blocks while the list view is open, will keep the focus in the canvas, as expected.

packages/block-editor/src/components/block-navigation/block.js

@@ -78,6 +78,7 @@ export default function BlockNavigationBlock( {
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
 		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
+		isTreeGridMounted,
 	} = useBlockNavigationContext();
 	const blockNavigationBlockSettingsClassName = classnames(
 		'block-editor-block-navigation-block__menu-cell',
@@ -88,7 +89,11 @@ export default function BlockNavigationBlock( {
 	// only focus the selected list item on mount; otherwise the list would always
 	// try to steal the focus from the editor canvas.
 	useEffect( () => {
-		if ( withExperimentalPersistentListViewFeatures && isSelected ) {
+		if (
+			withExperimentalPersistentListViewFeatures &&
+			! isTreeGridMounted &&
+			isSelected
+		) {
 			cellRef.current.focus();
 		}
 	}, [] );

packages/block-editor/src/components/block-navigation/tree.js

@@ -3,7 +3,7 @@
  */
 
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -31,6 +31,11 @@ export default function BlockNavigationTree( {
 		target: blockDropTarget,
 	} = useBlockNavigationDropZone();
 
+	const isMounted = useRef( false );
+	useEffect( () => {
+		isMounted.current = true;
+	}, [] );
+
 	if ( ! __experimentalFeatures ) {
 		blockDropTarget = undefined;
 	}
@@ -40,11 +45,13 @@ export default function BlockNavigationTree( {
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
 			blockDropTarget,
+			isTreeGridMounted: isMounted.current,
 		} ),
 		[
 			__experimentalFeatures,
 			__experimentalPersistentListViewFeatures,
 			blockDropTarget,
+			isMounted.current,
 		]
 	);