From 486383637f6e2eeffccc91c107f091d56cfe9bb2 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 18 Aug 2023 23:43:52 +0900
Subject: [PATCH] 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 c14cf0403be41e..33256791cb9628 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
@@ -194,7 +194,7 @@ function ListViewBlockSelectButton(
 							{ images.map( ( image, index ) => (
 								<span
 									className="block-editor-list-view-block-select-button__image"
-									key={ index }
+									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 ];
 	}