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
WordPress · Oct 5, 2021 · 1d99ae2 · 1d99ae2
1 parent f45dce1
commit 1d99ae2
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }