Add columns deprecated version

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