Gallery block refactor: remove the imageCount attribute (#33677)

* Remove the imageCount attribute and use CSS instead to set default columns

Co-authored-by: Glen Davies <glen.davies@a8c.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

packages/block-library/src/gallery/block.json

@@ -92,10 +92,6 @@
 		"allowResize": {
 			"type": "boolean",
 			"default": false
-		},
-		"imageCount": {
-			"type": "number",
-			"default": 0
 		}
 	},
 	"providesContext": {

packages/block-library/src/gallery/edit-wrapper.js

@@ -16,7 +16,14 @@ import EditWithoutInnerBlocks from './v1/edit';
  * use of hooks lint errors if adding this logic to the top of the edit component.
  */
 export default function GalleryEditWrapper( props ) {
-	const { attributes } = props;
+	const { attributes, clientId } = props;
+
+	const innerBlockImages = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
+		},
+		[ clientId ]
+	);
 
 	const __unstableGalleryWithImageBlocks = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
@@ -26,7 +33,7 @@ export default function GalleryEditWrapper( props ) {
 	// This logic is used to infer version information from content with higher
 	// precedence than the flag. New galleries (and existing empty galleries) will
 	// honor the flag.
-	const hasNewVersionContent = !! attributes?.imageCount;
+	const hasNewVersionContent = !! innerBlockImages?.length;
 	const hasOldVersionContent =
 		0 < attributes?.ids?.length || 0 < attributes?.images?.length;
 	if (

packages/block-library/src/gallery/edit.js

@@ -86,8 +86,7 @@ function GalleryEdit( props ) {
 	} = props;
 
 	const {
-		imageCount,
-		columns = defaultColumnsNumber( imageCount ),
+		columns,
 		imageCrop,
 		linkTarget,
 		linkTo,
@@ -155,17 +154,6 @@ function GalleryEdit( props ) {
 		setAttributes( { shortCodeTransforms: undefined } );
 	}, [ shortCodeTransforms, shortCodeImages ] );
 
-	useEffect( () => {
-		if ( ! images ) {
-			setAttributes( { imageCount: undefined } );
-			return;
-		}
-
-		if ( images.length !== imageCount ) {
-			setAttributes( { imageCount: images.length } );
-		}
-	}, [ images ] );
-
 	const imageSizeOptions = useImageSizes(
 		imageData,
 		isSelected,
@@ -181,8 +169,8 @@ function GalleryEdit( props ) {
 	 * it already existed in the gallery. If the image is in fact new, we need
 	 * to apply the gallery's current settings to the image.
 	 *
-	 * @param  {Object} existingBlock Existing Image block that still exists after gallery update.
-	 * @param  {Object} image         Media object for the actual image.
+	 * @param {Object} existingBlock Existing Image block that still exists after gallery update.
+	 * @param {Object} image         Media object for the actual image.
 	 * @return {Object}               Attributes to set on the new image block.
 	 */
 	function buildImageAttributes( existingBlock, image ) {
@@ -462,7 +450,11 @@ function GalleryEdit( props ) {
 					{ images.length > 1 && (
 						<RangeControl
 							label={ __( 'Columns' ) }
-							value={ columns }
+							value={
+								columns
+									? columns
+									: defaultColumnsNumber( images.length )
+							}
 							onChange={ setColumnsNumber }
 							min={ 1 }
 							max={ Math.min( MAX_COLUMNS, images.length ) }

packages/block-library/src/gallery/gallery.js

@@ -20,11 +20,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { defaultColumnsNumber } from './shared';
-
 const allowedBlocks = [ 'core/image' ];
 
 export const Gallery = ( props ) => {
@@ -37,13 +32,7 @@ export const Gallery = ( props ) => {
 		blockProps,
 	} = props;
 
-	const {
-		imageCount,
-		align,
-		columns = defaultColumnsNumber( imageCount ),
-		caption,
-		imageCrop,
-	} = attributes;
+	const { align, columns, caption, imageCrop } = attributes;
 
 	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
 		allowedBlocks,
@@ -84,7 +73,8 @@ export const Gallery = ( props ) => {
 				'blocks-gallery-grid',
 				{
 					[ `align${ align }` ]: align,
-					[ `columns-${ columns }` ]: columns,
+					[ `columns-${ columns }` ]: columns !== undefined,
+					[ `columns-default` ]: columns === undefined,
 					'is-cropped': imageCrop,
 				}
 			) }

packages/block-library/src/gallery/index.js

@@ -21,7 +21,6 @@ export const settings = {
 	example: {
 		attributes: {
 			columns: 2,
-			imageCount: 2,
 		},
 		innerBlocks: [
 			{

packages/block-library/src/gallery/save.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,24 +11,20 @@ import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { defaultColumnsNumber } from './shared';
 import saveWithoutInnerBlocks from './v1/save';
 
 export default function saveWithInnerBlocks( { attributes } ) {
 	if ( attributes?.ids?.length > 0 || attributes?.images?.length > 0 ) {
 		return saveWithoutInnerBlocks( { attributes } );
 	}
 
-	const {
-		imageCount,
-		caption,
-		columns = defaultColumnsNumber( imageCount ),
-		imageCrop,
-	} = attributes;
+	const { caption, columns, imageCrop } = attributes;
 
-	const className = `blocks-gallery-grid has-nested-images columns-${ columns } ${
-		imageCrop ? 'is-cropped' : ''
-	}`;
+	const className = classnames( 'blocks-gallery-grid', 'has-nested-images', {
+		[ `columns-${ columns }` ]: columns !== undefined,
+		[ `columns-default` ]: columns === undefined,
+		'is-cropped': imageCrop,
+	} );
 
 	return (
 		<figure { ...useBlockProps.save( { className } ) }>

packages/block-library/src/gallery/style.scss

@@ -158,21 +158,39 @@
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
 				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
-				width: calc(#{100% / $i} - calc(var(--gallery-block--gutter-size, #{$grid-unit-20}) * calc(#{$i - 1}) / #{$i}));
+				width: calc(#{100% / $i} - (var(--gallery-block--gutter-size, #{$grid-unit-20}) * #{$i - 1} / #{$i}));
 			}
 
 			// Prevent collapsing margin while sibling is being dragged.
 			&.columns-#{$i} figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
 				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
 			}
 		}
-
 		// Unset the right margin on every rightmost gallery item to ensure center balance.
 		@for $column-count from 1 through 8 {
 			&.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type(#{ $column-count }n) {
 				margin-right: 0;
 			}
 		}
+		// If number of columns not explicitly set default to 3 columns if 3 or more images.
+		&.columns-default {
+			figure.wp-block-image:not(#individual-image) {
+				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
+				width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * 2 / 3));
+			}
+			figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) {
+				margin-right: 0;
+			}
+			// If only 2 child images use 2 columns.
+			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
+			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
+				width: calc(50% - (var(--gallery-block--gutter-size, 16px) / 2));
+			}
+			// For a single image set to 100%.
+			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
+				width: 100%;
+			}
+		}
 	}
 
 	// Apply max-width to floated items that have no intrinsic width.

packages/block-library/src/gallery/transforms.js

@@ -61,7 +61,6 @@ const transforms = {
 					return createBlock(
 						'core/gallery',
 						{
-							imageCount: innerBlocks.length,
 							align,
 							sizeSlug,
 						},