Refactored contrast verification logic to use a ContrastCheckerWithFa…

…llbackStyles wrapper.
WordPress · Nov 16, 2017 · 54ac133 · 54ac133
1 parent 34fd767
commit 54ac133
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 87 deletions.
diff --git a/blocks/contrast-checker/index.js b/blocks/contrast-checker/index.js
@@ -14,12 +14,12 @@ import { Notice } from '@wordpress/components';
  */
 import './style.scss';
 
-function ContrastChecker( { backgroundColor, textColor, isLargeText } ) {
-	if ( ! backgroundColor || ! textColor ) {
+function ContrastChecker( { backgroundColor, textColor, isLargeText, fallbackBackgroundColor, fallbackTextColor } ) {
+	if ( ! ( backgroundColor || fallbackBackgroundColor ) || ! ( textColor || fallbackTextColor ) ) {
 		return null;
 	}
-	const tinyBackgroundColor = tinycolor( backgroundColor );
-	const tinyTextColor = tinycolor( textColor );
+	const tinyBackgroundColor = tinycolor( backgroundColor || fallbackBackgroundColor );
+	const tinyTextColor = tinycolor( textColor || fallbackTextColor );
 	if ( tinycolor.isReadable(
 		tinyBackgroundColor,
 		tinyTextColor,

diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
@@ -23,9 +23,19 @@ import BlockDescription from '../../block-description';
 
 const { getComputedStyle } = window;
 
+const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
+	const { textColor, backgroundColor } = ownProps;
+	return {
+		fallbackBackgroundColor: backgroundColor ? undefined : getComputedStyle( node ).backgroundColor,
+		fallbackTextColor: textColor ? undefined : getComputedStyle( node.querySelector( '[contenteditable="true"]' ) ).color,
+	};
+} )( ContrastChecker );
+
 class ButtonBlock extends Component {
 	constructor() {
 		super( ...arguments );
+		this.nodeRef = null;
+		this.bindRef = this.bindRef.bind( this );
 		this.updateAlignment = this.updateAlignment.bind( this );
 		this.toggleClear = this.toggleClear.bind( this );
 	}
@@ -39,15 +49,20 @@ class ButtonBlock extends Component {
 		setAttributes( { clear: ! attributes.clear } );
 	}
 
+	bindRef( node ) {
+		if ( ! node ) {
+			return;
+		}
+		this.nodeRef = node;
+	}
+
 	render() {
 		const {
 			attributes,
 			setAttributes,
 			focus,
 			setFocus,
 			className,
-			fallbackBackgroundColor,
-			fallbackTextColor,
 		} = this.props;
 
 		const {
@@ -66,7 +81,7 @@ class ButtonBlock extends Component {
 					<BlockAlignmentToolbar value={ align } onChange={ this.updateAlignment } />
 				</BlockControls>
 			),
-			<span key="button" className={ className } title={ title } style={ { backgroundColor: color } }>
+			<span key="button" className={ className } title={ title } style={ { backgroundColor: color } } ref={ this.bindRef }>
 				<Editable
 					tagName="span"
 					placeholder={ __( 'Add text…' ) }
@@ -103,9 +118,10 @@ class ButtonBlock extends Component {
 								onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
 							/>
 						</PanelColor>
-						<ContrastChecker
-							textColor={ textColor || fallbackTextColor }
-							backgroundColor={ color || fallbackBackgroundColor }
+						<ContrastCheckerWithFallbackStyles
+							node={ this.nodeRef }
+							textColor={ textColor }
+							backgroundColor={ color }
 							isLargeText={ true }
 						/>
 					</InspectorControls>
@@ -127,14 +143,6 @@ class ButtonBlock extends Component {
 	}
 }
 
-const ButtonBlockFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
-	const { textColor, color } = ownProps.attributes;
-	return {
-		fallbackBackgroundColor: color ? undefined : getComputedStyle( node.querySelector( `.${ ownProps.className }` ) ).backgroundColor,
-		fallbackTextColor: textColor ? undefined : getComputedStyle( node.querySelector( '[contenteditable="true"]' ) ).color,
-	};
-} )( ButtonBlock );
-
 registerBlockType( 'core/button', {
 	title: __( 'Button' ),
 
@@ -187,9 +195,7 @@ registerBlockType( 'core/button', {
 		return props;
 	},
 
-	edit( props ) {
-		return <ButtonBlockFallbackStyles { ...props } />;
-	},
+	edit: ButtonBlock,
 
 	save( { attributes } ) {
 		const { url, text, title, align, color, textColor } = attributes;

diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -29,9 +29,20 @@ import ContrastChecker from '../../contrast-checker';
 
 const { getComputedStyle } = window;
 
+const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
+	const { textColor, backgroundColor } = ownProps;
+	const computedStyles = ( ! textColor || ! backgroundColor ) ? getComputedStyle( node.querySelector( '[contenteditable="true"]' ) ) : null;
+	return {
+		fallbackBackgroundColor: backgroundColor ? undefined : computedStyles.backgroundColor,
+		fallbackTextColor: textColor ? undefined : computedStyles.color,
+	};
+} )( ContrastChecker );
+
 class ParagraphBlock extends Component {
 	constructor() {
 		super( ...arguments );
+		this.nodeRef = null;
+		this.bindRef = this.bindRef.bind( this );
 		this.toggleDropCap = this.toggleDropCap.bind( this );
 	}
 
@@ -40,13 +51,18 @@ class ParagraphBlock extends Component {
 		setAttributes( { dropCap: ! attributes.dropCap } );
 	}
 
+	bindRef( node ) {
+		if ( ! node ) {
+			return;
+		}
+		this.nodeRef = node;
+	}
+
 	render() {
 		const {
 			attributes,
 			setAttributes,
 			insertBlocksAfter,
-			fallbackBackgroundColor,
-			fallbackTextColor,
 			focus,
 			setFocus,
 			mergeBlocks,
@@ -110,10 +126,11 @@ class ParagraphBlock extends Component {
 							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
 						/>
 					</PanelColor>
-					<ContrastChecker
-						textColor={ textColor || fallbackTextColor }
-						backgroundColor={ backgroundColor || fallbackBackgroundColor }
-						isLargeText={ true }
+					<ContrastCheckerWithFallbackStyles
+						node={ this.nodeRef }
+						textColor={ textColor }
+						backgroundColor={ backgroundColor }
+						isLargeText={ fontSize >= 18 }
 					/>
 					<PanelBody title={ __( 'Block Alignment' ) }>
 						<BlockAlignmentToolbar
@@ -123,61 +140,54 @@ class ParagraphBlock extends Component {
 					</PanelBody>
 				</InspectorControls>
 			),
-			<Autocomplete key="editable" completers={ [
-				blockAutocompleter( { onReplace } ),
-				userAutocompleter(),
-			] }>
-				{ ( { isExpanded, listBoxId, activeId } ) => (
-					<Editable
-						tagName="p"
-						className={ classnames( 'wp-block-paragraph', className, {
-							[ `align${ width }` ]: width,
-							'has-background': backgroundColor,
-						} ) }
-						style={ {
-							backgroundColor: backgroundColor,
-							color: textColor,
-							fontSize: fontSize ? fontSize + 'px' : undefined,
-							textAlign: align,
-						} }
-						value={ content }
-						onChange={ ( nextContent ) => {
-							setAttributes( {
-								content: nextContent,
-							} );
-						} }
-						focus={ focus }
-						onFocus={ setFocus }
-						onSplit={ ( before, after, ...blocks ) => {
-							setAttributes( { content: before } );
-							insertBlocksAfter( [
-								...blocks,
-								createBlock( 'core/paragraph', { content: after } ),
-							] );
-						} }
-						onMerge={ mergeBlocks }
-						onReplace={ onReplace }
-						placeholder={ placeholder || __( 'Add text or type / to insert content' ) }
-						aria-autocomplete="list"
-						aria-expanded={ isExpanded }
-						aria-owns={ listBoxId }
-						aria-activedescendant={ activeId }
-					/>
-				) }
-			</Autocomplete>,
+			<div key="editable" ref={ this.bindRef }>
+				<Autocomplete completers={ [
+					blockAutocompleter( { onReplace } ),
+					userAutocompleter(),
+				] }>
+					{ ( { isExpanded, listBoxId, activeId } ) => (
+						<Editable
+							tagName="p"
+							className={ classnames( 'wp-block-paragraph', className, {
+								[ `align${ width }` ]: width,
+								'has-background': backgroundColor,
+							} ) }
+							style={ {
+								backgroundColor: backgroundColor,
+								color: textColor,
+								fontSize: fontSize ? fontSize + 'px' : undefined,
+								textAlign: align,
+							} }
+							value={ content }
+							onChange={ ( nextContent ) => {
+								setAttributes( {
+									content: nextContent,
+								} );
+							} }
+							focus={ focus }
+							onFocus={ setFocus }
+							onSplit={ ( before, after, ...blocks ) => {
+								setAttributes( { content: before } );
+								insertBlocksAfter( [
+									...blocks,
+									createBlock( 'core/paragraph', { content: after } ),
+								] );
+							} }
+							onMerge={ mergeBlocks }
+							onReplace={ onReplace }
+							placeholder={ placeholder || __( 'Add text or type / to insert content' ) }
+							aria-autocomplete="list"
+							aria-expanded={ isExpanded }
+							aria-owns={ listBoxId }
+							aria-activedescendant={ activeId }
+						/>
+					) }
+				</Autocomplete>
+			</div>,
 		];
 	}
 }
 
-const ParagraphBlockFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
-	const { textColor, backgroundColor } = ownProps.attributes;
-	const computedStyles = ( ! textColor || ! backgroundColor ) ? getComputedStyle( node.querySelector( '[contenteditable="true"]' ) ) : null;
-	return {
-		fallbackBackgroundColor: backgroundColor ? undefined : computedStyles.backgroundColor,
-		fallbackTextColor: textColor ? undefined : computedStyles.color,
-	};
-} )( ParagraphBlock );
-
 registerBlockType( 'core/paragraph', {
 	title: __( 'Paragraph' ),
 
@@ -245,9 +255,7 @@ registerBlockType( 'core/paragraph', {
 		}
 	},
 
-	edit( props ) {
-		return <ParagraphBlockFallbackStyles { ...props } />;
-	},
+	edit: ParagraphBlock,
 
 	save( { attributes } ) {
 		const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;

diff --git a/components/higher-order/with-fallback-styles/index.js b/components/higher-order/with-fallback-styles/index.js
@@ -12,7 +12,7 @@ export default ( mapNodeToProps ) => ( WrappedComponent ) => {
 	return class extends Component {
 		constructor() {
 			super( ...arguments );
-			this.nodeRef = null;
+			this.nodeRef = this.props.node;
 			this.state = {
 				fallbackStyles: undefined,
 				grabStylesCompleted: false,
@@ -50,11 +50,8 @@ export default ( mapNodeToProps ) => ( WrappedComponent ) => {
 		}
 
 		render() {
-			return (
-				<div ref={ this.bindRef }>
-					<WrappedComponent { ...this.props } { ...this.state.fallbackStyles } />
-				</div>
-			);
+			const wrappedComponent = <WrappedComponent { ...this.props } { ...this.state.fallbackStyles } />;
+			return this.props.node ? wrappedComponent : <div ref={ this.bindRef }> { wrappedComponent } </div>;
 		}
 	};
 };