diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss new file mode 100644 index 00000000000000..a50c04177658f0 --- /dev/null +++ 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 index 7f4907bdb27d4a..80413d86e09a1c 100644 --- 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 } ) } /> + { + 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 ; + return ; }, save( { attributes } ) { diff --git a/blocks/library/paragraph/style.scss b/blocks/library/paragraph/style.scss index ba590421b23b99..ff9ab516e46def 100644 --- 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; +}