Add gap support to gallery block

WordPress · Jan 12, 2022 · a691007 · a691007
1 parent 3a99ec3
commit a691007
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 33 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -248,7 +248,7 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres
 
 -	**Name:** core/gallery
 -	**Category:** media
--	**Supports:** align, anchor
+-	**Supports:** align, anchor, spacing (blockGap), units (em, px, rem, vh, vw)
 -	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, shortCodeTransforms, sizeSlug
 
 ## Group

diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -106,7 +106,22 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"units": [ "px", "em", "rem", "vh", "vw" ],
+		"spacing": {
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"allowEditing": false,
+			"default": {
+				"type": "flex"
+			}
+		}
 	},
 	"editorStyle": "wp-block-gallery-editor",
 	"style": "wp-block-gallery"

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -25,7 +25,15 @@ export const Gallery = ( props ) => {
 		blockProps,
 	} = props;
 
-	const { align, columns, caption, imageCrop } = attributes;
+	const {
+		align,
+		columns,
+		caption,
+		imageCrop,
+		style: {
+			spacing: { blockGap },
+		},
+	} = attributes;
 
 	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
 		allowedBlocks,
@@ -67,6 +75,7 @@ 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,23 +3,10 @@
 
 // Styles for current version of gallery block.
 .wp-block-gallery.has-nested-images {
-	display: flex;
-	flex-wrap: wrap;
 	// 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) {
-		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 var(--gallery-block--gutter-size, #{$grid-unit-20}) var(--gallery-block--gutter-size, #{$grid-unit-20}) 0;
-
-		&:last-of-type:not(#individual-image) {
-			margin-right: 0;
-		}
-
 		width: calc(50% - (var(--gallery-block--gutter-size, #{$grid-unit-20}) / 2));
-
-		&:nth-of-type(even) {
-			margin-right: 0;
-		}
 	}
 
 	figure.wp-block-image {
@@ -125,39 +112,23 @@
 	}
 
 	&.columns-1 figure.wp-block-image:not(#individual-image) {
-		margin-right: 0;
 		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) {
-				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
 				width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gutter-size, #{$grid-unit-20}) * #{math.div($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) * #{math.div(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) {