From 97fbcbf25c811598a1adce87f459a99d599f13c3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 20 Mar 2020 09:58:45 +0100 Subject: [PATCH] Update the paragraph block to use the colors support key --- .../block-library/src/paragraph/block.json | 12 -- packages/block-library/src/paragraph/edit.js | 119 +++++++----------- packages/block-library/src/paragraph/index.js | 1 + packages/block-library/src/paragraph/save.js | 21 +--- .../block-library/src/paragraph/style.scss | 5 + 5 files changed, 51 insertions(+), 107 deletions(-) diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 4f1d668b7c4d5c..ff252ec7760a3a 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -18,18 +18,6 @@ "placeholder": { "type": "string" }, - "textColor": { - "type": "string" - }, - "customTextColor": { - "type": "string" - }, - "backgroundColor": { - "type": "string" - }, - "customBackgroundColor": { - "type": "string" - }, "fontSize": { "type": "string" }, diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 105b1a502c763e..cda1879390d2cf 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -15,7 +15,6 @@ import { InspectorControls, RichText, withFontSizes, - __experimentalUseColors, __experimentalBlock as Block, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; @@ -87,27 +86,6 @@ function ParagraphBlock( { const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ fontSize.size, ] ); - const { - TextColor, - BackgroundColor, - InspectorControlsColorPanel, - } = __experimentalUseColors( - [ - { name: 'textColor', property: 'color' }, - { name: 'backgroundColor', className: 'has-background' }, - ], - { - contrastCheckers: [ - { - backgroundColor: true, - textColor: true, - fontSize: fontSize.size, - }, - ], - colorDetector: { targetRef: ref }, - }, - [ fontSize.size ] - ); return ( <> @@ -145,60 +123,51 @@ function ParagraphBlock( { /> - { InspectorControlsColorPanel } - - - - setAttributes( { content: newContent } ) - } - onSplit={ ( value ) => { - if ( ! value ) { - return createBlock( name ); - } + + setAttributes( { content: newContent } ) + } + onSplit={ ( value ) => { + if ( ! value ) { + return createBlock( name ); + } - return createBlock( name, { - ...attributes, - content: value, - } ); - } } - onMerge={ mergeBlocks } - onReplace={ onReplace } - onRemove={ - onReplace ? () => onReplace( [] ) : undefined - } - aria-label={ - content - ? __( 'Paragraph block' ) - : __( - 'Empty block; start writing or type forward slash to choose a block' - ) - } - placeholder={ - placeholder || - __( 'Start writing or type / to choose a block' ) - } - __unstableEmbedURLOnPaste - __unstableAllowPrefixTransformations - /> - - + return createBlock( name, { + ...attributes, + content: value, + } ); + } } + onMerge={ mergeBlocks } + onReplace={ onReplace } + onRemove={ onReplace ? () => onReplace( [] ) : undefined } + aria-label={ + content + ? __( 'Paragraph block' ) + : __( + 'Empty block; start writing or type forward slash to choose a block' + ) + } + placeholder={ + placeholder || + __( 'Start writing or type / to choose a block' ) + } + __unstableEmbedURLOnPaste + __unstableAllowPrefixTransformations + /> ); } diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 7fa310086cb459..c04c011c1b0c67 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -40,6 +40,7 @@ export const settings = { className: false, __unstablePasteTextInline: true, lightBlockWrapper: true, + __experimentalColor: true, }, __experimentalLabel( attributes, { context } ) { if ( context === 'accessibility' ) { diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js index 2cdeeb46e60c9c..9dadd6e01a7ac8 100644 --- a/packages/block-library/src/paragraph/save.js +++ b/packages/block-library/src/paragraph/save.js @@ -6,46 +6,27 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - getColorClassName, - getFontSizeClass, - RichText, -} from '@wordpress/block-editor'; +import { getFontSizeClass, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { align, content, dropCap, - backgroundColor, - textColor, - customBackgroundColor, - customTextColor, fontSize, customFontSize, direction, } = attributes; - const textClass = getColorClassName( 'color', textColor ); - const backgroundClass = getColorClassName( - 'background-color', - backgroundColor - ); const fontSizeClass = getFontSizeClass( fontSize ); const className = classnames( { - 'has-text-color': textColor || customTextColor, - 'has-background': backgroundColor || customBackgroundColor, 'has-drop-cap': dropCap, [ `has-text-align-${ align }` ]: align, [ fontSizeClass ]: fontSizeClass, - [ textClass ]: textClass, - [ backgroundClass ]: backgroundClass, } ); const styles = { - backgroundColor: backgroundClass ? undefined : customBackgroundColor, - color: textClass ? undefined : customTextColor, fontSize: fontSizeClass ? undefined : customFontSize, }; diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index ddea388de29ba5..6fc2288e8a6b0a 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -1,3 +1,8 @@ +p { + background-color: var(--wp--background-color); + color: var(--wp--text-color); +} + .is-small-text { font-size: 14px; }