Update the columns block to use the new colors hook

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -101,7 +101,9 @@ const BlockComponent = forwardRef(
 			// should only consider tabbables within editable display, since it
 			// may be the wrapper itself or a side control which triggered the
 			// focus event, don't unnecessary transition to an inner tabbable.
-			if ( wrapper.current.contains( document.activeElement ) ) {
+			if (
+				isInsideRootBlock( wrapper.current, document.activeElement )
+			) {
 				return;
 			}
 

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

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

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

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Given an HTML string for a deprecated columns inner block, returns the
@@ -38,7 +38,84 @@ function getDeprecatedLayoutColumn( originalContent ) {
 	}
 }
 
+const migrateCustomColors = ( attributes ) => {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
+		return attributes;
+	}
+	const style = { color: {} };
+	if ( attributes.customTextColor ) {
+		style.color.text = attributes.customTextColor;
+	}
+	if ( attributes.customBackgroundColor ) {
+		style.color.background = attributes.customBackgroundColor;
+	}
+	return {
+		...attributes,
+		style,
+	};
+};
+
 export default [
+	{
+		attributes: {
+			verticalAlignment: {
+				type: 'string',
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+		},
+		migrate: migrateCustomColors,
+		save( { attributes } ) {
+			const {
+				verticalAlignment,
+				backgroundColor,
+				customBackgroundColor,
+				textColor,
+				customTextColor,
+			} = attributes;
+
+			const backgroundClass = getColorClassName(
+				'background-color',
+				backgroundColor
+			);
+
+			const textClass = getColorClassName( 'color', textColor );
+
+			const className = classnames( {
+				'has-background': backgroundColor || customBackgroundColor,
+				'has-text-color': textColor || customTextColor,
+				[ backgroundClass ]: backgroundClass,
+				[ textClass ]: textClass,
+				[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+			} );
+
+			const style = {
+				backgroundColor: backgroundClass
+					? undefined
+					: customBackgroundColor,
+				color: textClass ? undefined : customTextColor,
+			};
+
+			return (
+				<div
+					className={ className ? className : undefined }
+					style={ style }
+				>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			columns: {

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

@@ -9,15 +9,13 @@ import { dropRight, get, map, times } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody, RangeControl } from '@wordpress/components';
-import { useRef } from '@wordpress/element';
 
 import {
 	InspectorControls,
 	InnerBlocks,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,
-	__experimentalUseColors,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -61,22 +59,6 @@ function ColumnsEditContainer( {
 		[ clientId ]
 	);
 
-	const ref = useRef();
-	const {
-		BackgroundColor,
-		InspectorControlsColorPanel,
-		TextColor,
-	} = __experimentalUseColors(
-		[
-			{ name: 'textColor', property: 'color' },
-			{ name: 'backgroundColor', className: 'has-background' },
-		],
-		{
-			contrastCheckers: [ { backgroundColor: true, textColor: true } ],
-			colorDetector: { targetRef: ref },
-		}
-	);
-
 	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
@@ -100,32 +82,14 @@ function ColumnsEditContainer( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			{ InspectorControlsColorPanel }
-			<BackgroundColor>
-				{ ( backgroundProps ) => (
-					<TextColor>
-						{ ( textColorProps ) => (
-							<InnerBlocks
-								allowedBlocks={ ALLOWED_BLOCKS }
-								__experimentalMoverDirection="horizontal"
-								ref={ ref }
-								__experimentalTagName={ Block.div }
-								__experimentalPassedProps={ {
-									className: classnames(
-										classes,
-										backgroundProps.className,
-										textColorProps.className
-									),
-									style: {
-										...backgroundProps.style,
-										...textColorProps.style,
-									},
-								} }
-							/>
-						) }
-					</TextColor>
-				) }
-			</BackgroundColor>
+			<InnerBlocks
+				allowedBlocks={ ALLOWED_BLOCKS }
+				__experimentalMoverDirection="horizontal"
+				__experimentalTagName={ Block.div }
+				__experimentalPassedProps={ {
+					className: classes,
+				} }
+			/>
 		</>
 	);
 }

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

@@ -27,6 +27,7 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 		lightBlockWrapper: true,
+		__experimentalColor: true,
 	},
 	variations,
 	example: {

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

@@ -6,39 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const {
-		verticalAlignment,
-		backgroundColor,
-		customBackgroundColor,
-		textColor,
-		customTextColor,
-	} = attributes;
-
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
-
-	const textClass = getColorClassName( 'color', textColor );
+	const { verticalAlignment } = attributes;
 
 	const className = classnames( {
-		'has-background': backgroundColor || customBackgroundColor,
-		'has-text-color': textColor || customTextColor,
-		[ backgroundClass ]: backgroundClass,
-		[ textClass ]: textClass,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
-	const style = {
-		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
-		color: textClass ? undefined : customTextColor,
-	};
-
 	return (
-		<div className={ className ? className : undefined } style={ style }>
+		<div className={ className ? className : undefined }>
 			<InnerBlocks.Content />
 		</div>
 	);

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

@@ -1,6 +1,8 @@
 .wp-block-columns {
 	display: flex;
 	margin-bottom: $default-block-margin;
+	background-color: var(--wp--color--background);
+	color: var(--wp--color--text);
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;

packages/e2e-tests/fixtures/blocks/core__columns.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:columns {"backgroundColor":"secondary"} -->
-<div class="wp-block-columns has-background has-secondary-background-color"><!-- wp:column -->
+<div class="wp-block-columns has-secondary-background-color has-background"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:paragraph -->
 <p>Column One, Paragraph One</p>
 <!-- /wp:paragraph -->

packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js

@@ -91,7 +91,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyTimes( 'Tab', 4 );
+		await pressKeyTimes( 'Tab', 5 );
 
 		// Tweak the columns count by increasing it by one.
 		await page.keyboard.press( 'ArrowRight' );