Automattic · simison · Feb 16, 2020 · Feb 17, 2020 · Feb 17, 2020 · Feb 17, 2020
diff --git a/extensions/blocks/tiled-gallery/constants.js b/extensions/blocks/tiled-gallery/constants.js
@@ -1,6 +1,7 @@
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const DEFAULT_GALLERY_WIDTH = 580;
-export const GUTTER_WIDTH = 4;
+export const DEFAULT_GUTTER = 4;
+export const MAX_GUTTER = 50;
 export const MAX_COLUMNS = 20;
 export const PHOTON_MAX_RESIZE = 2000;
 

diff --git a/extensions/blocks/tiled-gallery/edit.js b/extensions/blocks/tiled-gallery/edit.js
@@ -27,7 +27,7 @@ import {
  */
 import FilterToolbar from './filter-toolbar';
 import Layout from './layout';
-import { ALLOWED_MEDIA_TYPES, LAYOUT_STYLES, MAX_COLUMNS } from './constants';
+import { ALLOWED_MEDIA_TYPES, LAYOUT_STYLES, MAX_COLUMNS, MAX_GUTTER } from './constants';
 import { getActiveStyleName } from '../../shared/block-styles';
 import { icon } from '.';
 import EditButton from '../../shared/edit-button';
@@ -43,6 +43,10 @@ function layoutSupportsColumns( layout ) {
 	return [ 'columns', 'circle', 'square' ].includes( layout );
 }
 
+function layoutSupportsGutter( layout ) {
+	return [ 'columns', 'rectangular' ].includes( layout );
+}
+
 export function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
@@ -130,6 +134,8 @@ class TiledGalleryEdit extends Component {
 
 	setColumnsNumber = value => this.setAttributes( { columns: value } );
 
+	setGutter = value => this.setAttributes( { gutter: value } );
+
 	setImageAttributes = index => attributes => {
 		const {
 			attributes: { images },
@@ -163,6 +169,7 @@ class TiledGalleryEdit extends Component {
 		const {
 			align,
 			columns = defaultColumnsNumber( attributes ),
+			gutter,
 			imageFilter,
 			images,
 			linkTo,
@@ -236,6 +243,15 @@ class TiledGalleryEdit extends Component {
 								max={ Math.min( MAX_COLUMNS, images.length ) }
 							/>
 						) }
+						{ layoutSupportsGutter( layoutStyle ) && images.length > 1 && (
+							<RangeControl
+								label={ __( 'Gutter', 'jetpack' ) }
+								value={ gutter }
+								onChange={ this.setGutter }
+								min={ 0 }
+								max={ MAX_GUTTER }
+							/>
+						) }
 						<SelectControl
 							label={ __( 'Link To', 'jetpack' ) }
 							value={ linkTo }
@@ -251,6 +267,7 @@ class TiledGalleryEdit extends Component {
 					align={ align }
 					className={ className }
 					columns={ columns }
+					gutter={ gutter }
 					imageFilter={ imageFilter }
 					images={ images }
 					layoutStyle={ layoutStyle }

diff --git a/extensions/blocks/tiled-gallery/editor.scss b/extensions/blocks/tiled-gallery/editor.scss
@@ -43,6 +43,7 @@
 
 		&.is-selected {
 			outline: 4px solid $tiled-gallery-selection;
+			z-index: z-index(".block-library-gallery-item__inline-menu");
 
 			// Disable filters when selected
 			filter: none;
@@ -66,7 +67,7 @@
 	}
 
 	.tiled-gallery__add-item {
-		margin-top: $tiled-gallery-gutter;
+		margin-top: $tiled-gallery-default-gutter;
 		width: 100%;
 
 		.components-form-file-upload,
@@ -146,3 +147,18 @@
 		box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important;
 	}
 }
+
+// To save bytes, this is re-generated via PHP for view-side.
+// See Jetpack_Tiled_Gallery_Block class' render method at tiled-gallery.php
+@for $gutter from 0 through $tiled-gallery-max-gutter {
+	.has-gutter-#{$gutter} {
+		.tiled-gallery__item + .tiled-gallery__item,
+		.tiled-gallery__row + .tiled-gallery__row {
+			margin-top: #{$gutter}px;
+		}
+
+		.tiled-gallery__col + .tiled-gallery__col {
+			margin-left: #{$gutter}px;
+		}
+	}
+}
diff --git a/extensions/blocks/tiled-gallery/index.js b/extensions/blocks/tiled-gallery/index.js
@@ -12,6 +12,7 @@ import { Path, SVG } from '@wordpress/components';
 import edit from './edit';
 import save from './save';
 import {
+	DEFAULT_GUTTER,
 	LAYOUT_CIRCLE,
 	LAYOUT_COLUMN,
 	LAYOUT_DEFAULT,
@@ -76,6 +77,10 @@ const blockAttributes = {
 	columns: {
 		type: 'number',
 	},
+	gutter: {
+		default: DEFAULT_GUTTER,
+		type: 'integer',
+	},
 	ids: {
 		default: [],
 		type: 'array',

diff --git a/extensions/blocks/tiled-gallery/layout/index.js b/extensions/blocks/tiled-gallery/layout/index.js
@@ -3,6 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -12,6 +13,7 @@ import GalleryImageSave from '../gallery-image/save';
 import Mosaic from './mosaic';
 import Square from './square';
 import { isSquareishLayout, photonizedImgProps } from '../utils';
+import { DEFAULT_GUTTER } from '../constants';
 
 export default class Layout extends Component {
 	// This is tricky:
@@ -65,17 +67,24 @@ export default class Layout extends Component {
 	}
 
 	render() {
-		const { align, children, className, columns, images, layoutStyle } = this.props;
-
-		const LayoutRenderer = isSquareishLayout( layoutStyle ) ? Square : Mosaic;
-
+		const { align, children, className, columns, gutter, images, layoutStyle } = this.props;
+		const isSquareish = isSquareishLayout( layoutStyle );
+		const LayoutRenderer = isSquareish ? Square : Mosaic;
 		const renderedImages = this.props.images.map( this.renderImage, this );
 
+		// Square & Circle layouts don't support any gutter customizations
+		const hasCustomGutter = gutter !== DEFAULT_GUTTER && ! isSquareish;
+
 		return (
-			<div className={ className }>
+			<div
+				className={ classnames( className, {
+					[ `has-gutter-${ gutter }` ]: hasCustomGutter,
+				} ) }
+			>
 				<LayoutRenderer
 					align={ align }
 					columns={ columns }
+					gutter={ gutter }
 					images={ images }
 					layoutStyle={ layoutStyle }
 					renderedImages={ renderedImages }

diff --git a/extensions/blocks/tiled-gallery/layout/mosaic/index.js b/extensions/blocks/tiled-gallery/layout/mosaic/index.js
@@ -35,14 +35,16 @@ export default class Mosaic extends Component {
 	}
 
 	handleGalleryResize = entries => {
+		const { gutter } = this.props;
+
 		if ( this.pendingRaf ) {
 			cancelAnimationFrame( this.pendingRaf );
 			this.pendingRaf = null;
 		}
 		this.pendingRaf = requestAnimationFrame( () => {
 			for ( const { contentRect, target } of entries ) {
 				const { width } = contentRect;
-				getGalleryRows( target ).forEach( row => handleRowResize( row, width ) );
+				getGalleryRows( target ).forEach( row => handleRowResize( row, width, gutter ) );
 			}
 		} );
 	};

diff --git a/extensions/blocks/tiled-gallery/layout/mosaic/resize.js b/extensions/blocks/tiled-gallery/layout/mosaic/resize.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { GUTTER_WIDTH } from '../../constants';
-
 /**
  * Distribute a difference across ns so that their sum matches the target
  *
@@ -16,8 +11,8 @@ function adjustFit( parts, target ) {
 	return parts.map( p => p + partialDiff );
 }
 
-export function handleRowResize( row, width ) {
-	applyRowRatio( row, getRowRatio( row ), width );
+export function handleRowResize( row, width, gutter ) {
+	applyRowRatio( row, getRowRatio( row ), width, gutter );
 }
 
 function getRowRatio( row ) {
@@ -65,21 +60,22 @@ function getImageRatio( img ) {
 	return result;
 }
 
-function applyRowRatio( row, [ ratio, weightedRatio ], width ) {
+function applyRowRatio( row, [ ratio, weightedRatio ], width, gutter ) {
 	const rawHeight =
-		( 1 / ratio ) * ( width - GUTTER_WIDTH * ( row.childElementCount - 1 ) - weightedRatio );
+		( 1 / ratio ) * ( width - gutter * ( row.childElementCount - 1 ) - weightedRatio );
 
 	applyColRatio( row, {
+		gutter,
 		rawHeight,
-		rowWidth: width - GUTTER_WIDTH * ( row.childElementCount - 1 ),
+		rowWidth: width - gutter * ( row.childElementCount - 1 ),
 	} );
 }
 
-function applyColRatio( row, { rawHeight, rowWidth } ) {
+function applyColRatio( row, { gutter, rawHeight, rowWidth } ) {
 	const cols = getRowCols( row );
 
 	const colWidths = cols.map(
-		col => ( rawHeight - GUTTER_WIDTH * ( col.childElementCount - 1 ) ) * getColumnRatio( col )[ 0 ]
+		col => ( rawHeight - gutter * ( col.childElementCount - 1 ) ) * getColumnRatio( col )[ 0 ]
 	);
 
 	const adjustedWidths = adjustFit( colWidths, rowWidth );
@@ -88,7 +84,7 @@ function applyColRatio( row, { rawHeight, rowWidth } ) {
 		const rawWidth = colWidths[ i ];
 		const width = adjustedWidths[ i ];
 		applyImgRatio( col, {
-			colHeight: rawHeight - GUTTER_WIDTH * ( col.childElementCount - 1 ),
+			colHeight: rawHeight - gutter * ( col.childElementCount - 1 ),
 			width,
 			rawWidth,
 		} );

diff --git a/extensions/blocks/tiled-gallery/save.js b/extensions/blocks/tiled-gallery/save.js
@@ -13,13 +13,20 @@ export default function TiledGallerySave( { attributes } ) {
 		return null;
 	}
 
-	const { align, className, columns = defaultColumnsNumber( attributes ), linkTo } = attributes;
+	const {
+		align,
+		className,
+		columns = defaultColumnsNumber( attributes ),
+		gutter,
+		linkTo,
+	} = attributes;
 
 	return (
 		<Layout
 			align={ align }
 			className={ className }
 			columns={ columns }
+			gutter={ gutter }
 			imageFilter={ imageFilter }
 			images={ images }
 			isSave

diff --git a/extensions/blocks/tiled-gallery/tiled-gallery.php b/extensions/blocks/tiled-gallery/tiled-gallery.php
@@ -18,6 +18,8 @@ class Jetpack_Tiled_Gallery_Block {
 	const IMG_SRCSET_WIDTH_MAX  = 2000;
 	const IMG_SRCSET_WIDTH_MIN  = 600;
 	const IMG_SRCSET_WIDTH_STEP = 300;
+	const DEFAULT_GUTTER        = 4;
+	const DEFAULT_COLUMNS       = 3;
 
 	/**
 	 * Register the block
@@ -50,6 +52,23 @@ public static function render( $attr, $content ) {
 			wp_localize_script( 'jetpack-gallery-settings', 'jetpack_plan', array( 'data' => $jetpack_plan['product_slug'] ) );
 		}
 
+		// Generate styles for non-default gutter.
+		if ( isset( $attr['gutter'] ) && absint( $attr['gutter'] ) !== self::DEFAULT_GUTTER && ! $is_squareish_layout ) {
+			$gutter     = absint( $attr['gutter'] );
+			$css_prefix = '.wp-block-jetpack-tiled-gallery.has-gutter-' . $gutter;
+
+			$gutter_css = sprintf(
+				'
+				%1$s .tiled-gallery__item + .tiled-gallery__item,
+				%1$s .tiled-gallery__row + .tiled-gallery__row { margin-top: %2$dpx; }
+				%1$s .tiled-gallery__col + .tiled-gallery__col { margin-left: %2$dpx; }',
+				$css_prefix,
+				$gutter
+			);
+
+			wp_add_inline_style( 'jetpack-block-tiled-gallery', $gutter_css );
+		}
+
 		if ( preg_match_all( '/<img [^>]+>/', $content, $images ) ) {
 			/**
 			 * This block processes all of the images that are found and builds $find and $replace.

diff --git a/extensions/blocks/tiled-gallery/variables.scss b/extensions/blocks/tiled-gallery/variables.scss
@@ -1,2 +1,2 @@
-$tiled-gallery-gutter: 4px; // Fixed in JS, see `LayoutStyles` from `edit.jsx`
+$tiled-gallery-default-gutter: 4px; // Fixed in JS, see `constants.js`
 $tiled-gallery-selection: #0085ba; // Gutenberg primary theme color (https://github.com/WordPress/gutenberg/blob/6928e41c8afd7daa3a709afdda7eee48218473b7/bin/packages/post-css-config.js#L4)
diff --git a/extensions/blocks/tiled-gallery/view.scss b/extensions/blocks/tiled-gallery/view.scss
@@ -2,7 +2,9 @@
 @import './variables.scss';
 @import './css-gram.scss';
 
+// Fixed in JS, see `constants.js`
 $tiled-gallery-max-column-count: 20;
+$tiled-gallery-max-gutter: 50;
 
 .wp-block-jetpack-tiled-gallery {
 	margin: 0 auto $jetpack-block-margin-bottom;
@@ -20,7 +22,8 @@ $tiled-gallery-max-column-count: 20;
 			@for $cols from 1 through $tiled-gallery-max-column-count {
 				&.columns-#{$cols} {
 					.tiled-gallery__col {
-						width: calc( ( 100% - #{ $tiled-gallery-gutter * ( $cols - 1 ) } ) / #{$cols} );
+						// Note: Square and Circle layouts don't support custom gutter size
+						width: calc( ( 100% - #{ $tiled-gallery-default-gutter * ( $cols - 1 ) } ) / #{$cols} );
 					}
 				}
 			}
@@ -49,9 +52,12 @@ $tiled-gallery-max-column-count: 20;
 	justify-content: center;
 	margin: 0;
 
+	// See also tiled-gallery.php render method if you modify this
+	/*
 	& + & {
-		margin-top: $tiled-gallery-gutter;
+		margin-top: $tiled-gallery-default-gutter;
 	}
+	*/
 }
 
 .tiled-gallery__col {
@@ -60,9 +66,12 @@ $tiled-gallery-max-column-count: 20;
 	justify-content: center;
 	margin: 0;
 
+	// See also tiled-gallery.php render method if you modify this
+	/*
 	& + & {
-		margin-left: $tiled-gallery-gutter;
+		margin-left: $tiled-gallery-default-gutter;
 	}
+	*/
 }
 
 .tiled-gallery__item {
@@ -92,9 +101,12 @@ $tiled-gallery-max-column-count: 20;
 		@include gingham;
 	}
 
+	// See also tiled-gallery.php render method if you modify this
+	/*
 	& + & {
-		margin-top: $tiled-gallery-gutter;
+		margin-top: $tiled-gallery-default-gutter;
 	}
+	*/
 
 	> img {
 		background-color: rgba( 0, 0, 0, 0.1 );
@@ -113,3 +125,13 @@ $tiled-gallery-max-column-count: 20;
 		width: 100%;
 	}
 }
+
+// See also editor.scss for more custom gutter logic
+.tiled-gallery__item + .tiled-gallery__item,
+.tiled-gallery__row + .tiled-gallery__row {
+	margin-top: $tiled-gallery-default-gutter;
+}
+
+.tiled-gallery__col + .tiled-gallery__col {
+	margin-left: $tiled-gallery-default-gutter;
+}