Paragraph block: Added contrast verification.

WordPress · Nov 24, 2017 · 775428e · 775428e
1 parent 4d78e5e
commit 775428e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss
@@ -0,0 +1,3 @@
+.editor-block-list__block:not( .is-multi-selected ) .wp-block-paragraph {
+	background: white;
+}
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -7,12 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { concatChildren } from '@wordpress/element';
-import { Autocomplete, PanelBody, PanelColor } from '@wordpress/components';
+import { concatChildren, Component } from '@wordpress/element';
+import { Autocomplete, PanelBody, PanelColor, withFallbackStyles } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import './editor.scss';
 import './style.scss';
 import { registerBlockType, createBlock, setDefaultBlockName } from '../../api';
 import { blockAutocompleter, userAutocompleter } from '../../autocompleters';
@@ -25,7 +26,9 @@ import ToggleControl from '../../inspector-controls/toggle-control';
 import RangeControl from '../../inspector-controls/range-control';
 import ColorPalette from '../../color-palette';
 import BlockDescription from '../../block-description';
+import ContrastChecker from '../../contrast-checker';
 
+const { getComputedStyle } = window;
 
 class ParagraphBlock extends Component {
 	constructor() {
@@ -43,6 +46,8 @@ class ParagraphBlock extends Component {
 			attributes,
 			setAttributes,
 			insertBlocksAfter,
+			fallbackBackgroundColor,
+			fallbackTextColor,
 			focus,
 			setFocus,
 			mergeBlocks,
@@ -106,6 +111,11 @@ class ParagraphBlock extends Component {
 							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
 						/>
 					</PanelColor>
+					<ContrastChecker
+						textColor={ textColor || fallbackTextColor }
+						backgroundColor={ backgroundColor || fallbackBackgroundColor }
+						isLargeText={ true }
+					/>
 					<PanelBody title={ __( 'Block Alignment' ) }>
 						<BlockAlignmentToolbar
 							value={ width }
@@ -160,6 +170,15 @@ class ParagraphBlock extends Component {
 	}
 }
 
+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' ),
 
@@ -231,7 +250,7 @@ registerBlockType( 'core/paragraph', {
 	},
 
 	edit( props ) {
-		return <ParagraphBlock { ...props } />;
+		return <ParagraphBlockFallbackStyles { ...props } />;
 	},
 
 	save( { attributes } ) {

diff --git a/blocks/library/paragraph/style.scss b/blocks/library/paragraph/style.scss
@@ -18,3 +18,7 @@ p.has-drop-cap:not( :focus )  {
 p.has-background {
 	padding: 20px 30px;
 }
+
+.editor-block-list__block:not( .is-multi-selected ) .wp-block-paragraph {
+	background: white;
+}