useColors: directly pass ref for color detecting (#19474)

* useColors: directly pass ref for color detecting * Remove withFallbackStyles * Fix useColors parameters * Use state for detected colors so warning is immediately displayed * Restore separate targets * Address feedback
WordPress · Jan 8, 2020 · 7c2b50c · 7c2b50c
1 parent 2b379d1
commit 7c2b50c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 70 deletions.
diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js
@@ -13,11 +13,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useCallback,
 	useMemo,
+	useEffect,
 	Children,
 	cloneElement,
-	useRef,
+	useState,
 } from '@wordpress/element';
-import { withFallbackStyles } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -48,8 +48,8 @@ const ColorPanel = ( {
 	colorSettings,
 	colorPanelProps,
 	contrastCheckers,
-	detectedBackgroundColorRef,
-	detectedColorRef,
+	detectedBackgroundColor,
+	detectedColor,
 	panelChildren,
 } ) => (
 	<PanelColorSettings
@@ -64,12 +64,12 @@ const ColorPanel = ( {
 					backgroundColor = resolveContrastCheckerColor(
 						backgroundColor,
 						colorSettings,
-						detectedBackgroundColorRef.current
+						detectedBackgroundColor
 					);
 					textColor = resolveContrastCheckerColor(
 						textColor,
 						colorSettings,
-						detectedColorRef.current
+						detectedColor
 					);
 					return (
 						<ContrastChecker
@@ -85,12 +85,12 @@ const ColorPanel = ( {
 					backgroundColor = resolveContrastCheckerColor(
 						backgroundColor || value,
 						colorSettings,
-						detectedBackgroundColorRef.current
+						detectedBackgroundColor
 					);
 					textColor = resolveContrastCheckerColor(
 						textColor || value,
 						colorSettings,
-						detectedColorRef.current
+						detectedColor
 					);
 					return (
 						<ContrastChecker
@@ -119,6 +119,11 @@ export default function __experimentalUseColors(
 		colorPanelProps,
 		contrastCheckers,
 		panelChildren,
+		colorDetector: {
+			targetRef,
+			backgroundColorTargetRef = targetRef,
+			textColorTargetRef = targetRef,
+		} = {},
 	} = {
 		panelTitle: __( 'Color Settings' ),
 	},
@@ -197,9 +202,10 @@ export default function __experimentalUseColors(
 		[ setAttributes, colorConfigs.length ]
 	);
 
-	const detectedBackgroundColorRef = useRef();
-	const detectedColorRef = useRef();
-	const ColorDetector = useMemo( () => {
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedColor, setDetectedColor ] = useState();
+
+	useEffect( () => {
 		if ( ! contrastCheckers ) {
 			return undefined;
 		}
@@ -216,48 +222,27 @@ export default function __experimentalUseColors(
 				break;
 			}
 		}
-		return (
-			( needsBackgroundColor || needsColor ) &&
-			withFallbackStyles(
-				(
-					node,
-					{
-						querySelector,
-						backgroundColorSelector = querySelector,
-						textColorSelector = querySelector,
-					}
-				) => {
-					let backgroundColorNode = node;
-					let textColorNode = node;
-					if ( backgroundColorSelector ) {
-						backgroundColorNode = node.parentNode.querySelector(
-							backgroundColorSelector
-						);
-					}
-					if ( textColorSelector ) {
-						textColorNode = node.parentNode.querySelector( textColorSelector );
-					}
-					let backgroundColor;
-					const color = getComputedStyle( textColorNode ).color;
-					if ( needsBackgroundColor ) {
-						backgroundColor = getComputedStyle( backgroundColorNode )
-							.backgroundColor;
-						while (
-							backgroundColor === 'rgba(0, 0, 0, 0)' &&
-							backgroundColorNode.parentNode &&
-							backgroundColorNode.parentNode.nodeType === Node.ELEMENT_NODE
-						) {
-							backgroundColorNode = backgroundColorNode.parentNode;
-							backgroundColor = getComputedStyle( backgroundColorNode )
-								.backgroundColor;
-						}
-					}
-					detectedBackgroundColorRef.current = backgroundColor;
-					detectedColorRef.current = color;
-					return { backgroundColor, color };
-				}
-			)( () => <></> )
-		);
+
+		if ( needsColor ) {
+			setDetectedColor( getComputedStyle( textColorTargetRef.current ).color );
+		}
+
+		if ( needsBackgroundColor ) {
+			let backgroundColorNode = backgroundColorTargetRef.current;
+			let backgroundColor = getComputedStyle( backgroundColorNode )
+				.backgroundColor;
+			while (
+				backgroundColor === 'rgba(0, 0, 0, 0)' &&
+				backgroundColorNode.parentNode &&
+				backgroundColorNode.parentNode.nodeType === Node.ELEMENT_NODE
+			) {
+				backgroundColorNode = backgroundColorNode.parentNode;
+				backgroundColor = getComputedStyle( backgroundColorNode )
+					.backgroundColor;
+			}
+
+			setDetectedBackgroundColor( backgroundColor );
+		}
 	}, [
 		colorConfigs.reduce(
 			( acc, colorConfig ) =>
@@ -334,8 +319,8 @@ export default function __experimentalUseColors(
 			colorSettings,
 			colorPanelProps,
 			contrastCheckers,
-			detectedBackgroundColorRef,
-			detectedColorRef,
+			detectedBackgroundColor,
+			detectedColor,
 			panelChildren,
 		};
 		return {
@@ -344,7 +329,6 @@ export default function __experimentalUseColors(
 			InspectorControlsColorPanel: (
 				<InspectorControlsColorPanel { ...wrappedColorPanelProps } />
 			),
-			ColorDetector,
 		};
-	}, [ attributes, setAttributes, ...deps ] );
+	}, [ attributes, setAttributes, detectedColor, detectedBackgroundColor, ...deps ] );
 }
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -7,7 +7,7 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RawHTML, Component, createRef, Platform } from '@wordpress/element';
+import { RawHTML, Component, useRef, Platform, forwardRef } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { pasteHandler, children as childrenSource, getBlockTransforms, findTransform, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { withInstanceId, compose } from '@wordpress/compose';
@@ -58,7 +58,6 @@ function getMultilineTag( multiline ) {
 class RichTextWrapper extends Component {
 	constructor() {
 		super( ...arguments );
-		this.ref = createRef();
 		this.onEnter = this.onEnter.bind( this );
 		this.onSplit = this.onSplit.bind( this );
 		this.onPaste = this.onPaste.bind( this );
@@ -358,6 +357,7 @@ class RichTextWrapper extends Component {
 			style,
 			preserveWhiteSpace,
 			disabled,
+			forwardedRef,
 			...props
 		} = this.props;
 		const multilineTag = getMultilineTag( multiline );
@@ -378,7 +378,7 @@ class RichTextWrapper extends Component {
 		const content = (
 			<RichText
 				{ ...props }
-				ref={ this.ref }
+				ref={ forwardedRef }
 				value={ adjustedValue }
 				onChange={ adjustedOnChange }
 				selectionStart={ selectionStart }
@@ -414,7 +414,7 @@ class RichTextWrapper extends Component {
 				{ ( { isSelected, value, onChange, Editable } ) =>
 					<>
 						{ children && children( { value, onChange } ) }
-						{ isSelected && hasFormats && ( <FormatToolbarContainer inline={ inlineToolbar } anchorRef={ this.ref.current } /> ) }
+						{ isSelected && hasFormats && ( <FormatToolbarContainer inline={ inlineToolbar } anchorRef={ forwardedRef.current } /> ) }
 						{ isSelected && <RemoveBrowserShortcuts /> }
 						<Autocomplete
 							onReplace={ onReplace }
@@ -546,7 +546,12 @@ const RichTextContainer = compose( [
 	} ),
 ] )( RichTextWrapper );
 
-RichTextContainer.Content = ( { value, tagName: Tag, multiline, ...props } ) => {
+const ForwardedRichTextContainer = forwardRef( ( props, ref ) => {
+	const fallbackRef = useRef();
+	return <RichTextContainer { ...props } forwardedRef={ ref || fallbackRef } />;
+} );
+
+ForwardedRichTextContainer.Content = ( { value, tagName: Tag, multiline, ...props } ) => {
 	// Handle deprecated `children` and `node` sources.
 	if ( Array.isArray( value ) ) {
 		value = childrenSource.toHTML( value );
@@ -567,19 +572,19 @@ RichTextContainer.Content = ( { value, tagName: Tag, multiline, ...props } ) =>
 	return content;
 };
 
-RichTextContainer.isEmpty = ( value ) => {
+ForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
-RichTextContainer.Content.defaultProps = {
+ForwardedRichTextContainer.Content.defaultProps = {
 	format: 'string',
 	value: '',
 };
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/rich-text/README.md
  */
-export default RichTextContainer;
+export default ForwardedRichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
@@ -21,6 +21,7 @@ import {
 	RichText,
 	__experimentalUseColors,
 } from '@wordpress/block-editor';
+import { useRef } from '@wordpress/element';
 
 function HeadingEdit( {
 	attributes,
@@ -29,10 +30,12 @@ function HeadingEdit( {
 	onReplace,
 	className,
 } ) {
-	const { TextColor, InspectorControlsColorPanel, ColorDetector } = __experimentalUseColors(
+	const ref = useRef();
+	const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors(
 		[ { name: 'textColor', property: 'color' } ],
 		{
 			contrastCheckers: { backgroundColor: true, textColor: true },
+			colorDetector: { targetRef: ref },
 		},
 		[]
 	);
@@ -56,8 +59,8 @@ function HeadingEdit( {
 			</InspectorControls>
 			{ InspectorControlsColorPanel }
 			<TextColor>
-				<ColorDetector querySelector='[contenteditable="true"]' />
 				<RichText
+					ref={ ref }
 					identifier="content"
 					tagName={ tagName }
 					value={ content }

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -24,7 +24,7 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { compose } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 
 /**
  * Browser dependencies
@@ -94,19 +94,20 @@ function ParagraphBlock( {
 		direction,
 	} = attributes;
 
+	const ref = useRef();
 	const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ fontSize.size ] );
 	const {
 		TextColor,
 		BackgroundColor,
 		InspectorControlsColorPanel,
-		ColorDetector,
 	} = __experimentalUseColors(
 		[
 			{ name: 'textColor', property: 'color' },
 			{ name: 'backgroundColor', className: 'has-background' },
 		],
 		{
 			contrastCheckers: [ { backgroundColor: true, textColor: true, fontSize: fontSize.size } ],
+			colorDetector: { targetRef: ref },
 		},
 		[ fontSize.size ]
 	);
@@ -143,8 +144,8 @@ function ParagraphBlock( {
 			{ InspectorControlsColorPanel }
 			<BackgroundColor>
 				<TextColor>
-					<ColorDetector querySelector='[contenteditable="true"]' />
 					<RichText
+						ref={ ref }
 						identifier="content"
 						tagName="p"
 						className={ classnames( 'wp-block-paragraph', className, {