Switch to just manually selecting text colour rather than trying to a…

…uto set a contrasting colour
WordPress · Dec 18, 2019 · 92b9e6f · 92b9e6f
1 parent 4ed2c88
commit 92b9e6f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 74 deletions.
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -8,6 +8,9 @@
 		"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,95 +1,51 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import tinycolor from 'tinycolor2';
-
 /**
  * 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';
 
-function hasCustomBackgroundColor( backgroundColor ) {
-	return ! backgroundColor.name && ! backgroundColor.class;
-}
-
-function hasCustomTextColor( textColor ) {
-	return textColor && tinycolor( textColor.color ).getFormat() === 'hex';
-}
-
-function getTextColor( textColor, backgroundColor ) {
-	if ( ! hasCustomTextColor( textColor ) ) {
-		return tinycolor( backgroundColor.color ).isDark() ? 'white' : 'black';
-	}
-	return textColor ? textColor.color : null;
-}
-
 function GroupEdit( {
-	className,
-	setBackgroundColor,
-	backgroundColor,
-	setTextColor,
-	textColor,
 	hasInnerBlocks,
 } ) {
-	const styles = {
-		backgroundColor: backgroundColor.color,
-		color: textColor.color,
-	};
-
-	const classes = classnames( className, backgroundColor.class, {
-		'has-background': !! backgroundColor.color,
-	} );
-
-	const colorSettings = [ {
-		value: backgroundColor.color,
-		onChange: setBackgroundColor,
-		label: __( 'Background Color' ),
-	} ];
-
-	if ( hasCustomBackgroundColor( backgroundColor ) ) {
-		const textContrastColor = getTextColor( textColor, backgroundColor );
-		setTextColor( textContrastColor );
-
-		colorSettings.push( {
-			value: textContrastColor,
-			onChange: setTextColor,
-			label: __( 'Text Color' ),
-			colors: null,
-		} );
-	} else {
-		setTextColor( null );
-	}
+	const {
+		TextColor,
+		BackgroundColor,
+		InspectorControlsColorPanel,
+		ColorDetector,
+	} = __experimentalUseColors(
+		[
+			{ name: 'textColor', property: 'color' },
+			{ name: 'backgroundColor', className: 'has-background' },
+		],
+		{
+			contrastCheckers: [ { backgroundColor: true, textColor: true } ],
+		}
+	);
 
 	return (
 		<>
-			<InspectorControls>
-				<PanelColorSettings
-					title={ __( 'Color Settings' ) }
-					colorSettings={ colorSettings }
-				/>
-			</InspectorControls>
-			<div className={ classes } style={ styles }>
-				<div className="wp-block-group__inner-container">
-					<InnerBlocks
-						renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
-					/>
-				</div>
-			</div>
+			{ InspectorControlsColorPanel }
+			<BackgroundColor>
+				<TextColor>
+					<ColorDetector querySelector=".wp-block-group" />
+					<div className="wp-block-group" >
+						<div className="wp-block-group__inner-container" >
+							<InnerBlocks
+								renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
+							/>
+						</div>
+					</div>
+				</TextColor>
+			</BackgroundColor>
 		</>
 	);
 }
 
 export default compose( [
-	withColors( 'backgroundColor', 'textColor' ),
 	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlock,

diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
@@ -9,16 +9,18 @@ import classnames from 'classnames';
 import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { backgroundColor, customBackgroundColor, customTextColor } = 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: customTextColor ? customTextColor : null,
+		color: textClass ? undefined : customTextColor,
 	};
 
 	return (