Gallery Block: Support gaps that define column/row gaps to avoid PHP …

…Warning/Fatal (#41125) * Gallery Block: Support gaps that define column/row gaps. * Fix a variable typo Co-authored-by: Ramon <[email protected]> * Checking for and using a 'left', or gap column, value if the block support gap value is not a string * Use column gap for CSS variable and combined gap for gap property * Remove unnecessary fallback * Tidy whitespace slightly Co-authored-by: Ramon <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: Andrew Serong <[email protected]>
WordPress · May 19, 2022 · 59f42b3 · 59f42b3
1 parent 11473d0
commit 59f42b3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
@@ -8,12 +8,27 @@ export default function GapStyles( { blockGap, clientId } ) {
 	const styleElement = useContext( BlockList.__unstableElementContext );
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
-	const gapValue = blockGap
-		? blockGap
-		: `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
-	const gap = `#block-${ clientId } { 
-		--wp--style--unstable-gallery-gap: ${ gapValue };
-		gap: ${ gapValue } 
+	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	let gapValue = fallbackValue;
+	let column = fallbackValue;
+	let row;
+
+	// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736
+	if ( !! blockGap ) {
+		row =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.top || fallbackValue;
+		column =
+			typeof blockGap === 'string'
+				? blockGap
+				: blockGap?.left || fallbackValue;
+		gapValue = row === column ? row : `${ row } ${ column }`;
+	}
+
+	const gap = `#block-${ clientId } {
+		--wp--style--unstable-gallery-gap: ${ column };
+		gap: ${ gapValue }
 	}`;
 
 	const GapStyle = () => {

diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
@@ -48,18 +48,37 @@ function block_core_gallery_render( $attributes, $content ) {
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
 	// because we only want to match against the value, not the CSS attribute.
-	$gap     = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	if ( is_array( $gap ) ) {
+		foreach ( $gap as $key => $value ) {
+			$gap[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
+		}
+	} else {
+		$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	}
+
 	$class   = wp_unique_id( 'wp-block-gallery-' );
 	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
 		'class="' . $class . ' ',
 		$content,
 		1
 	);
+
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
-	$gap_value = $gap ? $gap : 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
-	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; gap: ' . $gap_value . '}';
+	$fallback_gap = 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
+	$gap_value    = $gap ? $gap : $fallback_gap;
+	$gap_column   = $gap_value;
+
+	if ( is_array( $gap_value ) ) {
+		$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap;
+		$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap;
+		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+	}
+
+	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
+	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+
 	// Ideally styles should be loaded in the head, but blocks may be parsed
 	// after that, so loading in the footer for now.
 	// See https://core.trac.wordpress.org/ticket/53494.