From 1d99ae235512813cbbcc96d8870cc9c96f81d762 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 5 Oct 2021 13:01:51 +1100
Subject: [PATCH] Columns block: Enable blockGap and vertical margin support
 (#34630)

* Columns block: Enable blockGap and vertical margin support

* Update blockGap label to Block spacing

* Remove single-column class, add 80px width to UnitControls
---
 packages/block-editor/src/hooks/dimensions.js              | 3 +--
 packages/block-editor/src/hooks/gap.js                     | 3 ++-
 packages/block-library/src/columns/block.json              | 7 +++++++
 .../src/components/global-styles/dimensions-panel.js       | 6 +++---
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 9e38b6c6f0cab6..ecfb0fa164c345 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -98,9 +98,8 @@ export function DimensionsPanel( props ) {
 			) }
 			{ ! isGapDisabled && (
 				<ToolsPanelItem
-					className="single-column"
 					hasValue={ () => hasGapValue( props ) }
-					label={ __( 'Block gap' ) }
+					label={ __( 'Block spacing' ) }
 					onDeselect={ () => resetGap( props ) }
 					resetAllFilter={ createResetAllFilter( 'blockGap' ) }
 					isShownByDefault={ defaultSpacingControls?.blockGap }
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index d29a63774fbb64..13b41c606049cf 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -132,7 +132,8 @@ export function GapEdit( props ) {
 		web: (
 			<>
 				<UnitControl
-					label={ __( 'Block gap' ) }
+					label={ __( 'Block spacing' ) }
+					__unstableInputWidth="80px"
 					min={ 0 }
 					onChange={ onChange }
 					units={ units }
diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index 5eb86c22921ca6..9b9b7e7021686b 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -21,6 +21,13 @@
 		"color": {
 			"gradients": true,
 			"link": true
+		},
+		"spacing": {
+			"blockGap": true,
+			"margin": [ "top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",
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 9f30114697e464..4e08fab3215fc7 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -179,14 +179,14 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 			) }
 			{ showGapControl && (
 				<ToolsPanelItem
-					className="single-column"
 					hasValue={ hasGapValue }
-					label={ __( 'Block gap' ) }
+					label={ __( 'Block spacing' ) }
 					onDeselect={ resetGapValue }
 					isShownByDefault={ true }
 				>
 					<UnitControl
-						label={ __( 'Block gap' ) }
+						label={ __( 'Block spacing' ) }
+						__unstableInputWidth="80px"
 						min={ 0 }
 						onChange={ setGapValue }
 						units={ units }