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;
+}