From a23adc8af4752a976d63c9440912c8d93b0e27a5 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 11 Dec 2020 12:05:22 +1000
Subject: [PATCH 1/4] Add custom gutter widths to columns

---
 packages/block-library/src/columns/block.json |  3 +++
 packages/block-library/src/columns/edit.js    | 27 ++++++++++++++++---
 .../block-library/src/columns/editor.scss     |  4 +--
 packages/block-library/src/columns/save.js    | 17 +++++++-----
 packages/block-library/src/columns/style.scss |  4 +--
 5 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index 0cc93b718a89b1..4da71db7f22129 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -3,6 +3,9 @@
 	"name": "core/columns",
 	"category": "design",
 	"attributes": {
+		"gutterSize": {
+			"type": "number"
+		},
 		"verticalAlignment": {
 			"type": "string"
 		}
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 9ad79099af20aa..2ac9c530adcccb 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -46,13 +46,19 @@ import {
  */
 const ALLOWED_BLOCKS = [ 'core/column' ];
 
+// Values to constrain the customizable gutter size.
+const MIN_GUTTER_VALUE = 0;
+const MAX_GUTTER_VALUE = 100;
+const INITIAL_GUTTER_POSITION = 32;
+
 function ColumnsEditContainer( {
 	attributes,
+	setAttributes,
 	updateAlignment,
 	updateColumns,
 	clientId,
 } ) {
-	const { verticalAlignment } = attributes;
+	const { gutterSize, verticalAlignment } = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -69,6 +75,10 @@ function ColumnsEditContainer( {
 
 	const blockProps = useBlockProps( {
 		className: classes,
+		style: {
+			'--gutter-size':
+				gutterSize !== undefined ? `${ gutterSize }px` : undefined,
+		},
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
@@ -85,7 +95,7 @@ function ColumnsEditContainer( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody>
+				<PanelBody title={ __( 'Display settings' ) }>
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ count }
@@ -100,6 +110,17 @@ function ColumnsEditContainer( {
 							) }
 						</Notice>
 					) }
+					<RangeControl
+						label={ __( 'Gutter size' ) }
+						value={ gutterSize }
+						onChange={ ( value ) => {
+							setAttributes( { gutterSize: value } );
+						} }
+						min={ MIN_GUTTER_VALUE }
+						max={ MAX_GUTTER_VALUE }
+						initialPosition={ INITIAL_GUTTER_POSITION }
+						allowReset
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
@@ -112,7 +133,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 		/**
 		 * Update all child Column blocks with a new vertical alignment setting
 		 * based on whatever alignment is passed in. This allows change to parent
-		 * to overide anything set on a individual column basis.
+		 * to override anything set on a individual column basis.
 		 *
 		 * @param {string} verticalAlignment the vertical alignment setting
 		 */
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 76ce4d3c97c221..4911bb1b113b2a 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -10,14 +10,14 @@
 @include break-small() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: $grid-unit-20 * 2;
+		margin-left: var(--gutter-size, $grid-unit-20 * 2);
 	}
 }
 
 @include break-medium() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: $grid-unit-20 * 2;
+		margin-left: var(--gutter-size, $grid-unit-20 * 2);
 	}
 }
 
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index a9826c10089899..0b5e33852f8352 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -9,14 +9,19 @@ import classnames from 'classnames';
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { verticalAlignment } = attributes;
-
-	const className = classnames( {
-		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-	} );
+	const { gutterSize, verticalAlignment } = attributes;
+	const blockProps = {
+		className: classnames( {
+			[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+		} ),
+		style: {
+			'--gutter-size':
+				gutterSize !== undefined ? `${ gutterSize }px` : undefined,
+		},
+	};
 
 	return (
-		<div { ...useBlockProps.save( { className } ) }>
+		<div { ...useBlockProps.save( blockProps ) }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 385d5ad26282c1..ddf126467d58d6 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -59,7 +59,7 @@
 		// 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: 2em;
+			margin-left: var(--gutter-size, 2em);
 		}
 	}
 
@@ -83,7 +83,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: 2em;
+			margin-left: var(--gutter-size, 2em);
 		}
 	}
 

From b65fe3ea75161e94e4c4bf19c301e5c9ec8a8f32 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 16 Dec 2020 14:51:18 +1000
Subject: [PATCH 2/4] Prevent undesired inheritance of gutter size

---
 packages/block-library/src/columns/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index ddf126467d58d6..9242c3186c65d9 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,6 +1,7 @@
 .wp-block-columns {
 	display: flex;
 	margin-bottom: 1.75em;
+	--gutter-size: #{ $grid-unit-20 * 2 };
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;

From 2a8766027a6b5fdd6f61b6542eab4d6d0e3e65ba Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 16 Dec 2020 15:16:13 +1000
Subject: [PATCH 3/4] Rename CSS var for improve clarity of source

---
 packages/block-library/src/columns/edit.js     | 2 +-
 packages/block-library/src/columns/editor.scss | 4 ++--
 packages/block-library/src/columns/save.js     | 2 +-
 packages/block-library/src/columns/style.scss  | 6 +++---
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 2ac9c530adcccb..c064a7562b8e1c 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -76,7 +76,7 @@ function ColumnsEditContainer( {
 	const blockProps = useBlockProps( {
 		className: classes,
 		style: {
-			'--gutter-size':
+			'--columns-block-gutter-size':
 				gutterSize !== undefined ? `${ gutterSize }px` : undefined,
 		},
 	} );
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 4911bb1b113b2a..c0717f4248b49a 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -10,14 +10,14 @@
 @include break-small() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: var(--gutter-size, $grid-unit-20 * 2);
+		margin-left: var(--columns-block-gutter-size, $grid-unit-20 * 2);
 	}
 }
 
 @include break-medium() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: var(--gutter-size, $grid-unit-20 * 2);
+		margin-left: var(--columns-block-gutter-size, $grid-unit-20 * 2);
 	}
 }
 
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 0b5e33852f8352..a02eb058793c20 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -15,7 +15,7 @@ export default function save( { attributes } ) {
 			[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		} ),
 		style: {
-			'--gutter-size':
+			'--columns-block-gutter-size':
 				gutterSize !== undefined ? `${ gutterSize }px` : undefined,
 		},
 	};
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 9242c3186c65d9..089634a58e2832 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,7 +1,7 @@
 .wp-block-columns {
 	display: flex;
 	margin-bottom: 1.75em;
-	--gutter-size: #{ $grid-unit-20 * 2 };
+	--columns-block-gutter-size: #{ $grid-unit-20 * 2 };
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
@@ -60,7 +60,7 @@
 		// 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(--gutter-size, 2em);
+			margin-left: var(--columns-block-gutter-size, 2em);
 		}
 	}
 
@@ -84,7 +84,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: var(--gutter-size, 2em);
+			margin-left: var(--columns-block-gutter-size, 2em);
 		}
 	}
 

From 535a959427fa3776eb1bd08691a2fa709dba98f1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 23 Dec 2020 19:25:06 +1000
Subject: [PATCH 4/4] Remove UI controls

Until the new sidebar controls and system lands, it is preferred to avoid adding any new UI controls to the sidebar.
---
 packages/block-library/src/columns/edit.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index c064a7562b8e1c..9608743c82fba7 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -46,14 +46,8 @@ import {
  */
 const ALLOWED_BLOCKS = [ 'core/column' ];
 
-// Values to constrain the customizable gutter size.
-const MIN_GUTTER_VALUE = 0;
-const MAX_GUTTER_VALUE = 100;
-const INITIAL_GUTTER_POSITION = 32;
-
 function ColumnsEditContainer( {
 	attributes,
-	setAttributes,
 	updateAlignment,
 	updateColumns,
 	clientId,
@@ -110,17 +104,6 @@ function ColumnsEditContainer( {
 							) }
 						</Notice>
 					) }
-					<RangeControl
-						label={ __( 'Gutter size' ) }
-						value={ gutterSize }
-						onChange={ ( value ) => {
-							setAttributes( { gutterSize: value } );
-						} }
-						min={ MIN_GUTTER_VALUE }
-						max={ MAX_GUTTER_VALUE }
-						initialPosition={ INITIAL_GUTTER_POSITION }
-						allowReset
-					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />