From 0e869e8c27033bf37c44e1eefbd62c6683e26f5f Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 29 Mar 2022 20:54:34 +1100
Subject: [PATCH 1/2] Revert "Removing block gap control for global styles
 since: (#39601)"

This reverts commit dcad2b4448542af9a42c2b8719ed86e831665856.
---
 .../global-styles/dimensions-panel.js         | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

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 47c6a320b8f5ab..db628050f0b47a 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -6,6 +6,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
+	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
@@ -20,8 +21,9 @@ const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 export function useHasDimensionsPanel( name ) {
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
+	const hasGap = useHasGap( name );
 
-	return hasPadding || hasMargin;
+	return hasPadding || hasMargin || hasGap;
 }
 
 function useHasPadding( name ) {
@@ -38,6 +40,13 @@ function useHasMargin( name ) {
 	return settings && supports.includes( 'margin' );
 }
 
+function useHasGap( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'spacing.blockGap', name );
+
+	return settings && supports.includes( '--wp--style--block-gap' );
+}
+
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -79,6 +88,7 @@ function splitStyleValue( value ) {
 export default function DimensionsPanel( { name } ) {
 	const showPaddingControl = useHasPadding( name );
 	const showMarginControl = useHasMargin( name );
+	const showGapControl = useHasGap( name );
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
 			'%',
@@ -118,9 +128,15 @@ export default function DimensionsPanel( { name } ) {
 	const resetMarginValue = () => setMarginValues( {} );
 	const hasMarginValue = () =>
 		!! marginValues && Object.keys( marginValues ).length;
+
+	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+	const resetGapValue = () => setGapValue( undefined );
+	const hasGapValue = () => !! gapValue;
+
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
+		resetGapValue();
 	};
 
 	return (
@@ -161,6 +177,23 @@ export default function DimensionsPanel( { name } ) {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showGapControl && (
+				<ToolsPanelItem
+					hasValue={ hasGapValue }
+					label={ __( 'Block spacing' ) }
+					onDeselect={ resetGapValue }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						label={ __( 'Block spacing' ) }
+						__unstableInputWidth="80px"
+						min={ 0 }
+						onChange={ setGapValue }
+						units={ units }
+						value={ gapValue }
+					/>
+				</ToolsPanelItem>
+			) }
 		</ToolsPanel>
 	);
 }

From 6160de6d31aac100845bdb7ef5feae6815f171db Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 29 Mar 2022 21:32:19 +1100
Subject: [PATCH 2/2] Do not show the gap control panel for block-level global
 styles as they do not work on the frontend. We do this by checking for a
 block name and then returning false.

---
 .../src/components/global-styles/dimensions-panel.js     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

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 db628050f0b47a..80c6c25e1d64cb 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -43,8 +43,13 @@ function useHasMargin( name ) {
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
-
-	return settings && supports.includes( '--wp--style--block-gap' );
+	// Do not show the gap control panel for block-level global styles
+	// as they do not work on the frontend.
+	// See: https://github.com/WordPress/gutenberg/pull/39845.
+	// We can revert this condition when they're working again.
+	return !! name
+		? false
+		: settings && supports.includes( '--wp--style--block-gap' );
 }
 
 function filterValuesBySides( values, sides ) {