From 37c357206293ef2d5983bdff4f8ecd063ab9132a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 20 Mar 2020 09:58:45 +0100 Subject: [PATCH 1/4] 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..1c4daadca90832 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--color--background); + color: var(--wp--color--text); +} + .is-small-text { font-size: 14px; } From 426a6cd3b5db5af30c8fea8d3af5e4b3a12937e9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Mar 2020 16:31:49 +0100 Subject: [PATCH 2/4] Add deprecated version --- .../block-library/src/paragraph/deprecated.js | 120 +++++++++++++++--- 1 file changed, 105 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js index 8c0502d808079f..0e8b7df23093d0 100644 --- a/packages/block-library/src/paragraph/deprecated.js +++ b/packages/block-library/src/paragraph/deprecated.js @@ -38,15 +38,9 @@ const blockAttributes = { textColor: { type: 'string', }, - customTextColor: { - type: 'string', - }, backgroundColor: { type: 'string', }, - customBackgroundColor: { - type: 'string', - }, fontSize: { type: 'string', }, @@ -57,12 +51,103 @@ const blockAttributes = { type: 'string', enum: [ 'ltr', 'rtl' ], }, + style: { + type: 'object', + }, +}; + +const migrateCustomColors = ( attributes ) => { + if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) { + return attributes; + } + const style = { color: {} }; + if ( attributes.customTextColor ) { + style.color.text = attributes.customTextColor; + } + if ( attributes.customBackgroundColor ) { + style.color.background = attributes.customBackgroundColor; + } + return { + ...attributes, + style, + }; }; const deprecated = [ { supports, - attributes: blockAttributes, + attributes: { + ...omit( blockAttributes, [ 'style' ] ), + customTextColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + }, + migrate: migrateCustomColors, + 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, + }; + + return ( + + ); + }, + }, + { + supports, + attributes: { + ...omit( blockAttributes, [ 'style' ] ), + customTextColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + }, + migrate: migrateCustomColors, save( { attributes } ) { const { align, @@ -116,11 +201,18 @@ const deprecated = [ { supports, attributes: { - ...blockAttributes, + ...omit( blockAttributes, [ 'style' ] ), + customTextColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, width: { type: 'string', }, }, + migrate: migrateCustomColors, save( { attributes } ) { const { width, @@ -179,9 +271,7 @@ const deprecated = [ type: 'number', }, }, - 'customFontSize', - 'customTextColor', - 'customBackgroundColor' + [ 'customFontSize', 'style' ] ), save( { attributes } ) { const { @@ -215,8 +305,8 @@ const deprecated = [ ); }, migrate( attributes ) { - return omit( - { + return migrateCustomColors( + omit( { ...attributes, customFontSize: isFinite( attributes.fontSize ) ? attributes.fontSize @@ -231,8 +321,8 @@ const deprecated = [ '#' === attributes.backgroundColor[ 0 ] ? attributes.backgroundColor : undefined, - }, - [ 'fontSize', 'textColor', 'backgroundColor' ] + } ), + [ 'fontSize', 'textColor', 'backgroundColor', 'style' ] ); }, }, From dbe75720dd2289845433ac796f7499513593cdce Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Mar 2020 16:43:38 +0100 Subject: [PATCH 3/4] More specificity to the custom colors --- packages/block-library/src/paragraph/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 1c4daadca90832..f43612c851d1fe 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -1,4 +1,4 @@ -p { +:root p { background-color: var(--wp--color--background); color: var(--wp--color--text); } From 95dad4b32116cda81f081bb0f7baeec98a05ab27 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 27 Mar 2020 10:14:58 +0100 Subject: [PATCH 4/4] Fix tests --- packages/block-editor/src/hooks/color.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 30762674ffec9d..f02476e82caeca 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -94,10 +94,16 @@ export function addSaveProps( props, blockType, attributes ) { backgroundColor ); const textClass = getColorClassName( 'color', textColor ); - props.className = classnames( props.className, backgroundClass, textClass, { - 'has-text-color': textColor || style?.color?.text, - 'has-background': backgroundColor || style?.color?.background, - } ); + const newClassName = classnames( + props.className, + backgroundClass, + textClass, + { + 'has-text-color': textColor || style?.color?.text, + 'has-background': backgroundColor || style?.color?.background, + } + ); + props.className = newClassName ? newClassName : undefined; return props; }