Feat: Add uniform image sizes option to gallery block

WordPress · Jan 10, 2025 · 5bb7dac · 5bb7dac
1 parent f91339e
commit 5bb7dac
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 7 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -342,7 +342,7 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres
 -	**Category:** media
 -	**Allowed Blocks:** core/image
 -	**Supports:** align, anchor, color (background, gradients, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
--	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, randomOrder, shortCodeTransforms, sizeSlug
+-	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, randomOrder, shortCodeTransforms, sizeSlug, uniformImageSizes
 
 ## Group
 

diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -81,6 +81,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"uniformImageSizes": {
+			"type": "boolean",
+			"default": false
+		},
 		"randomOrder": {
 			"type": "boolean",
 			"default": false

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -125,8 +125,15 @@ export default function GalleryEdit( props ) {
 		  )
 		: LINK_OPTIONS;
 
-	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
-		attributes;
+	const {
+		columns,
+		imageCrop,
+		uniformImageSizes,
+		randomOrder,
+		linkTarget,
+		linkTo,
+		sizeSlug,
+	} = attributes;
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -416,6 +423,10 @@ export default function GalleryEdit( props ) {
 		setAttributes( { imageCrop: ! imageCrop } );
 	}
 
+	function toggleUniformImageSizes() {
+		setAttributes( { uniformImageSizes: ! uniformImageSizes } );
+	}
+
 	function toggleRandomOrder() {
 		setAttributes( { randomOrder: ! randomOrder } );
 	}
@@ -609,6 +620,12 @@ export default function GalleryEdit( props ) {
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }
 					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Uniform image sizes' ) }
+						checked={ !! uniformImageSizes }
+						onChange={ toggleUniformImageSizes }
+					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Randomize order' ) }

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -27,7 +27,7 @@ export default function Gallery( props ) {
 		multiGallerySelection,
 	} = props;
 
-	const { align, columns, imageCrop } = attributes;
+	const { align, columns, imageCrop, uniformImageSizes } = attributes;
 
 	return (
 		<figure
@@ -41,6 +41,7 @@ export default function Gallery( props ) {
 					[ `columns-${ columns }` ]: columns !== undefined,
 					[ `columns-default` ]: columns === undefined,
 					'is-cropped': imageCrop,
+					'has-uniform-image-sizes': uniformImageSizes,
 				}
 			) }
 		>

diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
@@ -14,12 +14,13 @@ import {
 } from '@wordpress/block-editor';
 
 export default function saveWithInnerBlocks( { attributes } ) {
-	const { caption, columns, imageCrop } = attributes;
+	const { caption, columns, imageCrop, uniformImageSizes } = attributes;
 
 	const className = clsx( 'has-nested-images', {
 		[ `columns-${ columns }` ]: columns !== undefined,
 		[ `columns-default` ]: columns === undefined,
 		'is-cropped': imageCrop,
+		'has-uniform-image-sizes': uniformImageSizes,
 	} );
 	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -153,9 +153,17 @@ figure.wp-block-gallery.has-nested-images {
 	// Beyond mobile viewports, we allow up to 8 columns.
 	@include break-small {
 		@for $i from 3 through 8 {
-			&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
-				width: calc(#{math.div(100%, $i)} - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
+			$width: calc(#{math.div(100%, $i)} - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
 
+			&:not(.has-uniform-image-sizes) {
+				&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
+					width: $width;
+				}
+			}
+
+			&.has-uniform-image-sizes.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
+				flex: 0 0 $width;
+				max-width: $width;
 			}
 		}
 		// If number of columns not explicitly set default to 3 columns if 3 or more images.