From a1456ebb9ba3822d97a0330bf59fb83b247b9866 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 21 Apr 2023 09:55:52 +1000
Subject: [PATCH] List View: Ensure list view block id is unique to the list
 view instance (#49944)

---
 .../block-editor/src/components/list-view/block.js    | 11 ++++++++---
 .../block-editor/src/components/list-view/index.js    |  5 ++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

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,
 		]
 	);