diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 42e970cc7c0762..42e267e460eb30 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/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(); } }, [] ); diff --git a/packages/block-editor/src/components/block-navigation/tree.js b/packages/block-editor/src/components/block-navigation/tree.js index c9ca266f7b1ace..e1a9b4a8302b71 100644 --- a/packages/block-editor/src/components/block-navigation/tree.js +++ b/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, ] );