diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index fb8054bee7986a..43a135db7e5e8e 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -125,8 +125,13 @@ function ListViewBlock( { blockTitle ); - const { isTreeGridMounted, expand, collapse, BlockSettingsMenu } = - useListViewContext(); + const { + isTreeGridMounted, + expand, + collapse, + BlockSettingsMenu, + listViewInstanceId, + } = useListViewContext(); const hasSiblings = siblingBlockCount > 0; const hasRenderedMovers = showBlockMovers && hasSiblings; @@ -237,7 +242,7 @@ function ListViewBlock( { position={ position } rowCount={ rowCount } path={ path } - id={ `list-view-block-${ clientId }` } + id={ `list-view-${ listViewInstanceId }-block-${ clientId }` } data-block={ clientId } data-expanded={ canExpand ? isExpanded : undefined } ref={ rowRef } diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 5b028c52bb937a..d715e35d216f70 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { + useInstanceId, useMergeRefs, __experimentalUseFixedWindowList as useFixedWindowList, } from '@wordpress/compose'; @@ -90,6 +91,7 @@ function ListViewComponent( ); } + const instanceId = useInstanceId( ListViewComponent ); const { clientIdsTree, draggedClientIds, selectedClientIds } = useListViewClientIds( { blocks, rootClientId } ); @@ -200,14 +202,15 @@ function ListViewComponent( expand, collapse, BlockSettingsMenu, + listViewInstanceId: instanceId, } ), [ - isMounted.current, draggedClientIds, expandedState, expand, collapse, BlockSettingsMenu, + instanceId, ] );