Add background color support to Columns block

packages/block-library/src/columns/block.json

@@ -4,6 +4,12 @@
 	"attributes": {
 		"verticalAlignment": {
 			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
 		}
 	}
 }

packages/block-library/src/columns/edit.js

@@ -8,6 +8,7 @@ import { dropRight, get, map, times } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
 import {
 	PanelBody,
 	RangeControl,
@@ -18,6 +19,8 @@ import {
 	BlockControls,
 	__experimentalBlockPatternPicker,
 	BlockVerticalAlignmentToolbar,
+	PanelColorSettings,
+	withColors,
 } from '@wordpress/block-editor';
 import {
 	withDispatch,
@@ -52,6 +55,8 @@ function ColumnsEditContainer( {
 	className,
 	updateAlignment,
 	updateColumns,
+	setBackgroundColor,
+	backgroundColor,
 	clientId,
 } ) {
 	const { verticalAlignment } = attributes;
@@ -63,9 +68,21 @@ function ColumnsEditContainer( {
 	} );
 
 	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 (
 		<>
 			<InspectorControls>
@@ -78,14 +95,19 @@ function ColumnsEditContainer( {
 						max={ 6 }
 					/>
 				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color Settings' ) }
+					initialOpen={ false }
+					colorSettings={ colorSettings }
+				/>
 			</InspectorControls>
 			<BlockControls>
 				<BlockVerticalAlignmentToolbar
 					onChange={ updateAlignment }
 					value={ verticalAlignment }
 				/>
 			</BlockControls>
-			<div className={ classes }>
+			<div className={ classes } style={ styles }>
 				<InnerBlocks
 					templateLock="all"
 					allowedBlocks={ ALLOWED_BLOCKS } />
@@ -230,4 +252,6 @@ const ColumnsEdit = ( props ) => {
 		/> );
 };
 
-export default ColumnsEdit;
+export default compose( [
+	withColors( 'backgroundColor' ),
+] )( ColumnsEdit );

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 backgroundClass = getColorClassName( 'background-color', backgroundColor );
 	const wrapperClasses = classnames( {
+		'has-background': ( backgroundClass || customBackgroundColor ),
+		[ backgroundClass ]: backgroundClass,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
+	const style = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+	};
 
 	return (
-		<div className={ wrapperClasses }>
+		<div className={ wrapperClasses } style={ style }>
 			<InnerBlocks.Content />
 		</div>
 	);

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 {

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 -->

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>"
     }
 ]

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,

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 -->