feat: Handle gallery to have more columns than total images

dhananjaykuber · Jan 28, 2025 · 85b39e8 · 85b39e8
1 parent 0a26fe6
commit 85b39e8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -561,7 +561,7 @@ export default function GalleryEdit( props ) {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ images.length > 1 && (
+					{ images.length > 0 && (
 						<RangeControl
 							__nextHasNoMarginBottom
 							label={ __( 'Columns' ) }
@@ -572,7 +572,7 @@ export default function GalleryEdit( props ) {
 							}
 							onChange={ setColumnsNumber }
 							min={ 1 }
-							max={ Math.min( MAX_COLUMNS, images.length ) }
+							max={ Math.min( MAX_COLUMNS ) }
 							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
 							required
 							__next40pxDefaultSize

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -43,6 +43,9 @@ export default function Gallery( props ) {
 					'is-cropped': imageCrop,
 				}
 			) }
+			style={ {
+				'--gallery-columns': columns || 3,
+			} }
 		>
 			{ blockProps.children }
 			{ isSelected && ! blockProps.children && (

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -11,13 +11,13 @@ figure.wp-block-gallery.has-nested-images {
 	// Need bogus :not(#individual-image) to override long :not()
 	// specificity chain on default image block on front end.
 	figure.wp-block-image:not(#individual-image) {
-		width: calc(50% - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) / 2));
+		width: calc((100% - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * (var(--gallery-columns, 2) - 1))) / var(--gallery-columns, 2));
 		margin: 0;
 	}
 
 	figure.wp-block-image {
 		display: flex;
-		flex-grow: 1;
+		flex-grow: 0;
 		justify-content: center;
 		position: relative;
 		flex-direction: column;
@@ -31,7 +31,7 @@ figure.wp-block-gallery.has-nested-images {
 		> a {
 			margin: 0;
 			flex-direction: column;
-			flex-grow: 1;
+			flex-grow: 0;
 		}
 
 		img {
@@ -154,22 +154,21 @@ figure.wp-block-gallery.has-nested-images {
 	@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((100% - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * (#{$i} - 1))) / #{$i});
 			}
 		}
 		// 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) {
-
-				width: calc(33.33% - (var(--wp--style--unstable-gallery-gap, 16px) * #{math.div(2, 3)}));
+				width: calc((100% - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * (var(--gallery-columns, 3) - 1))) / var(--gallery-columns, 3));
 			}
-			// If only 2 child images use 2 columns.
+
+			// Keep existing special cases for 1-2 images
 			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(--wp--style--unstable-gallery-gap, 16px) * 0.5));
+				width: calc(50% - (var(--wp--style--unstable-gallery-gap, #{$grid-unit-20}) * 0.5));
 			}
-			// For a single image set to 100%.
+
 			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
 				width: 100%;
 			}