From e06e1def0d2733449d1d37b5ade99e503d48ed6b Mon Sep 17 00:00:00 2001
From: Dion Hulse <dion@wordpress.org>
Date: Wed, 18 May 2022 15:55:35 +1000
Subject: [PATCH 1/6] Gallery Block: Support gaps that define column/row gaps.

---
 packages/block-library/src/gallery/index.php | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index 649a8bf5e77bec..43a9df29c312d9 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -48,7 +48,14 @@ 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_value && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	}
+
 	$class   = wp_unique_id( 'wp-block-gallery-' );
 	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
@@ -56,10 +63,17 @@ function block_core_gallery_render( $attributes, $content ) {
 		$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 . '}';
+	if ( is_array( $gap_value ) ) {
+		$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : '0.5em';
+		$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
+		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+	}
+
+	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; 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.

From 8f5f15647f45e2df4f904a5e88b1e26c4f84a703 Mon Sep 17 00:00:00 2001
From: Dion Hulse <dion@wordpress.org>
Date: Thu, 19 May 2022 12:28:32 +1000
Subject: [PATCH 2/6] Fix a variable typo

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
---
 packages/block-library/src/gallery/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index 43a9df29c312d9..3861e1c6b82c0d 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -53,7 +53,7 @@ function block_core_gallery_render( $attributes, $content ) {
 			$gap[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
 		}
 	} else {
-		$gap = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+		$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
 	}
 
 	$class   = wp_unique_id( 'wp-block-gallery-' );

From 8599cb63708d9e59e9b26791bb8ffcb5dfdc0bd1 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 19 May 2022 13:22:28 +1000
Subject: [PATCH 3/6] Checking for and using a 'left', or gap column, value if
 the block support gap value is not a string

---
 packages/block-library/src/gallery/gap-styles.js | 8 +++++---
 packages/block-library/src/gallery/index.php     | 5 ++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
index d7ef149d0dbe15..36a72af52d4a7a 100644
--- a/packages/block-library/src/gallery/gap-styles.js
+++ b/packages/block-library/src/gallery/gap-styles.js
@@ -8,9 +8,11 @@ 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 ) ) )`;
+	let gapValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736
+	if ( !! blockGap ) {
+		gapValue = typeof blockGap === 'string' ? blockGap : blockGap?.left;
+	}
 	const gap = `#block-${ clientId } { 
 		--wp--style--unstable-gallery-gap: ${ gapValue };
 		gap: ${ gapValue } 
diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index 3861e1c6b82c0d..398185a0217505 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -67,10 +67,9 @@ function block_core_gallery_render( $attributes, $content ) {
 	// --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 ) ) )';
+
 	if ( is_array( $gap_value ) ) {
-		$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : '0.5em';
-		$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
-		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+		$gap_value = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
 	}
 
 	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; gap: ' . $gap_value . '}';

From 46a7e40aec44d83a2135e2c0cf6cd39e1df7dc87 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 19 May 2022 16:12:55 +1000
Subject: [PATCH 4/6] Use column gap for CSS variable and combined gap for gap
 property

---
 .../block-library/src/gallery/gap-styles.js   | 24 +++++++++++++++----
 packages/block-library/src/gallery/index.php  | 12 +++++++---
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
index 36a72af52d4a7a..280e9a7e905327 100644
--- a/packages/block-library/src/gallery/gap-styles.js
+++ b/packages/block-library/src/gallery/gap-styles.js
@@ -8,14 +8,28 @@ 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.
-	let gapValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	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 ) {
-		gapValue = typeof blockGap === 'string' ? blockGap : blockGap?.left;
+		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: ${ gapValue };
-		gap: ${ gapValue } 
+
+	const gap = `#block-${ clientId } {
+		--wp--style--unstable-gallery-gap: ${ column || fallbackValue };
+		gap: ${ gapValue || fallbackValue }
 	}`;
 
 	const GapStyle = () => {
diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index 398185a0217505..4aed9cfed051b5 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -66,13 +66,19 @@ function block_core_gallery_render( $attributes, $content ) {
 
 	// --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 ) ) )';
+	$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_value = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
+		$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;
 	}
 
-	$style = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; gap: ' . $gap_value . '}';
+	// 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.

From 19eedef7e4c9d9b34d446e336e3cadc03bd36583 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 19 May 2022 16:29:49 +1000
Subject: [PATCH 5/6] Remove unnecessary fallback

---
 packages/block-library/src/gallery/gap-styles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
index 280e9a7e905327..1e280c44a72ac5 100644
--- a/packages/block-library/src/gallery/gap-styles.js
+++ b/packages/block-library/src/gallery/gap-styles.js
@@ -28,8 +28,8 @@ export default function GapStyles( { blockGap, clientId } ) {
 	}
 
 	const gap = `#block-${ clientId } {
-		--wp--style--unstable-gallery-gap: ${ column || fallbackValue };
-		gap: ${ gapValue || fallbackValue }
+		--wp--style--unstable-gallery-gap: ${ column };
+		gap: ${ gapValue }
 	}`;
 
 	const GapStyle = () => {

From 1e5fadf73e40a194f448f04931c1a92418f5a4cd Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 19 May 2022 16:30:44 +1000
Subject: [PATCH 6/6] Tidy whitespace slightly

---
 packages/block-library/src/gallery/gap-styles.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
index 1e280c44a72ac5..9c5b217d18ba94 100644
--- a/packages/block-library/src/gallery/gap-styles.js
+++ b/packages/block-library/src/gallery/gap-styles.js
@@ -9,7 +9,6 @@ export default function GapStyles( { blockGap, clientId } ) {
 	// --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 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;