From 533b91583dc60a21a25dcad5e47eafb340118b92 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 8 Oct 2021 15:58:47 +1100
Subject: [PATCH 1/9] initial commit

---
 packages/block-editor/src/hooks/gap.js | 27 ++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index 13b41c606049c..de95805f69aa3 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -6,7 +6,7 @@ import { Platform } from '@wordpress/element';
 import { getBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalUnitControl as UnitControl,
+	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 
 /**
@@ -14,7 +14,7 @@ import {
  */
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 import useSetting from '../components/use-setting';
-import { SPACING_SUPPORT_KEY } from './dimensions';
+import { AXIAL_SIDES, SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
 import { cleanEmptyObject } from './utils';
 
 /**
@@ -82,6 +82,7 @@ export function GapEdit( props ) {
 	const {
 		clientId,
 		attributes: { style },
+		name: blockName,
 		setAttributes,
 	} = props;
 
@@ -95,6 +96,7 @@ export function GapEdit( props ) {
 		],
 	} );
 
+	const sides = useCustomSides( blockName, 'blockGap' );
 	const ref = useBlockRef( clientId );
 
 	if ( useIsGapDisabled( props ) ) {
@@ -102,11 +104,12 @@ export function GapEdit( props ) {
 	}
 
 	const onChange = ( next ) => {
+		const newValue = `${ next?.top } ${ next?.left }`;
 		const newStyle = {
 			...style,
 			spacing: {
 				...style?.spacing,
-				blockGap: next,
+				blockGap: newValue,
 			},
 		};
 
@@ -128,16 +131,28 @@ export function GapEdit( props ) {
 		}
 	};
 
+	const blockGapValue = style?.spacing?.blockGap;
+	const splitOnAxis =
+		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const splitValues = blockGapValue ? blockGapValue.split( ' ' ) : [];
+	const boxValues = {
+		top: splitValues[ 0 ],
+		right: splitValues[ 1 ],
+		bottom: splitValues[ 0 ],
+		left: splitValues[ 1 ],
+	};
+
 	return Platform.select( {
 		web: (
 			<>
-				<UnitControl
+				<BoxControl
 					label={ __( 'Block spacing' ) }
-					__unstableInputWidth="80px"
 					min={ 0 }
 					onChange={ onChange }
 					units={ units }
-					value={ style?.spacing?.blockGap }
+					values={ boxValues }
+					allowReset={ false }
+					splitOnAxis={ splitOnAxis }
 				/>
 			</>
 		),

From 803145be8f56f6bc98ad72f9d2d2a364bb6edf2d Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 8 Oct 2021 19:02:52 +1100
Subject: [PATCH 2/9] Don't ever merge this commit. Ever. What ever you do.

---
 lib/block-supports/layout.php                 |  6 +-
 lib/block-supports/spacing.php                | 44 +++++++++++--
 .../class-wp-theme-json-gutenberg.php         | 66 ++++++++++---------
 packages/block-editor/src/hooks/gap.js        | 64 ++++++++++++------
 packages/block-editor/src/layouts/flex.js     |  4 +-
 packages/block-editor/src/layouts/flow.js     |  2 +-
 .../block-library/src/columns/editor.scss     |  4 +-
 packages/block-library/src/columns/style.scss |  8 +--
 .../block-library/src/social-links/block.json |  2 +-
 packages/blocks/src/api/constants.js          |  4 ++
 .../src/components/visual-editor/style.scss   |  2 +-
 .../global-styles/dimensions-panel.js         |  2 +-
 .../test/use-global-styles-output.js          |  2 +-
 .../global-styles/use-global-styles-output.js |  2 +-
 14 files changed, 137 insertions(+), 75 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index cfbe75e77e1e2..6fdc216d1988f 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -66,7 +66,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		$style .= "$selector .alignright { float: right; margin-left: 2em; }";
 		if ( $has_block_gap_support ) {
 			$style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
-			$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
+			$style .= "$selector > * + * { margin-top: var( --wp--style--block-row-gap ); margin-bottom: 0; }";
 		}
 	} elseif ( 'flex' === $layout_type ) {
 		$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';
@@ -89,9 +89,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		$style  = "$selector {";
 		$style .= 'display: flex;';
 		if ( $has_block_gap_support ) {
-			$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
+			$style .= 'gap: var( --wp--style--block-row-gap, 0.5em ) var( --wp--style--block-column-gap, 0.5em );';
 		} else {
-			$style .= 'gap: 0.5em;';
+			$style .= 'gap: 0.5em 0.5em;';
 		}
 		$style .= "flex-wrap: $flex_wrap;";
 		if ( 'horizontal' === $layout_orientation ) {
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index ca7b77f43864b..3c1a789d1f95b 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -107,18 +107,48 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 	}
 
 	$gap_value = $block['attrs']['style']['spacing']['blockGap'];
+	$styles = [];
+	if ( is_array( $gap_value ) ) {
+
+		// This is messy I know.. just testing
+		if (
+			preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) &&
+			preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] )
+		) {
+			$styles[] = sprintf( '--wp--style--block-gap: %s %s', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
+		}
+
+		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] ) ) {
+			$styles[] = sprintf( '--wp--style--block-row-gap: %s', esc_attr( $gap_value['row'] ) );
+		}
+
+		if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) ) {
+			$styles[] = sprintf( '--wp--style--block-column-gap: %s', esc_attr( $gap_value['column'] ) );
+		}
+
+	} else {
+
+		if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
+			$styles[] = sprintf( '--wp--style--block-gap: %s %s', esc_attr( $gap_value ), esc_attr( $gap_value ) );
+			$styles[] = sprintf( '--wp--style--block-row-gap: %s', esc_attr( $gap_value ) );
+			$styles[] = sprintf( '--wp--style--block-column-gap: %s', esc_attr( $gap_value ) );
+		}
+
+	}
 
 	// 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.
-	if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
-		return $block_content;
-	}
+//	if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
+//		return $block_content;
+//	}
 
-	$style = sprintf(
-		'--wp--style--block-gap: %s',
-		esc_attr( $gap_value )
-	);
+//	$style = sprintf(
+//		'--wp--style--block-gap: %s',
+//		esc_attr( $gap_value )
+//	);
+
+	$style = implode( ' ', $styles );
 
 	// Attempt to update an existing style attribute on the wrapper element.
 	$injected_style = preg_replace(
diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
index 0ae828ac5c9f5..93bb1ba877f38 100644
--- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
+++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
@@ -147,37 +147,39 @@ class WP_Theme_JSON_Gutenberg {
 	 * path to the value in theme.json & block attributes.
 	 */
 	const PROPERTIES_METADATA = array(
-		'background'                 => array( 'color', 'gradient' ),
-		'background-color'           => array( 'color', 'background' ),
-		'border-radius'              => array( 'border', 'radius' ),
-		'border-top-left-radius'     => array( 'border', 'radius', 'topLeft' ),
-		'border-top-right-radius'    => array( 'border', 'radius', 'topRight' ),
-		'border-bottom-left-radius'  => array( 'border', 'radius', 'bottomLeft' ),
-		'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
-		'border-color'               => array( 'border', 'color' ),
-		'border-width'               => array( 'border', 'width' ),
-		'border-style'               => array( 'border', 'style' ),
-		'color'                      => array( 'color', 'text' ),
-		'font-family'                => array( 'typography', 'fontFamily' ),
-		'font-size'                  => array( 'typography', 'fontSize' ),
-		'font-style'                 => array( 'typography', 'fontStyle' ),
-		'font-weight'                => array( 'typography', 'fontWeight' ),
-		'letter-spacing'             => array( 'typography', 'letterSpacing' ),
-		'line-height'                => array( 'typography', 'lineHeight' ),
-		'margin'                     => array( 'spacing', 'margin' ),
-		'margin-top'                 => array( 'spacing', 'margin', 'top' ),
-		'margin-right'               => array( 'spacing', 'margin', 'right' ),
-		'margin-bottom'              => array( 'spacing', 'margin', 'bottom' ),
-		'margin-left'                => array( 'spacing', 'margin', 'left' ),
-		'padding'                    => array( 'spacing', 'padding' ),
-		'padding-top'                => array( 'spacing', 'padding', 'top' ),
-		'padding-right'              => array( 'spacing', 'padding', 'right' ),
-		'padding-bottom'             => array( 'spacing', 'padding', 'bottom' ),
-		'padding-left'               => array( 'spacing', 'padding', 'left' ),
-		'--wp--style--block-gap'     => array( 'spacing', 'blockGap' ),
-		'text-decoration'            => array( 'typography', 'textDecoration' ),
-		'text-transform'             => array( 'typography', 'textTransform' ),
-		'filter'                     => array( 'filter', 'duotone' ),
+		'background'                    => array( 'color', 'gradient' ),
+		'background-color'              => array( 'color', 'background' ),
+		'border-radius'                 => array( 'border', 'radius' ),
+		'border-top-left-radius'        => array( 'border', 'radius', 'topLeft' ),
+		'border-top-right-radius'       => array( 'border', 'radius', 'topRight' ),
+		'border-bottom-left-radius'     => array( 'border', 'radius', 'bottomLeft' ),
+		'border-bottom-right-radius'    => array( 'border', 'radius', 'bottomRight' ),
+		'border-color'                  => array( 'border', 'color' ),
+		'border-width'                  => array( 'border', 'width' ),
+		'border-style'                  => array( 'border', 'style' ),
+		'color'                         => array( 'color', 'text' ),
+		'font-family'                   => array( 'typography', 'fontFamily' ),
+		'font-size'                     => array( 'typography', 'fontSize' ),
+		'font-style'                    => array( 'typography', 'fontStyle' ),
+		'font-weight'                   => array( 'typography', 'fontWeight' ),
+		'letter-spacing'                => array( 'typography', 'letterSpacing' ),
+		'line-height'                   => array( 'typography', 'lineHeight' ),
+		'margin'                        => array( 'spacing', 'margin' ),
+		'margin-top'                    => array( 'spacing', 'margin', 'top' ),
+		'margin-right'                  => array( 'spacing', 'margin', 'right' ),
+		'margin-bottom'                 => array( 'spacing', 'margin', 'bottom' ),
+		'margin-left'                   => array( 'spacing', 'margin', 'left' ),
+		'padding'                       => array( 'spacing', 'padding' ),
+		'padding-top'                   => array( 'spacing', 'padding', 'top' ),
+		'padding-right'                 => array( 'spacing', 'padding', 'right' ),
+		'padding-bottom'                => array( 'spacing', 'padding', 'bottom' ),
+		'padding-left'                  => array( 'spacing', 'padding', 'left' ),
+		'--wp--style--block-gap'        => array( 'spacing', 'blockGap' ),
+		'--wp--style--block-row-gap'    => array( 'spacing', 'blockGap', 'row'),
+		'--wp--style--block-column-gap' => array( 'spacing', 'blockGap', 'column' ),
+		'text-decoration'               => array( 'typography', 'textDecoration' ),
+		'text-transform'                => array( 'typography', 'textTransform' ),
+		'filter'                        => array( 'filter', 'duotone' ),
 	);
 
 	/**
@@ -743,7 +745,7 @@ private function get_block_classes( $style_nodes ) {
 				$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
 				if ( $has_block_gap_support ) {
 					$block_rules .= '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }';
-					$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }';
+					$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }';
 				}
 			}
 		}
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index de95805f69aa3..4cfbd3c86f498 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isObject } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -7,6 +12,7 @@ import { getBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
+	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 
 /**
@@ -97,6 +103,8 @@ export function GapEdit( props ) {
 	} );
 
 	const sides = useCustomSides( blockName, 'blockGap' );
+	const splitOnAxis =
+		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const ref = useBlockRef( clientId );
 
 	if ( useIsGapDisabled( props ) ) {
@@ -104,12 +112,22 @@ export function GapEdit( props ) {
 	}
 
 	const onChange = ( next ) => {
-		const newValue = `${ next?.top } ${ next?.left }`;
+		// TODO: make this less bad
+		if ( ! isObject( next ) ) {
+			next = {
+				top: next,
+				left: next,
+			};
+		}
+
 		const newStyle = {
 			...style,
 			spacing: {
 				...style?.spacing,
-				blockGap: newValue,
+				blockGap: {
+					row: next?.top,
+					column: next?.left,
+				},
 			},
 		};
 
@@ -131,29 +149,37 @@ export function GapEdit( props ) {
 		}
 	};
 
-	const blockGapValue = style?.spacing?.blockGap;
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-	const splitValues = blockGapValue ? blockGapValue.split( ' ' ) : [];
 	const boxValues = {
-		top: splitValues[ 0 ],
-		right: splitValues[ 1 ],
-		bottom: splitValues[ 0 ],
-		left: splitValues[ 1 ],
+		top: style?.spacing?.blockGap?.row,
+		right: style?.spacing?.blockGap?.column,
+		bottom: style?.spacing?.blockGap?.row,
+		left: style?.spacing?.blockGap?.column,
 	};
 
 	return Platform.select( {
 		web: (
 			<>
-				<BoxControl
-					label={ __( 'Block spacing' ) }
-					min={ 0 }
-					onChange={ onChange }
-					units={ units }
-					values={ boxValues }
-					allowReset={ false }
-					splitOnAxis={ splitOnAxis }
-				/>
+				{ splitOnAxis ? (
+					<BoxControl
+						label={ __( 'Block spacing' ) }
+						min={ 0 }
+						onChange={ onChange }
+						units={ units }
+						sides={ sides }
+						values={ boxValues }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) : (
+					<UnitControl
+						label={ __( 'Block spacing' ) }
+						__unstableInputWidth="80px"
+						min={ 0 }
+						onChange={ onChange }
+						units={ units }
+						value={ style?.spacing?.blockGap }
+					/>
+				) }
 			</>
 		),
 		native: null,
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 968e7694db634..e8c4e363e7a67 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -133,8 +133,8 @@ export default {
 					display: flex;
 					gap: ${
 						hasBlockGapStylesSupport
-							? 'var( --wp--style--block-gap, 0.5em )'
-							: '0.5em'
+							? 'var( --wp--style--block-row-gap, 0.5em ) var( --wp--style--block-column-gap, 0.5em )'
+							: '0.5em 0.5em'
 					};
 					flex-wrap: ${ flexWrap };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index fd83cf822c3e9..b4997b289c496 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -149,7 +149,7 @@ export default {
 					margin-bottom: 0;
 				}
 				${ appendSelectors( selector, '> * + *' ) } {
-					margin-top: var( --wp--style--block-gap );
+					margin-top: var( --wp--style--block-column-gap );
 				}
 			`;
 		}
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 66a0bd337175e..674cf2fd72dd0 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -12,14 +12,14 @@
 @include break-small() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: var(--wp--style--block-gap, 2em);
+		margin-left: var(--wp--style--block-column-gap, 2em);
 	}
 }
 
 @include break-medium() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: var(--wp--style--block-gap, 2em);
+		margin-left: var(--wp--style--block-column-gap, 2em);
 	}
 }
 
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 8bf22d8847e21..e48601a34577c 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -43,14 +43,14 @@
 				// As with mobile styles, this must be important since the Column
 				// assigns its own width as an inline style, which should take effect
 				// starting at `break-medium`.
-				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
+				flex-basis: calc(50% - calc(var(--wp--style--block-column-gap, 2em) / 2)) !important;
 				flex-grow: 0;
 			}
 
 			// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 			&:nth-child(even) {
-				margin-left: var(--wp--style--block-gap, 2em);
+				margin-left: var(--wp--style--block-column-gap, 2em);
 			}
 		}
 
@@ -74,7 +74,7 @@
 
 			// When columns are in a single row, add space before all except the first.
 			&:not(:first-child) {
-				margin-left: var(--wp--style--block-gap, 2em);
+				margin-left: var(--wp--style--block-column-gap, 2em);
 			}
 		}
 	}
@@ -95,7 +95,7 @@
 
 			// When columns are in a single row, add space before all except the first.
 			&:not(:first-child) {
-				margin-left: var(--wp--style--block-gap, 2em);
+				margin-left: var(--wp--style--block-column-gap, 2em);
 			}
 		}
 	}
diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
index 3752c981e30ad..3d556a4e2a673 100644
--- a/packages/block-library/src/social-links/block.json
+++ b/packages/block-library/src/social-links/block.json
@@ -51,7 +51,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"margin": [ "top", "bottom" ],
 			"units": [ "px", "em", "rem", "vh", "vw" ],
 			"__experimentalDefaultControls": {
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 674caea6af4c9..9ea18fef3b5ba 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -115,6 +115,10 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	'--wp--style--block-gap': {
 		value: [ 'spacing', 'blockGap' ],
 		support: [ 'spacing', 'blockGap' ],
+		properties: {
+			'--wp--style--block-column-gap': 'column',
+			'--wp--style--block-row-gap': 'row',
+		},
 	},
 };
 
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 12ba75023d965..5e54bc9165c3d 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -46,7 +46,7 @@
 
 	// Add extra margin at the top, to push down the Title area in the post editor.
 	margin-top: 4rem;
-	margin-bottom: var(--wp--style--block-gap);
+	margin-bottom: var(--wp--style--block-row-gap);
 }
 
 .edit-post-visual-editor__exit-template-mode {
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index db628050f0b47..1b651b597fb09 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -44,7 +44,7 @@ function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
 
-	return settings && supports.includes( '--wp--style--block-gap' );
+	return settings && supports.includes( '--wp--style--block' );
 }
 
 function filterValuesBySides( values, sides ) {
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index 7433074da3bf6..5d24e753052b1 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -371,7 +371,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 	} );
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index b3ca7bd9ba016..571dfb3758a72 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -318,7 +318,7 @@ export const toStyles = ( tree, blockSelectors ) => {
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 
 	let ruleset =
-		'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }';
+		'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }';
 	nodesWithStyles.forEach( ( { selector, styles } ) => {
 		const declarations = getStylesDeclarations( styles );
 		if ( declarations.length === 0 ) {

From a32c70f150d1f98add721e273459e58b41ccaf67 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 8 Oct 2021 19:16:01 +1100
Subject: [PATCH 3/9] Forgot stuff

---
 lib/block-supports/spacing.php | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 3c1a789d1f95b..4b7f2ba483848 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -107,31 +107,32 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 	}
 
 	$gap_value = $block['attrs']['style']['spacing']['blockGap'];
+	var_dump($gap_value);
 	$styles = [];
 	if ( is_array( $gap_value ) ) {
 
 		// This is messy I know.. just testing
 		if (
-			preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) &&
-			preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] )
+			! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) &&
+			! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] )
 		) {
-			$styles[] = sprintf( '--wp--style--block-gap: %s %s', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
+			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
 		}
 
 		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] ) ) {
-			$styles[] = sprintf( '--wp--style--block-row-gap: %s', esc_attr( $gap_value['row'] ) );
+			$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value['row'] ) );
 		}
 
-		if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) ) {
-			$styles[] = sprintf( '--wp--style--block-column-gap: %s', esc_attr( $gap_value['column'] ) );
+		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) ) {
+			$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value['column'] ) );
 		}
 
 	} else {
 
-		if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
-			$styles[] = sprintf( '--wp--style--block-gap: %s %s', esc_attr( $gap_value ), esc_attr( $gap_value ) );
-			$styles[] = sprintf( '--wp--style--block-row-gap: %s', esc_attr( $gap_value ) );
-			$styles[] = sprintf( '--wp--style--block-column-gap: %s', esc_attr( $gap_value ) );
+		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
+			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
+			$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
+			$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );
 		}
 
 	}
@@ -150,6 +151,7 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 
 	$style = implode( ' ', $styles );
 
+
 	// Attempt to update an existing style attribute on the wrapper element.
 	$injected_style = preg_replace(
 		'/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',

From e70101620a7008b6bbc82d2e0ca2650e5fa681fb Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 26 Oct 2021 16:31:06 +1100
Subject: [PATCH 4/9] Remove var_dump YOLO

---
 lib/block-supports/spacing.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 4b7f2ba483848..03449b4c20987 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -107,7 +107,7 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 	}
 
 	$gap_value = $block['attrs']['style']['spacing']['blockGap'];
-	var_dump($gap_value);
+
 	$styles = [];
 	if ( is_array( $gap_value ) ) {
 

From 7a04adbe43a5d7c5a3a57ebc485950ebc2c2d3dd Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 26 Oct 2021 18:00:29 +1100
Subject: [PATCH 5/9] Cleaning up. Using single row value where blockGap isn't
 split.

---
 lib/block-supports/spacing.php         | 38 ++++++++++++++------------
 packages/block-editor/src/hooks/gap.js | 21 ++++----------
 2 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 03449b4c20987..290591c83d416 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -111,38 +111,40 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 	$styles = [];
 	if ( is_array( $gap_value ) ) {
 
-		// This is messy I know.. just testing
-		if (
-			! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) &&
-			! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] )
-		) {
+		// 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_row_value_is_valid    = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] );
+		$gap_column_value_is_valid = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] );
+
+
+		if ( $gap_row_value_is_valid && $gap_column_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
 		}
 
-		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] ) ) {
+		if ( $gap_row_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value['row'] ) );
 		}
 
-		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] ) ) {
+		if ( $gap_column_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value['column'] ) );
 		}
 
 	} else {
-
-		if ( ! preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
-			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
-			$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
-			$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );
+		// 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.
+		if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
+			return $block_content;
 		}
 
+		$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
+		$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
+		$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );
+
 	}
 
-	// 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.
-//	if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
-//		return $block_content;
-//	}
+
 
 //	$style = sprintf(
 //		'--wp--style--block-gap: %s',
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index 4cfbd3c86f498..02f100d2f7b5c 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isObject } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -112,21 +107,16 @@ export function GapEdit( props ) {
 	}
 
 	const onChange = ( next ) => {
-		// TODO: make this less bad
-		if ( ! isObject( next ) ) {
-			next = {
-				top: next,
-				left: next,
-			};
-		}
+		const row = next?.top ?? next;
+		const column = next?.left ?? next;
 
 		const newStyle = {
 			...style,
 			spacing: {
 				...style?.spacing,
 				blockGap: {
-					row: next?.top,
-					column: next?.left,
+					row,
+					column,
 				},
 			},
 		};
@@ -177,7 +167,8 @@ export function GapEdit( props ) {
 						min={ 0 }
 						onChange={ onChange }
 						units={ units }
-						value={ style?.spacing?.blockGap }
+						// Default to `row` for combined values.
+						value={ style?.spacing?.blockGap?.row }
 					/>
 				) }
 			</>

From 84b8bcd3b6c5252fa3defdae3e9d9b02b4c80754 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 8 Nov 2021 10:25:26 +1100
Subject: [PATCH 6/9] Cleaning up the regex, rebase for theme.json v2 updating
 php unit tests adding axial tests replacing block usages of block gap var
 with equivalent axial var

Update packages/block-library/src/button/style.scss

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
---
 lib/block-supports/spacing.php                | 33 +++------
 .../class-wp-theme-json-gutenberg.php         |  2 +-
 .../src/default-editor-styles.scss            |  2 +
 packages/block-library/src/button/style.scss  |  6 +-
 .../block-library/src/navigation/style.scss   |  2 +-
 phpunit/block-supports/spacing-test.php       | 69 +++++++++++++++++--
 phpunit/class-wp-theme-json-test.php          |  4 +-
 7 files changed, 81 insertions(+), 37 deletions(-)

diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 290591c83d416..0d2e18230d1e0 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -108,15 +108,15 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 
 	$gap_value = $block['attrs']['style']['spacing']['blockGap'];
 
-	$styles = [];
-	if ( is_array( $gap_value ) ) {
-
-		// 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_row_value_is_valid    = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['row'] );
-		$gap_column_value_is_valid = ! preg_match( '%[\\\(&=}]|/\*%', $gap_value['column'] );
+	// Regex to test CSS gap value for unsupported characters.
+	// Borrowed from `safecss_filter_attr`, and used here
+	// because we only want to match against the value, not the CSS attribute.
+	$regex_pattern = '%[\\\(&=}]|/\*%';
+	$styles        = array();
 
+	if ( is_array( $gap_value ) ) {
+		$gap_row_value_is_valid    = isset( $gap_value['row'] ) && ! preg_match( $regex_pattern, $gap_value['row'] );
+		$gap_column_value_is_valid = isset( $gap_value['column'] ) && ! preg_match( $regex_pattern, $gap_value['column'] );
 
 		if ( $gap_row_value_is_valid && $gap_column_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
@@ -129,35 +129,22 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 		if ( $gap_column_value_is_valid ) {
 			$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value['column'] ) );
 		}
-
 	} else {
-		// 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.
-		if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) {
+		if ( preg_match( $regex_pattern, $gap_value ) ) {
 			return $block_content;
 		}
 
 		$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
 		$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
 		$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );
-
 	}
 
-
-
-//	$style = sprintf(
-//		'--wp--style--block-gap: %s',
-//		esc_attr( $gap_value )
-//	);
-
 	$style = implode( ' ', $styles );
 
-
 	// Attempt to update an existing style attribute on the wrapper element.
 	$injected_style = preg_replace(
 		'/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
-		'$1$2' . $style . '; ',
+		'$1$2' . $style . ' ',
 		$block_content,
 		1
 	);
diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
index 93bb1ba877f38..affd1bfc647de 100644
--- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
+++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
@@ -175,7 +175,7 @@ class WP_Theme_JSON_Gutenberg {
 		'padding-bottom'                => array( 'spacing', 'padding', 'bottom' ),
 		'padding-left'                  => array( 'spacing', 'padding', 'left' ),
 		'--wp--style--block-gap'        => array( 'spacing', 'blockGap' ),
-		'--wp--style--block-row-gap'    => array( 'spacing', 'blockGap', 'row'),
+		'--wp--style--block-row-gap'    => array( 'spacing', 'blockGap', 'row' ),
 		'--wp--style--block-column-gap' => array( 'spacing', 'blockGap', 'column' ),
 		'text-decoration'               => array( 'typography', 'textDecoration' ),
 		'text-transform'                => array( 'typography', 'textTransform' ),
diff --git a/packages/block-editor/src/default-editor-styles.scss b/packages/block-editor/src/default-editor-styles.scss
index e63291a30d7d1..9245add81186b 100644
--- a/packages/block-editor/src/default-editor-styles.scss
+++ b/packages/block-editor/src/default-editor-styles.scss
@@ -10,6 +10,8 @@ body {
 	font-size: 18px;
 	line-height: 1.5;
 	--wp--style--block-gap: 2em;
+	--wp--style--block-row-gap: 2em;
+	--wp--style--block-column-gap: 2em;
 }
 
 p {
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index f03929b0ebfb7..45948b76725f8 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -50,15 +50,15 @@ $blocks-block__margin: 0.5em;
 	}
 
 	&.wp-block-button__width-25 {
-		width: calc(25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75));
+		width: calc(25% - (var(--wp--style--block-column-gap, #{$blocks-block__margin}) * 0.75));
 	}
 
 	&.wp-block-button__width-50 {
-		width: calc(50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5));
+		width: calc(50% - (var(--wp--style--block-column-gap, #{$blocks-block__margin}) * 0.5));
 	}
 
 	&.wp-block-button__width-75 {
-		width: calc(75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25));
+		width: calc(75% - (var(--wp--style--block-column-gap, #{$blocks-block__margin}) * 0.25));
 	}
 
 	&.wp-block-button__width-100 {
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index f96e02af2acff..9bb459146131a 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -465,7 +465,7 @@ button.wp-block-navigation-item__content {
 				// Apply top padding to nested submenus.
 				.wp-block-navigation__submenu-container,
 				.wp-block-navigation__container {
-					padding-top: var(--wp--style--block-gap, 2em);
+					padding-top: var(--wp--style--block-row-gap, 2em);
 				}
 			}
 
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index 1038cfcb5ca97..304fce56558a9 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -7,9 +7,11 @@
  */
 
 class WP_Block_Supports_Spacing_Test extends WP_UnitTestCase {
-	private $sample_block_content = '<div class="wp-block-test-block">Test</div>';
-	private $test_gap_block_value = array();
-	private $test_gap_block_args  = array();
+	private $sample_block_content              = '<div class="wp-block-test-block">Test</div>';
+	private $test_gap_block_value              = array();
+	private $test_gap_block_axial_value        = array();
+	private $test_gap_block_single_axial_value = array();
+	private $test_gap_block_args               = array();
 
 	function setUp() {
 		parent::setUp();
@@ -33,6 +35,33 @@ function setUp() {
 				),
 			),
 		);
+
+		$this->test_gap_block_axial_value = array(
+			'blockName' => 'test/test-block',
+			'attrs'     => array(
+				'style' => array(
+					'spacing' => array(
+						'blockGap' => array(
+							'row'    => '44px',
+							'column' => '33px',
+						),
+					),
+				),
+			),
+		);
+
+		$this->test_gap_block_single_axial_value = array(
+			'blockName' => 'test/test-block',
+			'attrs'     => array(
+				'style' => array(
+					'spacing' => array(
+						'blockGap' => array(
+							'row' => '55px',
+						),
+					),
+				),
+			),
+		);
 	}
 
 	function tearDown() {
@@ -49,7 +78,33 @@ function test_spacing_gap_block_support_renders_block_inline_style() {
 		);
 
 		$this->assertSame(
-			'<div style="--wp--style--block-gap: 3em" class="wp-block-test-block">Test</div>',
+			'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-block-test-block">Test</div>',
+			$render_output
+		);
+	}
+
+	function test_spacing_axial_gap_block_support_renders_block_inline_style() {
+		register_block_type( 'test/test-block', $this->test_gap_block_args );
+		$render_output = gutenberg_render_spacing_gap_support(
+			$this->sample_block_content,
+			$this->test_gap_block_axial_value
+		);
+
+		$this->assertSame(
+			'<div style="--wp--style--block-gap: 44px 33px; --wp--style--block-row-gap: 44px; --wp--style--block-column-gap: 33px;" class="wp-block-test-block">Test</div>',
+			$render_output
+		);
+	}
+
+	function test_spacing_single_axial_gap_block_support_renders_block_inline_style() {
+		register_block_type( 'test/test-block', $this->test_gap_block_args );
+		$render_output = gutenberg_render_spacing_gap_support(
+			$this->sample_block_content,
+			$this->test_gap_block_single_axial_value
+		);
+
+		$this->assertSame(
+			'<div style="--wp--style--block-row-gap: 55px;" class="wp-block-test-block">Test</div>',
 			$render_output
 		);
 	}
@@ -62,7 +117,7 @@ function test_spacing_gap_block_support_renders_block_inline_style_with_inner_ta
 		);
 
 		$this->assertSame(
-			'<div style="--wp--style--block-gap: 3em" class="wp-test-block"><p style="color: red;">Test</p></div>',
+			'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-test-block"><p style="color: red;">Test</p></div>',
 			$render_output
 		);
 	}
@@ -75,7 +130,7 @@ function test_spacing_gap_block_support_renders_block_inline_style_with_no_other
 		);
 
 		$this->assertSame(
-			'<div style="--wp--style--block-gap: 3em"><p>Test</p></div>',
+			'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;"><p>Test</p></div>',
 			$render_output
 		);
 	}
@@ -88,7 +143,7 @@ function test_spacing_gap_block_support_renders_appended_block_inline_style() {
 		);
 
 		$this->assertSame(
-			'<div class="wp-test-block" style="--wp--style--block-gap: 3em; background: green;"><p style="color: red;">Test</p></div>',
+			'<div class="wp-test-block" style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em; background: green;"><p style="color: red;">Test</p></div>',
 			$render_output
 		);
 	}
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index add58e8e0d2f9..8a19d0646c702 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -355,7 +355,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() {
 			)
 		);
 
-		$expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}';
+		$expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}';
 		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
 		$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
 	}
@@ -481,7 +481,7 @@ function test_get_stylesheet() {
 		);
 
 		$variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
-		$styles    = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
+		$styles    = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
 		$presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
 		$all       = $variables . $styles . $presets;
 		$this->assertEquals( $all, $theme_json->get_stylesheet() );

From 76fb0f92cbeab6c27e6f62130c4957de22af0a13 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 9 Nov 2021 13:11:43 +1100
Subject: [PATCH 7/9] revert

---
 packages/block-editor/src/hooks/gap.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index 02f100d2f7b5c..e36f6f0efd0f1 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -139,13 +139,22 @@ export function GapEdit( props ) {
 		}
 	};
 
+	const blockGapValue = style?.spacing?.blockGap;
+	const rowValue = blockGapValue?.row;
+	const columnValue = blockGapValue?.column;
+	// Check for blockGap string values, e.g., "blockGap":"169px", on pre-axial blocks.
+	const isStringValue = typeof blockGapValue === 'string';
+
 	const boxValues = {
-		top: style?.spacing?.blockGap?.row,
-		right: style?.spacing?.blockGap?.column,
-		bottom: style?.spacing?.blockGap?.row,
-		left: style?.spacing?.blockGap?.column,
+		top: isStringValue ? blockGapValue : rowValue,
+		right: isStringValue ? blockGapValue : columnValue,
+		bottom: isStringValue ? blockGapValue : rowValue,
+		left: isStringValue ? blockGapValue : columnValue,
 	};
 
+	// The default combined value we'll take from row.
+	const defaultValue = boxValues.top;
+
 	return Platform.select( {
 		web: (
 			<>
@@ -168,7 +177,7 @@ export function GapEdit( props ) {
 						onChange={ onChange }
 						units={ units }
 						// Default to `row` for combined values.
-						value={ style?.spacing?.blockGap?.row }
+						value={ defaultValue }
 					/>
 				) }
 			</>

From 6f072c694f50a2b0386ae354f014777bb8899f70 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 22 Nov 2021 10:23:15 +1100
Subject: [PATCH 8/9] Setting the margin-top value of blocks to the row value
 instead of the columns gap value. Where the row and column values are the
 same, use a single value instead of shorthand in the block-gap CSS var.

---
 lib/block-supports/spacing.php                               | 5 +++--
 .../global-styles/test/use-global-styles-output.js           | 2 +-
 .../src/components/global-styles/use-global-styles-output.js | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 0d2e18230d1e0..69c49e9d624a2 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -119,7 +119,8 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 		$gap_column_value_is_valid = isset( $gap_value['column'] ) && ! preg_match( $regex_pattern, $gap_value['column'] );
 
 		if ( $gap_row_value_is_valid && $gap_column_value_is_valid ) {
-			$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value['row'] ), esc_attr( $gap_value['column'] ) );
+			$gap_shorthand_value = $gap_value['row'] === $gap_value['column'] ? esc_attr( $gap_value['row'] ) : esc_attr( $gap_value['row'] ) . ' ' . esc_attr( $gap_value['column'] );
+			$styles[]            = sprintf( '--wp--style--block-gap: %s;', $gap_shorthand_value );
 		}
 
 		if ( $gap_row_value_is_valid ) {
@@ -134,7 +135,7 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) {
 			return $block_content;
 		}
 
-		$styles[] = sprintf( '--wp--style--block-gap: %s %s;', esc_attr( $gap_value ), esc_attr( $gap_value ) );
+		$styles[] = sprintf( '--wp--style--block-gap: %s;', esc_attr( $gap_value ) );
 		$styles[] = sprintf( '--wp--style--block-row-gap: %s;', esc_attr( $gap_value ) );
 		$styles[] = sprintf( '--wp--style--block-column-gap: %s;', esc_attr( $gap_value ) );
 	}
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index 5d24e753052b1..e297cc5972c4a 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -371,7 +371,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-row-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 	} );
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 571dfb3758a72..217ea328d11ca 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -318,7 +318,7 @@ export const toStyles = ( tree, blockSelectors ) => {
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 
 	let ruleset =
-		'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-column-gap ); }';
+		'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-row-gap ); }';
 	nodesWithStyles.forEach( ( { selector, styles } ) => {
 		const declarations = getStylesDeclarations( styles );
 		if ( declarations.length === 0 ) {

From a74225517556a81ad48521b989275bd82f60d6c2 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 22 Nov 2021 12:14:24 +1100
Subject: [PATCH 9/9] Updating tests

---
 phpunit/block-supports/spacing-test.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index 304fce56558a9..0563f1dcf0683 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -78,7 +78,7 @@ function test_spacing_gap_block_support_renders_block_inline_style() {
 		);
 
 		$this->assertSame(
-			'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-block-test-block">Test</div>',
+			'<div style="--wp--style--block-gap: 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-block-test-block">Test</div>',
 			$render_output
 		);
 	}
@@ -117,7 +117,7 @@ function test_spacing_gap_block_support_renders_block_inline_style_with_inner_ta
 		);
 
 		$this->assertSame(
-			'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-test-block"><p style="color: red;">Test</p></div>',
+			'<div style="--wp--style--block-gap: 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;" class="wp-test-block"><p style="color: red;">Test</p></div>',
 			$render_output
 		);
 	}
@@ -130,7 +130,7 @@ function test_spacing_gap_block_support_renders_block_inline_style_with_no_other
 		);
 
 		$this->assertSame(
-			'<div style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;"><p>Test</p></div>',
+			'<div style="--wp--style--block-gap: 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em;"><p>Test</p></div>',
 			$render_output
 		);
 	}
@@ -143,7 +143,7 @@ function test_spacing_gap_block_support_renders_appended_block_inline_style() {
 		);
 
 		$this->assertSame(
-			'<div class="wp-test-block" style="--wp--style--block-gap: 3em 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em; background: green;"><p style="color: red;">Test</p></div>',
+			'<div class="wp-test-block" style="--wp--style--block-gap: 3em; --wp--style--block-row-gap: 3em; --wp--style--block-column-gap: 3em; background: green;"><p style="color: red;">Test</p></div>',
 			$render_output
 		);
 	}