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

@@ -16,8 +16,9 @@ import {
 	InspectorControls,
 	InnerBlocks,
 	BlockControls,
-	__experimentalBlockPatternPicker,
 	BlockVerticalAlignmentToolbar,
+	__experimentalBlockPatternPicker,
+	__experimentalUseColors,
 } from '@wordpress/block-editor';
 import {
 	withDispatch,
@@ -62,12 +63,27 @@ function ColumnsEditContainer( {
 		};
 	}, [ clientId ] );
 
+	const {
+		BackgroundColor,
+		InspectorControlsColorPanel,
+	} = __experimentalUseColors(
+		[
+			{ name: 'backgroundColor', className: 'has-background' },
+		]
+	);
+
 	const classes = classnames( className, {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
 	return (
 		<>
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={ updateAlignment }
+					value={ verticalAlignment }
+				/>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
@@ -79,17 +95,14 @@ function ColumnsEditContainer( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<BlockControls>
-				<BlockVerticalAlignmentToolbar
-					onChange={ updateAlignment }
-					value={ verticalAlignment }
-				/>
-			</BlockControls>
-			<div className={ classes }>
-				<InnerBlocks
-					templateLock="all"
-					allowedBlocks={ ALLOWED_BLOCKS } />
-			</div>
+			{ InspectorControlsColorPanel }
+			<BackgroundColor>
+				<div className={ classes }>
+					<InnerBlocks
+						templateLock="all"
+						allowedBlocks={ ALLOWED_BLOCKS } />
+				</div>
+			</BackgroundColor>
 		</>
 	);
 }

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

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

packages/block-library/src/columns/style.scss

@@ -8,6 +8,10 @@
 	@include break-medium() {
 		flex-wrap: nowrap;
 	}
+
+	&.has-background {
+		padding: $block-bg-padding--v $block-bg-padding--h;
+	}
 }
 
 .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 -->