Add text color support to Columns block (#20016)

WordPress · Feb 10, 2020 · 8428ead · 8428ead
1 parent e00f7b4
commit 8428ead
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git 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
@@ -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
@@ -13,21 +13,28 @@ export default function save( { attributes } ) {
 		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 (