From 92c940171a63f6dd0d561e63ce1507ad3aadb98e Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 21 Aug 2023 21:05:52 +0900
Subject: [PATCH] List View: Fix warning error when the gallery block has the
 same image URLs (#53809)

* List View: Fix warning error when the gallery block has the same image URLs

* Use clientId instead of index
---
 .../src/components/list-view/block-select-button.js  |  2 +-
 .../src/components/list-view/use-list-view-images.js | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index e558b951f54595..faf9d299bd9352 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -246,7 +246,7 @@ function ListViewBlockSelectButton(
 							{ images.map( ( image, index ) => (
 								<span
 									className="block-editor-list-view-block-select-button__image"
-									key={ `img-${ image.url }` }
+									key={ image.clientId }
 									style={ {
 										backgroundImage: `url(${ image.url })`,
 										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
diff --git a/packages/block-editor/src/components/list-view/use-list-view-images.js b/packages/block-editor/src/components/list-view/use-list-view-images.js
index 85dea4292f3600..97633349b6b028 100644
--- a/packages/block-editor/src/components/list-view/use-list-view-images.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-images.js
@@ -12,13 +12,17 @@ import { store as blockEditorStore } from '../../store';
 // Maximum number of images to display in a list view row.
 const MAX_IMAGES = 3;
 
-function getImageUrl( block ) {
+function getImage( block ) {
 	if ( block.name !== 'core/image' ) {
 		return;
 	}
 
 	if ( block.attributes?.url ) {
-		return { url: block.attributes.url, alt: block.attributes.alt };
+		return {
+			url: block.attributes.url,
+			alt: block.attributes.alt,
+			clientId: block.clientId,
+		};
 	}
 }
 
@@ -30,7 +34,7 @@ function getImagesFromGallery( block ) {
 	const images = [];
 
 	for ( const innerBlock of block.innerBlocks ) {
-		const img = getImageUrl( innerBlock );
+		const img = getImage( innerBlock );
 		if ( img ) {
 			images.push( img );
 		}
@@ -43,7 +47,7 @@ function getImagesFromGallery( block ) {
 }
 
 function getImagesFromBlock( block, isExpanded ) {
-	const img = getImageUrl( block );
+	const img = getImage( block );
 	if ( img ) {
 		return [ img ];
 	}