Add custom gutter sizes to refactored gallery (#28377)

WordPress · Mar 4, 2021 · 8fcc77d · 8fcc77d
1 parent 8bbede4
commit 8fcc77d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 15 deletions.
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -52,6 +52,9 @@
 		"imageCount": {
 			"type": "number",
 			"default": 0
+		},
+		"gutterSize": {
+			"type": "number"
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -67,6 +67,10 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( {
 	native: { type: 'stepper' },
 } );
 
+const DEFAULT_GUTTER_SIZE = 16;
+const MAX_GUTTER_SIZE = 100;
+const MIN_GUTTER_SIZE = 0;
+
 function GalleryEdit( props ) {
 	const {
 		setAttributes,
@@ -80,14 +84,15 @@ function GalleryEdit( props ) {
 	} = props;
 
 	const {
+		columns = defaultColumnsNumber( imageCount ),
+		gutterSize,
 		imageCount,
+		imageCrop,
+		imageUploads,
 		linkTarget,
 		linkTo,
-		columns = defaultColumnsNumber( imageCount ),
-		sizeSlug,
-		imageUploads,
 		shortCodeTransforms,
-		imageCrop,
+		sizeSlug,
 	} = attributes;
 
 	const {
@@ -339,6 +344,10 @@ function GalleryEdit( props ) {
 
 	const blockProps = useBlockProps( {
 		className: classnames( className, 'has-nested-images' ),
+		style: {
+			'--gallery-block--gutter-size':
+				gutterSize !== undefined && `${ gutterSize }px`,
+		},
 	} );
 
 	if ( ! hasImages ) {
@@ -363,6 +372,19 @@ function GalleryEdit( props ) {
 							required
 						/>
 					) }
+					<RangeControl
+						label={ __( 'Gutter size' ) }
+						value={ gutterSize }
+						onChange={ ( newGutterSize ) =>
+							setAttributes( { gutterSize: newGutterSize } )
+						}
+						initialPosition={ DEFAULT_GUTTER_SIZE }
+						min={ MIN_GUTTER_SIZE }
+						max={ MAX_GUTTER_SIZE }
+						{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
+						resetFallbackValue={ DEFAULT_GUTTER_SIZE }
+						allowReset
+					/>
 					<ToggleControl
 						label={ __( 'Crop images' ) }
 						checked={ !! imageCrop }

diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
@@ -10,17 +10,24 @@ import { defaultColumnsNumber } from './shared';
 
 export default function save( { attributes } ) {
 	const {
-		imageCount,
+		caption,
 		columns = defaultColumnsNumber( imageCount ),
+		gutterSize,
+		imageCount,
 		imageCrop,
-		caption,
 	} = attributes;
+
 	const className = `blocks-gallery-grid has-nested-images columns-${ columns } ${
 		imageCrop ? 'is-cropped' : ''
 	}`;
 
+	const style = {
+		'--gallery-block--gutter-size':
+			gutterSize !== undefined && `${ gutterSize }px`,
+	};
+
 	return (
-		<figure { ...useBlockProps.save( { className } ) }>
+		<figure { ...useBlockProps.save( { className, style } ) }>
 			<InnerBlocks.Content />
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -9,13 +9,13 @@
 	// 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 $grid-unit-20 $grid-unit-20 0;
+		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% - #{$grid-unit-20});
+		width: calc(50% - var(--gallery-block--gutter-size, #{$grid-unit-20}));
 
 		&:nth-of-type(even) {
 			margin-right: 0;
@@ -112,11 +112,11 @@
 			margin-top: auto;
 			margin-bottom: auto;
 			img {
-				margin-bottom: $grid-unit-20;
+				margin-bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
 			}
 
 			figcaption {
-				bottom: $grid-unit-20;
+				bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
 			}
 		}
 	}
@@ -155,19 +155,19 @@
 	@include break-small {
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
-				margin-right: $grid-unit-20;
-				width: calc(#{100% / $i} - #{$grid-unit-20 * ( $i - 1 ) / $i});
+				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}));
 			}
 
 			// 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: $grid-unit-20;
+				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 ) {
+			&.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type(#{ $column-count }n) {
 				margin-right: 0;
 			}
 		}