From 8428eadd67210b7df11d976c2f35a06c349b8264 Mon Sep 17 00:00:00 2001
From: Anthony Ledesma <30462574+AnthonyLedesma@users.noreply.github.com>
Date: Mon, 10 Feb 2020 05:39:11 -0700
Subject: [PATCH] Add text color support to Columns block (#20016)

---
 packages/block-library/src/columns/block.json |  6 ++++
 packages/block-library/src/columns/edit.js    | 31 +++++++++++++------
 packages/block-library/src/columns/save.js    |  7 +++++
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index 022d64285361e..8dc01cfafab4d 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -10,6 +10,12 @@
 		},
 		"customBackgroundColor": {
 			"type": "string"
+		},
+		"customTextColor" : {
+			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
 		}
 	}
 }
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index b0eb2b9adc14e..e110e98949fa8 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -9,6 +9,8 @@ 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,
@@ -59,12 +61,21 @@ function ColumnsEditContainer( {
 		[ clientId ]
 	);
 
+	const ref = useRef();
 	const {
 		BackgroundColor,
 		InspectorControlsColorPanel,
-	} = __experimentalUseColors( [
-		{ name: 'backgroundColor', className: 'has-background' },
-	] );
+		TextColor,
+	} = __experimentalUseColors(
+		[
+			{ name: 'textColor', property: 'color' },
+			{ name: 'backgroundColor', className: 'has-background' },
+		],
+		{
+			contrastCheckers: { backgroundColor: true, textColor: true },
+			colorDetector: { targetRef: ref },
+		}
+	);
 
 	const classes = classnames( className, {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
@@ -91,12 +102,14 @@ function ColumnsEditContainer( {
 			</InspectorControls>
 			{ InspectorControlsColorPanel }
 			<BackgroundColor>
-				<div className={ classes }>
-					<InnerBlocks
-						templateLock="all"
-						allowedBlocks={ ALLOWED_BLOCKS }
-					/>
-				</div>
+				<TextColor>
+					<div className={ classes } ref={ ref }>
+						<InnerBlocks
+							templateLock="all"
+							allowedBlocks={ ALLOWED_BLOCKS }
+						/>
+					</div>
+				</TextColor>
 			</BackgroundColor>
 		</>
 	);
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 41d0f8d26e0e7..3d2249389910d 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -13,6 +13,8 @@ export default function save( { attributes } ) {
 		verticalAlignment,
 		backgroundColor,
 		customBackgroundColor,
+		textColor,
+		customTextColor,
 	} = attributes;
 
 	const backgroundClass = getColorClassName(
@@ -20,14 +22,19 @@ export default function save( { attributes } ) {
 		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 (