List View: Ensure list view block id is unique to the list view insta…

…nce (#49944)
WordPress · Apr 20, 2023 · a1456eb · a1456eb
1 parent 52c529f
commit a1456eb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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,
 		]
 	);