Add image count

WordPress · Aug 10, 2023 · 51bd450 · 51bd450
1 parent 0094db2
commit 51bd450
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 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
@@ -28,7 +28,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
-import useListViewImages from './use-list-view-images';
+import useListViewImages, { MAX_IMAGES } from './use-list-view-images';
 
 function ListViewBlockSelectButton(
 	{
@@ -187,17 +187,31 @@ function ListViewBlockSelectButton(
 						</Tooltip>
 					) }
 					{ images.length ? (
-						<span className="block-editor-list-view-block-select-button__images">
-							{ images.map( ( image, index ) => (
-								<span
-									className="block-editor-list-view-block-select-button__image"
-									key={ index }
-									style={ {
-										backgroundImage: `url(${ image.url })`,
-										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
-									} }
-								/>
-							) ) }
+						<span
+							className="block-editor-list-view-block-select-button__images"
+							aria-hidden
+						>
+							{ images
+								.slice( 0, MAX_IMAGES )
+								.map( ( image, index ) => (
+									<span
+										className="block-editor-list-view-block-select-button__image"
+										key={ `img-${ image.url }` }
+										style={ {
+											backgroundImage: `url(${ image.url })`,
+											zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
+										} }
+									/>
+								) ) }
+							{ images.length > MAX_IMAGES && (
+								<span className="block-editor-list-view-block-select-button__image-count">
+									{ sprintf(
+										/* translators: %d: Number of additional images within a block. */
+										__( '+%d' ),
+										images.length - MAX_IMAGES
+									) }
+								</span>
+							) }
 						</span>
 					) : null }
 					{ isLocked && (

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -359,6 +359,12 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__image-count {
+		font-size: $helptext-font-size;
+		margin-left: $grid-unit-05;
+		opacity: 0.6;
+	}
+
 	&.is-selected .block-editor-list-view-block-select-button__image {
 		box-shadow: 0 0 0 $radius-block-ui var(--wp-admin-theme-color);
 	}

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
@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 
 // Maximum number of images to display in a list view row.
-const MAX_IMAGES = 5;
+export const MAX_IMAGES = 5;
 
 function getImageUrl( block ) {
 	if ( block.name !== 'core/image' ) {
@@ -34,9 +34,6 @@ function getImagesFromGallery( block ) {
 		if ( img ) {
 			images.push( img );
 		}
-		if ( images.length >= MAX_IMAGES ) {
-			return images;
-		}
 	}
 
 	return images;