Try/group block custom text color (#19181)

* Add text color selector to group block to allow setting a text colour that applies to all children of the group to avoid having to set text colour on every individual child
WordPress · Jan 20, 2020 · 5ba3976 · 5ba3976
1 parent e654dce
commit 5ba3976
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 40 deletions.
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -7,6 +7,12 @@
 		},
 		"customBackgroundColor": {
 			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
 		}
 	}
 }
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -1,62 +1,52 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 import {
-	InspectorControls,
 	InnerBlocks,
-	PanelColorSettings,
-	withColors,
+	__experimentalUseColors,
 } from '@wordpress/block-editor';
+import { useRef } from '@wordpress/element';
 
 function GroupEdit( {
-	className,
-	setBackgroundColor,
-	backgroundColor,
 	hasInnerBlocks,
 } ) {
-	const styles = {
-		backgroundColor: backgroundColor.color,
-	};
-
-	const classes = classnames( className, backgroundColor.class, {
-		'has-background': !! backgroundColor.color,
-	} );
+	const ref = useRef();
+	const {
+		TextColor,
+		BackgroundColor,
+		InspectorControlsColorPanel,
+	} = __experimentalUseColors(
+		[
+			{ name: 'textColor', property: 'color' },
+			{ name: 'backgroundColor', className: 'has-background' },
+		],
+		{
+			contrastCheckers: { backgroundColor: true, textColor: true },
+			colorDetector: { targetRef: ref },
+		}
+	);
 
 	return (
 		<>
-			<InspectorControls>
-				<PanelColorSettings
-					title={ __( 'Color Settings' ) }
-					colorSettings={ [
-						{
-							value: backgroundColor.color,
-							onChange: setBackgroundColor,
-							label: __( 'Background Color' ),
-						},
-					] }
-				/>
-			</InspectorControls>
-			<div className={ classes } style={ styles }>
-				<div className="wp-block-group__inner-container">
-					<InnerBlocks
-						renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
-					/>
-				</div>
-			</div>
+			{ InspectorControlsColorPanel }
+			<BackgroundColor>
+				<TextColor>
+					<div className="wp-block-group" ref={ ref } >
+						<div className="wp-block-group__inner-container" >
+							<InnerBlocks
+								renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
+							/>
+						</div>
+					</div>
+				</TextColor>
+			</BackgroundColor>
 		</>
 	);
 }
 
 export default compose( [
-	withColors( 'backgroundColor' ),
 	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlock,

diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
@@ -25,6 +25,7 @@ export const settings = {
 	example: {
 		attributes: {
 			customBackgroundColor: '#ffffff',
+			customTextColor: '#000000',
 		},
 		innerBlocks: [
 			{

diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
@@ -9,15 +9,18 @@ import classnames from 'classnames';
 import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { backgroundColor, customBackgroundColor } = attributes;
+	const { backgroundColor, customBackgroundColor, textColor, customTextColor } = attributes;
 
 	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+	const textClass = getColorClassName( 'color', textColor );
 	const className = classnames( backgroundClass, {
+		'has-text-color': textColor || customTextColor,
 		'has-background': backgroundColor || customBackgroundColor,
 	} );
 
 	const styles = {
 		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		color: textClass ? undefined : customTextColor,
 	};
 
 	return (