Reduce to 3 images, remove image count

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

Hide file tree

Showing 3 changed files with 18 additions and 30 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, { MAX_IMAGES } from './use-list-view-images';
+import useListViewImages from './use-list-view-images';
 
 function ListViewBlockSelectButton(
 	{
@@ -191,27 +191,16 @@ function ListViewBlockSelectButton(
 							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>
-							) }
+							{ 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.
+									} }
+								/>
+							) ) }
 						</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,14 +359,10 @@
 		}
 	}
 
-	.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);
+		&:not(:only-child) {
+			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.
-export const MAX_IMAGES = 5;
+const MAX_IMAGES = 3;
 
 function getImageUrl( block ) {
 	if ( block.name !== 'core/image' ) {
@@ -34,6 +34,9 @@ function getImagesFromGallery( block ) {
 		if ( img ) {
 			images.push( img );
 		}
+		if ( images.length >= MAX_IMAGES ) {
+			return images;
+		}
 	}
 
 	return images;