From c82efa92a4c89ffff18ab0e37d5e2e8650e6cc88 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 7 Oct 2019 10:25:04 -0400
Subject: [PATCH 1/9] Add attributes

---
 packages/block-library/src/columns/block.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index 3c22ca71fba621..022d64285361e9 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -4,6 +4,12 @@
 	"attributes": {
 		"verticalAlignment": {
 			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
 		}
 	}
 }

From 4e665d6261b8412e7b066051798c914409598125 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 7 Oct 2019 10:25:25 -0400
Subject: [PATCH 2/9] Update edit function

---
 packages/block-library/src/columns/edit.js | 166 ++++++++++++---------
 1 file changed, 95 insertions(+), 71 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 48f35e90b2d9ce..9ea54ce9a1fb1c 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -8,6 +8,7 @@ import { dropRight, times } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
 import {
 	PanelBody,
 	RangeControl,
@@ -19,6 +20,8 @@ import {
 	InnerBlocks,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
+	PanelColorSettings,
+	withColors,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -110,6 +113,8 @@ export function ColumnsEdit( {
 	className,
 	updateAlignment,
 	updateColumns,
+	setBackgroundColor,
+	backgroundColor,
 	clientId,
 } ) {
 	const { verticalAlignment } = attributes;
@@ -131,10 +136,15 @@ export function ColumnsEdit( {
 		}
 	}, [ forceUseTemplate ] );
 
-	const classes = classnames( className, {
+	const classes = classnames( className, backgroundColor.class, {
+		'has-background': !! backgroundColor.color,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
+	const styles = {
+		backgroundColor: backgroundColor.color,
+	};
+
 	// The template selector is shown when we first insert the columns block (count === 0).
 	// or if there's no template available.
 	// The count === 0 trick is useful when you use undo/redo.
@@ -154,6 +164,17 @@ export function ColumnsEdit( {
 								max={ 6 }
 							/>
 						</PanelBody>
+						<PanelColorSettings
+							title={ __( 'Color Settings' ) }
+							initialOpen={ false }
+							colorSettings={ [
+								{
+									value: backgroundColor.color,
+									onChange: setBackgroundColor,
+									label: __( 'Background Color' ),
+								},
+							] }
+						/>
 					</InspectorControls>
 					<BlockControls>
 						<BlockVerticalAlignmentToolbar
@@ -163,7 +184,7 @@ export function ColumnsEdit( {
 					</BlockControls>
 				</>
 			) }
-			<div className={ classes }>
+			<div className={ classes } style={ styles }>
 				<InnerBlocks
 					__experimentalTemplateOptions={ TEMPLATE_OPTIONS }
 					__experimentalOnSelectTemplateOption={ ( nextTemplate ) => {
@@ -183,85 +204,88 @@ export function ColumnsEdit( {
 	);
 }
 
-export default withDispatch( ( dispatch, ownProps, registry ) => ( {
-	/**
-	 * 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.
-	 *
-	 * @param {string} verticalAlignment the vertical alignment setting
-	 */
-	updateAlignment( verticalAlignment ) {
-		const { clientId, setAttributes } = ownProps;
-		const { updateBlockAttributes } = dispatch( 'core/block-editor' );
-		const { getBlockOrder } = registry.select( 'core/block-editor' );
+export default compose( [
+	withColors( 'backgroundColor' ),
+	withDispatch( ( dispatch, ownProps, registry ) => ( {
+		/**
+		 * 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.
+		 *
+		 * @param {string} verticalAlignment the vertical alignment setting
+		 */
+		updateAlignment( verticalAlignment ) {
+			const { clientId, setAttributes } = ownProps;
+			const { updateBlockAttributes } = dispatch( 'core/block-editor' );
+			const { getBlockOrder } = registry.select( 'core/block-editor' );
 
-		// Update own alignment.
-		setAttributes( { verticalAlignment } );
+			// Update own alignment.
+			setAttributes( { verticalAlignment } );
 
-		// Update all child Column Blocks to match
-		const innerBlockClientIds = getBlockOrder( clientId );
-		innerBlockClientIds.forEach( ( innerBlockClientId ) => {
-			updateBlockAttributes( innerBlockClientId, {
-				verticalAlignment,
+			// Update all child Column Blocks to match
+			const innerBlockClientIds = getBlockOrder( clientId );
+			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
+				updateBlockAttributes( innerBlockClientId, {
+					verticalAlignment,
+				} );
 			} );
-		} );
-	},
+		},
 
-	/**
-	 * Updates the column count, including necessary revisions to child Column
-	 * blocks to grant required or redistribute available space.
-	 *
-	 * @param {number} previousColumns Previous column count.
-	 * @param {number} newColumns      New column count.
-	 */
-	updateColumns( previousColumns, newColumns ) {
-		const { clientId } = ownProps;
-		const { replaceInnerBlocks } = dispatch( 'core/block-editor' );
-		const { getBlocks } = registry.select( 'core/block-editor' );
+		/**
+		 * Updates the column count, including necessary revisions to child Column
+		 * blocks to grant required or redistribute available space.
+		 *
+		 * @param {number} previousColumns Previous column count.
+		 * @param {number} newColumns      New column count.
+		 */
+		updateColumns( previousColumns, newColumns ) {
+			const { clientId } = ownProps;
+			const { replaceInnerBlocks } = dispatch( 'core/block-editor' );
+			const { getBlocks } = registry.select( 'core/block-editor' );
 
-		let innerBlocks = getBlocks( clientId );
-		const hasExplicitWidths = hasExplicitColumnWidths( innerBlocks );
+			let innerBlocks = getBlocks( clientId );
+			const hasExplicitWidths = hasExplicitColumnWidths( innerBlocks );
 
-		// Redistribute available width for existing inner blocks.
-		const isAddingColumn = newColumns > previousColumns;
+			// Redistribute available width for existing inner blocks.
+			const isAddingColumn = newColumns > previousColumns;
 
-		if ( isAddingColumn && hasExplicitWidths ) {
-			// If adding a new column, assign width to the new column equal to
-			// as if it were `1 / columns` of the total available space.
-			const newColumnWidth = toWidthPrecision( 100 / newColumns );
+			if ( isAddingColumn && hasExplicitWidths ) {
+				// If adding a new column, assign width to the new column equal to
+				// as if it were `1 / columns` of the total available space.
+				const newColumnWidth = toWidthPrecision( 100 / newColumns );
 
-			// Redistribute in consideration of pending block insertion as
-			// constraining the available working width.
-			const widths = getRedistributedColumnWidths( innerBlocks, 100 - newColumnWidth );
+				// Redistribute in consideration of pending block insertion as
+				// constraining the available working width.
+				const widths = getRedistributedColumnWidths( innerBlocks, 100 - newColumnWidth );
 
-			innerBlocks = [
-				...getMappedColumnWidths( innerBlocks, widths ),
-				...times( newColumns - previousColumns, () => {
-					return createBlock( 'core/column', {
-						width: newColumnWidth,
-					} );
-				} ),
-			];
-		} else if ( isAddingColumn ) {
-			innerBlocks = [
-				...innerBlocks,
-				...times( newColumns - previousColumns, () => {
-					return createBlock( 'core/column' );
-				} ),
-			];
-		} else {
-			// The removed column will be the last of the inner blocks.
-			innerBlocks = dropRight( innerBlocks, previousColumns - newColumns );
+				innerBlocks = [
+					...getMappedColumnWidths( innerBlocks, widths ),
+					...times( newColumns - previousColumns, () => {
+						return createBlock( 'core/column', {
+							width: newColumnWidth,
+						} );
+					} ),
+				];
+			} else if ( isAddingColumn ) {
+				innerBlocks = [
+					...innerBlocks,
+					...times( newColumns - previousColumns, () => {
+						return createBlock( 'core/column' );
+					} ),
+				];
+			} else {
+				// The removed column will be the last of the inner blocks.
+				innerBlocks = dropRight( innerBlocks, previousColumns - newColumns );
 
-			if ( hasExplicitWidths ) {
-				// Redistribute as if block is already removed.
-				const widths = getRedistributedColumnWidths( innerBlocks, 100 );
+				if ( hasExplicitWidths ) {
+					// Redistribute as if block is already removed.
+					const widths = getRedistributedColumnWidths( innerBlocks, 100 );
 
-				innerBlocks = getMappedColumnWidths( innerBlocks, widths );
+					innerBlocks = getMappedColumnWidths( innerBlocks, widths );
+				}
 			}
-		}
 
-		replaceInnerBlocks( clientId, innerBlocks, false );
-	},
-} ) )( ColumnsEdit );
+			replaceInnerBlocks( clientId, innerBlocks, false );
+		},
+	} ) ),
+] )( ColumnsEdit );

From 36f3863ae3577d9e4563f2125c61f1a96b92874f Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 7 Oct 2019 10:25:45 -0400
Subject: [PATCH 3/9] Update save function

---
 packages/block-library/src/columns/save.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 8f9b8c2d673620..9fb54c681fdf60 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -6,17 +6,23 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { verticalAlignment } = attributes;
+	const { verticalAlignment, backgroundColor, customBackgroundColor } = attributes;
 
-	const wrapperClasses = classnames( {
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+	const wrapperClasses = classnames( backgroundClass, {
+		'has-background': backgroundColor || customBackgroundColor,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
+	const styles = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+	};
+
 	return (
-		<div className={ wrapperClasses }>
+		<div className={ wrapperClasses } style={ styles }>
 			<InnerBlocks.Content />
 		</div>
 	);

From 3bbe9ec5ceae4af5659a48882b45a5f1e60db07b Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 7 Oct 2019 10:26:08 -0400
Subject: [PATCH 4/9] Add .has-background style

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

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 7a2c0877889332..16bdac50873fb3 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -8,6 +8,12 @@
 	@include break-medium() {
 		flex-wrap: nowrap;
 	}
+
+	&.has-background {
+		// Matches paragraph Block padding
+		// Todo: normalise with variables
+		padding: 20px 30px;
+	}
 }
 
 .wp-block-column {

From a8db75c9e9db44d6d67a0f13d1031e502730de11 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 25 Nov 2019 21:30:43 -0500
Subject: [PATCH 5/9] Improve has-background and backgroundColor.class checks

---
 packages/block-library/src/columns/edit.js | 19 +++++++++----------
 packages/block-library/src/columns/save.js | 10 +++++-----
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 9ea54ce9a1fb1c..3cb4ef5edd5656 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -136,14 +136,19 @@ export function ColumnsEdit( {
 		}
 	}, [ forceUseTemplate ] );
 
-	const classes = classnames( className, backgroundColor.class, {
-		'has-background': !! backgroundColor.color,
+	const classes = classnames( className, {
+		'has-background': ( backgroundColor.class || backgroundColor.color ),
+		[ backgroundColor.class ]: backgroundColor.class,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
-
 	const styles = {
 		backgroundColor: backgroundColor.color,
 	};
+	const colorSettings = [ {
+		value: backgroundColor.color,
+		onChange: setBackgroundColor,
+		label: __( 'Background Color' ),
+	} ];
 
 	// The template selector is shown when we first insert the columns block (count === 0).
 	// or if there's no template available.
@@ -167,13 +172,7 @@ export function ColumnsEdit( {
 						<PanelColorSettings
 							title={ __( 'Color Settings' ) }
 							initialOpen={ false }
-							colorSettings={ [
-								{
-									value: backgroundColor.color,
-									onChange: setBackgroundColor,
-									label: __( 'Background Color' ),
-								},
-							] }
+							colorSettings={ colorSettings }
 						/>
 					</InspectorControls>
 					<BlockControls>
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 9fb54c681fdf60..59789e4db01eda 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -12,17 +12,17 @@ export default function save( { attributes } ) {
 	const { verticalAlignment, backgroundColor, customBackgroundColor } = attributes;
 
 	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-	const wrapperClasses = classnames( backgroundClass, {
-		'has-background': backgroundColor || customBackgroundColor,
+	const wrapperClasses = classnames( {
+		'has-background': ( backgroundClass || customBackgroundColor ),
+		[ backgroundClass ]: backgroundClass,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
-
-	const styles = {
+	const style = {
 		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
 	};
 
 	return (
-		<div className={ wrapperClasses } style={ styles }>
+		<div className={ wrapperClasses } style={ style }>
 			<InnerBlocks.Content />
 		</div>
 	);

From c2ca1df0a61046abe2ee1731c18176da681c79a4 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 26 Nov 2019 07:13:12 -0500
Subject: [PATCH 6/9] Try passing the columns block e2e test

---
 packages/e2e-tests/fixtures/blocks/core__columns.html     | 4 ++--
 packages/e2e-tests/fixtures/blocks/core__columns.json     | 6 ++++--
 .../e2e-tests/fixtures/blocks/core__columns.parsed.json   | 8 +++++---
 .../fixtures/blocks/core__columns.serialized.html         | 4 ++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.html b/packages/e2e-tests/fixtures/blocks/core__columns.html
index 10316fc04d135a..89383b93f3ad15 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.html
@@ -1,5 +1,5 @@
-<!-- wp:columns -->
-<div class="wp-block-columns">
+<!-- wp:columns {"backgroundColor":"secondary"} -->
+<div class="wp-block-columns has-background has-secondary-background-color">
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.json b/packages/e2e-tests/fixtures/blocks/core__columns.json
index d2c4a123741dc5..9741c4ee472aa1 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.json
@@ -3,7 +3,9 @@
         "clientId": "_clientId_0",
         "name": "core/columns",
         "isValid": true,
-        "attributes": {},
+        "attributes": {
+            "backgroundColor": "secondary"
+        },
         "innerBlocks": [
             {
                 "clientId": "_clientId_0",
@@ -68,6 +70,6 @@
                 "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-columns\">\n\t\n\t\n</div>"
+        "originalContent": "<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
index e3a1d3c00b0b15..dec57c6e19e396 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
@@ -1,7 +1,9 @@
 [
     {
         "blockName": "core/columns",
-        "attrs": {},
+        "attrs": {
+            "backgroundColor": "secondary"
+        },
         "innerBlocks": [
             {
                 "blockName": "core/column",
@@ -68,9 +70,9 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-columns\">\n\t\n\t\n</div>\n",
+        "innerHTML": "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>\n",
         "innerContent": [
-            "\n<div class=\"wp-block-columns\">\n\t",
+            "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t",
             null,
             "\n\t",
             null,
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
index 47dcbe2fa69175..664beb08154a7f 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column -->
+<!-- wp:columns {"backgroundColor":"secondary"} -->
+<div class="wp-block-columns has-background has-secondary-background-color"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:paragraph -->
 <p>Column One, Paragraph One</p>
 <!-- /wp:paragraph -->

From d2d444164b6377213e750e2038367ff29e4d2a2d Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 17 Dec 2019 13:55:09 -0500
Subject: [PATCH 7/9] Refactor to use __experimentalUseColors

---
 packages/block-library/src/columns/edit.js | 66 ++++++++++------------
 packages/block-library/src/columns/save.js | 14 +++--
 storybook/test/__snapshots__/index.js.snap | 36 ++++++++++++
 3 files changed, 75 insertions(+), 41 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index e729ae5a1882e1..c34839a221e4bb 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -8,7 +8,6 @@ import { dropRight, get, map, times } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
 import {
 	PanelBody,
 	RangeControl,
@@ -17,10 +16,9 @@ import {
 	InspectorControls,
 	InnerBlocks,
 	BlockControls,
-	__experimentalBlockPatternPicker,
 	BlockVerticalAlignmentToolbar,
-	PanelColorSettings,
-	withColors,
+	__experimentalBlockPatternPicker,
+	__experimentalUseColors,
 } from '@wordpress/block-editor';
 import {
 	withDispatch,
@@ -55,8 +53,6 @@ function ColumnsEditContainer( {
 	className,
 	updateAlignment,
 	updateColumns,
-	setBackgroundColor,
-	backgroundColor,
 	clientId,
 } ) {
 	const { verticalAlignment } = attributes;
@@ -67,24 +63,30 @@ function ColumnsEditContainer( {
 		};
 	}, [ clientId ] );
 
+	const {
+		BackgroundColor,
+		InspectorControlsColorPanel,
+	} = __experimentalUseColors(
+		[
+			{ name: 'backgroundColor', className: 'has-background' },
+		],
+		{
+			contrastCheckers: [ { backgroundColor: false } ],
+		}
+	);
+
 	const classes = classnames( className, {
-		'has-background': ( backgroundColor.class || backgroundColor.color ),
-		[ backgroundColor.class ]: backgroundColor.class,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
-	const styles = {
-		backgroundColor: backgroundColor.color,
-	};
-
-	const colorSettings = [ {
-		value: backgroundColor.color,
-		onChange: setBackgroundColor,
-		label: __( 'Background Color' ),
-	} ];
-
 	return (
 		<>
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={ updateAlignment }
+					value={ verticalAlignment }
+				/>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
@@ -95,23 +97,15 @@ function ColumnsEditContainer( {
 						max={ 6 }
 					/>
 				</PanelBody>
-				<PanelColorSettings
-					title={ __( 'Color Settings' ) }
-					initialOpen={ false }
-					colorSettings={ colorSettings }
-				/>
 			</InspectorControls>
-			<BlockControls>
-				<BlockVerticalAlignmentToolbar
-					onChange={ updateAlignment }
-					value={ verticalAlignment }
-				/>
-			</BlockControls>
-			<div className={ classes } style={ styles }>
-				<InnerBlocks
-					templateLock="all"
-					allowedBlocks={ ALLOWED_BLOCKS } />
-			</div>
+			{ InspectorControlsColorPanel }
+			<BackgroundColor>
+				<div className={ classes }>
+					<InnerBlocks
+						templateLock="all"
+						allowedBlocks={ ALLOWED_BLOCKS } />
+				</div>
+			</BackgroundColor>
 		</>
 	);
 }
@@ -252,6 +246,4 @@ const ColumnsEdit = ( props ) => {
 		/> );
 };
 
-export default compose( [
-	withColors( 'backgroundColor' ),
-] )( ColumnsEdit );
+export default ColumnsEdit;
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 59789e4db01eda..7dfa5ab214bd67 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -9,20 +9,26 @@ import classnames from 'classnames';
 import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { verticalAlignment, backgroundColor, customBackgroundColor } = attributes;
+	const {
+		verticalAlignment,
+		backgroundColor,
+		customBackgroundColor,
+	} = attributes;
 
 	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-	const wrapperClasses = classnames( {
-		'has-background': ( backgroundClass || customBackgroundColor ),
+
+	const className = classnames( {
+		'has-background': backgroundColor || customBackgroundColor,
 		[ backgroundClass ]: backgroundClass,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
+
 	const style = {
 		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
 	};
 
 	return (
-		<div className={ wrapperClasses } style={ style }>
+		<div className={ className ? className : undefined } style={ style }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index 9e663317961f4e..46a3fa5a282141 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -3055,6 +3055,42 @@ exports[`Storyshots Components|RangeControl Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components|RangeControl Initial Value Zero 1`] = `
+<div
+  className="components-base-control components-range-control"
+>
+  <div
+    className="components-base-control__field"
+  >
+    <label
+      className="components-base-control__label"
+      htmlFor="inspector-range-control-2"
+    >
+      How many columns should this use?
+    </label>
+    <input
+      className="components-range-control__slider"
+      id="inspector-range-control-2"
+      max={20}
+      min={0}
+      onChange={[Function]}
+      type="range"
+      value={0}
+    />
+    <input
+      aria-label="How many columns should this use?"
+      className="components-range-control__number"
+      max={20}
+      min={0}
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="number"
+      value={null}
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components|RangeControl With Help 1`] = `
 <div
   className="components-base-control components-range-control"

From da19f9ea10150635e52533938f121d8fdcb900b4 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 17 Dec 2019 13:56:26 -0500
Subject: [PATCH 8/9] Normalize has-background padding with variables

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

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index dda6fcd8825fbb..899414c24f4071 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -10,9 +10,7 @@
 	}
 
 	&.has-background {
-		// Matches paragraph Block padding
-		// Todo: normalise with variables
-		padding: 20px 30px;
+		padding: $block-bg-padding--v $block-bg-padding--h;
 	}
 }
 

From 2311d6a45c04d8250f4b2c937b5f29b18bad631a Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 18 Dec 2019 09:44:00 -0500
Subject: [PATCH 9/9] Remove extra bit

---
 packages/block-library/src/columns/edit.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index c34839a221e4bb..dd9c3b16add94c 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -69,10 +69,7 @@ function ColumnsEditContainer( {
 	} = __experimentalUseColors(
 		[
 			{ name: 'backgroundColor', className: 'has-background' },
-		],
-		{
-			contrastCheckers: [ { backgroundColor: false } ],
-		}
+		]
 	);
 
 	const classes = classnames( className, {