Switch to using css grid so we don't need to recalculate image width …

…based on gap size
WordPress · Jan 12, 2022 · a5f39f7 · a5f39f7
1 parent a691007
commit a5f39f7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 27 deletions.
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -3,21 +3,21 @@ figure.wp-block-gallery {
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358
 
-	display: block;
 	margin: 0;
 	&.has-nested-images {
+		display: grid;
 		.components-drop-zone {
 			display: none;
 			pointer-events: none;
 		}
 	}
 
 	> .blocks-gallery-caption {
-		flex: 0 0 100%;
+		grid-column: 1 / -1;
 	}
 
 	> .blocks-gallery-media-placeholder-wrapper {
-		flex-basis: 100%;
+		grid-column: 1 / -1;
 	}
 
 	.wp-block-image {

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -75,7 +75,6 @@ export const Gallery = ( props ) => {
 					'is-cropped': imageCrop,
 				}
 			) }
-			style={ { '--gallery-block--gutter-size': blockGap } }
 		>
 			{ children }
 

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -3,15 +3,17 @@
 
 // Styles for current version of gallery block.
 .wp-block-gallery.has-nested-images {
+	display: grid;
 	// 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(--gallery-block--gutter-size, #{$grid-unit-20}) / 2));
+		width: 100%;
+    	height: 100%;
+    	object-fit: cover
 	}
 
 	figure.wp-block-image {
 		display: flex;
-		flex-grow: 1;
 		justify-content: center;
 		position: relative;
 		margin-top: auto;
@@ -80,8 +82,10 @@
 
 	// Non cropped images.
 	&:not(.is-cropped) {
-
 		figure.wp-block-image:not(#individual-image) {
+			width: 100%;
+			height: initial;
+			object-fit: initial;
 			margin-top: 0;
 			margin-bottom: auto;
 			img {
@@ -111,33 +115,17 @@
 		}
 	}
 
-	&.columns-1 figure.wp-block-image:not(#individual-image) {
-		width: 100%;
-	}
-
 	// 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(--gallery-block--gutter-size, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
+		@for $i from 1 through 8 {
+			&.columns-#{ $i } {
+				grid-template-columns: repeat($i, 1fr);
 
 			}
 		}
 		// 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(--gallery-block--gutter-size, 16px) * #{math.div(2, 3)}));
-			}
-			// 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) * 0.5));
-			}
-			// For a single image set to 100%.
-			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
-				width: 100%;
-			}
+			grid-template-columns: repeat(3, 1fr);
 		}
 	}