From 32eb8988544a8c9d79e7be600f908e15bec596df Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Mar 2022 12:19:23 +1300 Subject: [PATCH 01/26] Modify edit and save methods of separator to use color block supports --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/separator/block.json | 6 ++++- packages/block-library/src/separator/edit.js | 25 +++---------------- packages/block-library/src/separator/save.js | 18 ++++++------- .../src/separator/separator-settings.js | 24 ------------------ 5 files changed, 18 insertions(+), 57 deletions(-) delete mode 100644 packages/block-library/src/separator/separator-settings.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 9c5fb95fb89e7..1d987da1f8da9 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -698,7 +698,7 @@ Create a break between ideas or sections with a horizontal separator. ([Source]( - **Name:** core/separator - **Category:** design -- **Supports:** align (center, full, wide), anchor +- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~text~~) - **Attributes:** color, customColor ## Shortcode diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index ae288d37c28ea..6bded2b9adf89 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -17,7 +17,11 @@ }, "supports": { "anchor": true, - "align": [ "center", "wide", "full" ] + "align": [ "center", "wide", "full" ], + "color": { + "gradients": true, + "text": false + } }, "styles": [ { "name": "default", "label": "Default", "isDefault": true }, diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index f611abde42a62..7c321aa6fab0d 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -1,36 +1,17 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { HorizontalRule } from '@wordpress/components'; -import { withColors, useBlockProps } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ -import SeparatorSettings from './separator-settings'; +import { useBlockProps } from '@wordpress/block-editor'; -function SeparatorEdit( { color, setColor, className } ) { +export default function SeparatorEdit( { className } ) { return ( <> - ); } - -export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit ); diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index a24127cada56d..02770df632e4f 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -9,25 +9,25 @@ import classnames from 'classnames'; import { getColorClassName, useBlockProps } from '@wordpress/block-editor'; export default function separatorSave( { attributes } ) { - const { color, customColor } = attributes; + const { backgroundColor, style, opacity } = attributes; + const customColor = style?.color?.background; // The hr support changing color using border-color, since border-color // is not yet supported in the color palette, we use background-color. - const backgroundClass = getColorClassName( 'background-color', color ); + // The dots styles uses text for the dots, to change those dots color is // using color, not backgroundColor. - const colorClass = getColorClassName( 'color', color ); + const colorClass = getColorClassName( 'color', backgroundColor ); const className = classnames( { - 'has-text-color has-background': color || customColor, - [ backgroundClass ]: backgroundClass, + 'has-text-color': backgroundColor || customColor, [ colorClass ]: colorClass, + 'has-css-opacity': opacity === 'css', + 'has-alpha-channel-opacity': opacity === 'alpha-channel', } ); - const style = { - backgroundColor: backgroundClass ? undefined : customColor, + const styles = { color: colorClass ? undefined : customColor, }; - - return
; + return
; } diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js deleted file mode 100644 index e1d772ca96ce0..0000000000000 --- a/packages/block-library/src/separator/separator-settings.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor'; - -const SeparatorSettings = ( { color, setColor } ) => ( - - - -); - -export default SeparatorSettings; From e59364e232ae44843103634ee8ece328ad563ef4 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 3 Feb 2022 17:31:33 +1300 Subject: [PATCH 02/26] Fix the editor code --- packages/block-library/src/separator/edit.js | 26 ++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 7c321aa6fab0d..db5e112eb7ba3 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -1,15 +1,37 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { HorizontalRule } from '@wordpress/components'; -import { useBlockProps } from '@wordpress/block-editor'; +import { useBlockProps, getColorClassName } from '@wordpress/block-editor'; + +export default function SeparatorEdit( { + attributes: { backgroundColor, style }, +} ) { + const customColor = style?.color?.background; + // The dots styles uses text for the dots, to change those dots color is + // using color, not backgroundColor. + const colorClass = getColorClassName( 'color', backgroundColor ); + + const className = classnames( { + 'has-text-color': backgroundColor || customColor, + [ colorClass ]: colorClass, + } ); + + const styles = { + color: colorClass ? undefined : customColor, + }; -export default function SeparatorEdit( { className } ) { return ( <> From 3452d35834e515b2479b2835dc16524cbcf50c08 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 4 Feb 2022 15:14:54 +1300 Subject: [PATCH 03/26] Add deprecation --- .../block-library/src/separator/deprecated.js | 59 +++++++++++++++++++ packages/block-library/src/separator/index.js | 2 + 2 files changed, 61 insertions(+) create mode 100644 packages/block-library/src/separator/deprecated.js diff --git a/packages/block-library/src/separator/deprecated.js b/packages/block-library/src/separator/deprecated.js new file mode 100644 index 0000000000000..8497e96d9b2c6 --- /dev/null +++ b/packages/block-library/src/separator/deprecated.js @@ -0,0 +1,59 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { omit } from 'lodash'; + +/** + * WordPress dependencies + */ +import { getColorClassName, useBlockProps } from '@wordpress/block-editor'; + +const v1 = { + attributes: { + color: { + type: 'string', + }, + customColor: { + type: 'string', + }, + }, + save( { attributes } ) { + const { color, customColor } = attributes; + + // the hr support changing color using border-color, since border-color + // is not yet supported in the color palette, we use background-color + const backgroundClass = getColorClassName( 'background-color', color ); + // the dots styles uses text for the dots, to change those dots color is + // using color, not backgroundColor + const colorClass = getColorClassName( 'color', color ); + + const className = classnames( { + 'has-text-color has-background': color || customColor, + [ backgroundClass ]: backgroundClass, + [ colorClass ]: colorClass, + } ); + + const style = { + backgroundColor: backgroundClass ? undefined : customColor, + color: colorClass ? undefined : customColor, + }; + + return
; + }, + isEligible( { color, customColor } ) { + return color || customColor; + }, + migrate( attributes ) { + const { color, customColor } = attributes; + return { + ...omit( attributes, [ 'color', 'customColor' ] ), + backgroundColor: color ? color : undefined, + style: customColor + ? { color: { background: customColor } } + : undefined, + }; + }, +}; + +export default [ v1 ]; diff --git a/packages/block-library/src/separator/index.js b/packages/block-library/src/separator/index.js index 77e3a46dc7ae3..4a73823a81224 100644 --- a/packages/block-library/src/separator/index.js +++ b/packages/block-library/src/separator/index.js @@ -10,6 +10,7 @@ import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; +import deprecated from './deprecated'; const { name } = metadata; @@ -26,4 +27,5 @@ export const settings = { transforms, edit, save, + deprecated, }; From c914b84136c63222b7a947035e1006cbf28d6bc6 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 4 Feb 2022 16:27:12 +1300 Subject: [PATCH 04/26] Fix issue with incorrect background color for dotted style in editor --- packages/block-library/src/separator/edit.js | 16 +++++++++++----- packages/block-library/src/separator/editor.scss | 6 ++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index db5e112eb7ba3..6193563d49789 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -7,11 +7,16 @@ import classnames from 'classnames'; * WordPress dependencies */ import { HorizontalRule } from '@wordpress/components'; -import { useBlockProps, getColorClassName } from '@wordpress/block-editor'; +import { + useBlockProps, + getColorClassName, + __experimentalUseColorProps as useColorProps, +} from '@wordpress/block-editor'; + +export default function SeparatorEdit( { attributes } ) { + const { backgroundColor, style } = attributes; + const color = useColorProps( attributes ); -export default function SeparatorEdit( { - attributes: { backgroundColor, style }, -} ) { const customColor = style?.color?.background; // The dots styles uses text for the dots, to change those dots color is // using color, not backgroundColor. @@ -23,7 +28,8 @@ export default function SeparatorEdit( { } ); const styles = { - color: colorClass ? undefined : customColor, + color: color?.style?.backgroundColor, + backgroundColor: color?.style?.backgroundColor, }; return ( diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss index 24e940684279e..4a833b4e2e7c4 100644 --- a/packages/block-library/src/separator/editor.scss +++ b/packages/block-library/src/separator/editor.scss @@ -2,4 +2,10 @@ // Prevent margin collapsing so the area to select the separator is bigger. padding-top: 0.1px; padding-bottom: 0.1px; + + // This is also set in style.scss, but need a higher specificty in editor + // due to the way that color block supports adds additional background color styles. + &.wp-block-separator.is-style-dots { + background: none !important; + } } From d9dfdb1fabb536ea8d92c6cc8dfe6dd32b1d2e3a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 4 Feb 2022 17:16:13 +1300 Subject: [PATCH 05/26] Add new fixtures --- .../fixtures/blocks/core__separator-color.html | 3 +++ .../fixtures/blocks/core__separator-color.json | 12 ++++++++++++ .../blocks/core__separator-color.parsed.json | 13 +++++++++++++ .../core__separator-color.serialized.html | 3 +++ .../blocks/core__separator-custom-color.html | 3 +++ .../blocks/core__separator-custom-color.json | 16 ++++++++++++++++ .../core__separator-custom-color.parsed.json | 17 +++++++++++++++++ ...core__separator-custom-color.serialized.html | 3 +++ .../fixtures/blocks/core__separator.html | 6 +++--- .../fixtures/blocks/core__separator.json | 7 +++++-- .../fixtures/blocks/core__separator.parsed.json | 4 ++-- .../core__separator__deprecated-color-v1.html | 3 +++ .../core__separator__deprecated-color-v1.json | 12 ++++++++++++ ...__separator__deprecated-color-v1.parsed.json | 13 +++++++++++++ ...parator__deprecated-color-v1.serialized.html | 3 +++ ...__separator__deprecated-custom-color-v1.html | 3 +++ ...__separator__deprecated-custom-color-v1.json | 16 ++++++++++++++++ ...ator__deprecated-custom-color-v1.parsed.json | 13 +++++++++++++ ...__deprecated-custom-color-v1.serialized.html | 3 +++ 19 files changed, 146 insertions(+), 7 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__separator-color.html create mode 100644 test/integration/fixtures/blocks/core__separator-color.json create mode 100644 test/integration/fixtures/blocks/core__separator-color.parsed.json create mode 100644 test/integration/fixtures/blocks/core__separator-color.serialized.html create mode 100644 test/integration/fixtures/blocks/core__separator-custom-color.html create mode 100644 test/integration/fixtures/blocks/core__separator-custom-color.json create mode 100644 test/integration/fixtures/blocks/core__separator-custom-color.parsed.json create mode 100644 test/integration/fixtures/blocks/core__separator-custom-color.serialized.html create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-color-v1.html create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-color-v1.parsed.json create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.html create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.parsed.json create mode 100644 test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html diff --git a/test/integration/fixtures/blocks/core__separator-color.html b/test/integration/fixtures/blocks/core__separator-color.html new file mode 100644 index 0000000000000..f593be105e493 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-color.html @@ -0,0 +1,3 @@ + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-color.json b/test/integration/fixtures/blocks/core__separator-color.json new file mode 100644 index 0000000000000..d5a0837890d93 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-color.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/separator", + "isValid": true, + "attributes": { + "backgroundColor": "accent" + }, + "innerBlocks": [], + "originalContent": "
" + } +] diff --git a/test/integration/fixtures/blocks/core__separator-color.parsed.json b/test/integration/fixtures/blocks/core__separator-color.parsed.json new file mode 100644 index 0000000000000..41ff4a8850c45 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-color.parsed.json @@ -0,0 +1,13 @@ +[ + { + "blockName": "core/separator", + "attrs": { + "backgroundColor": "accent" + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__separator-color.serialized.html b/test/integration/fixtures/blocks/core__separator-color.serialized.html new file mode 100644 index 0000000000000..e6d3d43e9d931 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-color.serialized.html @@ -0,0 +1,3 @@ + +
+ diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.html b/test/integration/fixtures/blocks/core__separator-custom-color.html new file mode 100644 index 0000000000000..60ef2cc1ec828 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-custom-color.html @@ -0,0 +1,3 @@ + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.json b/test/integration/fixtures/blocks/core__separator-custom-color.json new file mode 100644 index 0000000000000..f79d3cc123d25 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-custom-color.json @@ -0,0 +1,16 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/separator", + "isValid": true, + "attributes": { + "style": { + "color": { + "background": "#5da54c" + } + } + }, + "innerBlocks": [], + "originalContent": "
" + } +] diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json new file mode 100644 index 0000000000000..e81138c8eb2bf --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json @@ -0,0 +1,17 @@ +[ + { + "blockName": "core/separator", + "attrs": { + "style": { + "color": { + "background": "#5da54c" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html new file mode 100644 index 0000000000000..1a71eee75033b --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html @@ -0,0 +1,3 @@ + +
+ diff --git a/test/integration/fixtures/blocks/core__separator.html b/test/integration/fixtures/blocks/core__separator.html index d835a483147f1..6750aea5f1e8d 100644 --- a/test/integration/fixtures/blocks/core__separator.html +++ b/test/integration/fixtures/blocks/core__separator.html @@ -1,3 +1,3 @@ - -
- + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator.json b/test/integration/fixtures/blocks/core__separator.json index 15b95a169d2c7..d016853f0c040 100644 --- a/test/integration/fixtures/blocks/core__separator.json +++ b/test/integration/fixtures/blocks/core__separator.json @@ -2,7 +2,10 @@ { "name": "core/separator", "isValid": true, - "attributes": {}, - "innerBlocks": [] + "attributes": { + "opacity": "alpha-channel" + }, + "innerBlocks": [], + "originalContent": "
" } ] diff --git a/test/integration/fixtures/blocks/core__separator.parsed.json b/test/integration/fixtures/blocks/core__separator.parsed.json index e390a6c511002..c1a9e859bd6ed 100644 --- a/test/integration/fixtures/blocks/core__separator.parsed.json +++ b/test/integration/fixtures/blocks/core__separator.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/separator", "attrs": {}, "innerBlocks": [], - "innerHTML": "\n
\n", - "innerContent": [ "\n
\n" ] + "innerHTML": "\n
\n", + "innerContent": [ "\n
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.html b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.html new file mode 100644 index 0000000000000..ce0aa0fd3c2d7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.html @@ -0,0 +1,3 @@ + +
+ diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json new file mode 100644 index 0000000000000..d5a0837890d93 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/separator", + "isValid": true, + "attributes": { + "backgroundColor": "accent" + }, + "innerBlocks": [], + "originalContent": "
" + } +] diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.parsed.json b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.parsed.json new file mode 100644 index 0000000000000..a9ef33d331227 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.parsed.json @@ -0,0 +1,13 @@ +[ + { + "blockName": "core/separator", + "attrs": { + "color": "accent" + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html new file mode 100644 index 0000000000000..e6d3d43e9d931 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html @@ -0,0 +1,3 @@ + +
+ diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.html b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.html new file mode 100644 index 0000000000000..88cd77b74c4ca --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.html @@ -0,0 +1,3 @@ + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json new file mode 100644 index 0000000000000..c9d605c77cf5b --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json @@ -0,0 +1,16 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/separator", + "isValid": true, + "attributes": { + "style": { + "color": { + "background": "#cc1d1d" + } + } + }, + "innerBlocks": [], + "originalContent": "
" + } +] diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.parsed.json b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.parsed.json new file mode 100644 index 0000000000000..db8bf9f7717b7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.parsed.json @@ -0,0 +1,13 @@ +[ + { + "blockName": "core/separator", + "attrs": { + "customColor": "#cc1d1d" + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html new file mode 100644 index 0000000000000..7ed24c52b028c --- /dev/null +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html @@ -0,0 +1,3 @@ + +
+ From 946a00b1e68a66d38bcad94e746add4a28c0ec71 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 8 Feb 2022 10:17:20 +1300 Subject: [PATCH 06/26] Only apply default opacity style for v1 of block --- packages/block-library/src/separator/edit.js | 2 +- packages/block-library/src/separator/save.js | 2 +- packages/block-library/src/separator/theme.scss | 6 ++++++ test/integration/fixtures/blocks/core__separator-color.html | 2 +- test/integration/fixtures/blocks/core__separator-color.json | 2 +- .../fixtures/blocks/core__separator-color.parsed.json | 4 ++-- .../fixtures/blocks/core__separator-color.serialized.html | 2 +- .../fixtures/blocks/core__separator-custom-color.html | 2 +- .../fixtures/blocks/core__separator-custom-color.json | 2 +- .../blocks/core__separator-custom-color.parsed.json | 4 ++-- .../blocks/core__separator-custom-color.serialized.html | 2 +- .../core__separator__deprecated-color-v1.serialized.html | 2 +- ...e__separator__deprecated-custom-color-v1.serialized.html | 2 +- 13 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 6193563d49789..77cda7b553b5f 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -23,7 +23,7 @@ export default function SeparatorEdit( { attributes } ) { const colorClass = getColorClassName( 'color', backgroundColor ); const className = classnames( { - 'has-text-color': backgroundColor || customColor, + 'has-text-color has-alpha-channel': backgroundColor || customColor, [ colorClass ]: colorClass, } ); diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index 02770df632e4f..ee71252288952 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -20,7 +20,7 @@ export default function separatorSave( { attributes } ) { const colorClass = getColorClassName( 'color', backgroundColor ); const className = classnames( { - 'has-text-color': backgroundColor || customColor, + 'has-text-color has-alpha-channel': backgroundColor || customColor, [ colorClass ]: colorClass, 'has-css-opacity': opacity === 'css', 'has-alpha-channel-opacity': opacity === 'alpha-channel', diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index 397142cf39022..67e5463197105 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -5,6 +5,12 @@ margin-right: auto; opacity: 0.4; + // V2 of the block can set opacity via the backgroundColor + // alpha channel so reset the default opacity. + &.has-alpha-channel { + opacity: initial; + } + // Default, thin style &:not(.is-style-wide):not(.is-style-dots) { width: 100px; diff --git a/test/integration/fixtures/blocks/core__separator-color.html b/test/integration/fixtures/blocks/core__separator-color.html index f593be105e493..6e115890cab17 100644 --- a/test/integration/fixtures/blocks/core__separator-color.html +++ b/test/integration/fixtures/blocks/core__separator-color.html @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-color.json b/test/integration/fixtures/blocks/core__separator-color.json index d5a0837890d93..b5ffeffbfd3f2 100644 --- a/test/integration/fixtures/blocks/core__separator-color.json +++ b/test/integration/fixtures/blocks/core__separator-color.json @@ -7,6 +7,6 @@ "backgroundColor": "accent" }, "innerBlocks": [], - "originalContent": "
" + "originalContent": "
" } ] diff --git a/test/integration/fixtures/blocks/core__separator-color.parsed.json b/test/integration/fixtures/blocks/core__separator-color.parsed.json index 41ff4a8850c45..4b359819bbdbe 100644 --- a/test/integration/fixtures/blocks/core__separator-color.parsed.json +++ b/test/integration/fixtures/blocks/core__separator-color.parsed.json @@ -5,9 +5,9 @@ "backgroundColor": "accent" }, "innerBlocks": [], - "innerHTML": "\n
\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n
\n" + "\n
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__separator-color.serialized.html b/test/integration/fixtures/blocks/core__separator-color.serialized.html index e6d3d43e9d931..649e84076acff 100644 --- a/test/integration/fixtures/blocks/core__separator-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-color.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.html b/test/integration/fixtures/blocks/core__separator-custom-color.html index 60ef2cc1ec828..ece8235e341bb 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.html +++ b/test/integration/fixtures/blocks/core__separator-custom-color.html @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.json b/test/integration/fixtures/blocks/core__separator-custom-color.json index f79d3cc123d25..f61fdd2dfbf9c 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.json @@ -11,6 +11,6 @@ } }, "innerBlocks": [], - "originalContent": "
" + "originalContent": "
" } ] diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json index e81138c8eb2bf..d17ee3ec29dc5 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json @@ -9,9 +9,9 @@ } }, "innerBlocks": [], - "innerHTML": "\n
\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n
\n" + "\n
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html index 1a71eee75033b..f8579430857d3 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html index e6d3d43e9d931..649e84076acff 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html index 7ed24c52b028c..5eca7673c36c8 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html @@ -1,3 +1,3 @@ -
+
From 72bc5958fa94c7e351fe8d58e82726c1d4ee27e6 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Mar 2022 12:23:58 +1300 Subject: [PATCH 07/26] Add an opacity attribute so that the deprecated blocks keep the default opacity even when edited --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/separator/block.json | 6 ++--- .../block-library/src/separator/deprecated.js | 1 + packages/block-library/src/separator/edit.js | 24 ++++++++++++++++--- packages/block-library/src/separator/save.js | 2 +- .../block-library/src/separator/theme.scss | 7 ++++-- .../blocks/core__separator-color.json | 3 ++- .../core__separator-color.serialized.html | 4 ++-- .../blocks/core__separator-custom-color.json | 3 ++- ...re__separator-custom-color.serialized.html | 2 +- .../core__separator__deprecated-color-v1.json | 3 ++- ...rator__deprecated-color-v1.serialized.html | 4 ++-- ...deprecated-custom-color-v1.serialized.html | 2 +- 13 files changed, 43 insertions(+), 20 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 1d987da1f8da9..3327e848bc7a5 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -699,7 +699,7 @@ Create a break between ideas or sections with a horizontal separator. ([Source]( - **Name:** core/separator - **Category:** design - **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~text~~) -- **Attributes:** color, customColor +- **Attributes:** opacity ## Shortcode diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index 6bded2b9adf89..c69eba02ae5f6 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -8,10 +8,7 @@ "keywords": [ "horizontal-line", "hr", "divider" ], "textdomain": "default", "attributes": { - "color": { - "type": "string" - }, - "customColor": { + "opacity": { "type": "string" } }, @@ -20,6 +17,7 @@ "align": [ "center", "wide", "full" ], "color": { "gradients": true, + "background": true, "text": false } }, diff --git a/packages/block-library/src/separator/deprecated.js b/packages/block-library/src/separator/deprecated.js index 8497e96d9b2c6..49be5db8c769f 100644 --- a/packages/block-library/src/separator/deprecated.js +++ b/packages/block-library/src/separator/deprecated.js @@ -49,6 +49,7 @@ const v1 = { return { ...omit( attributes, [ 'color', 'customColor' ] ), backgroundColor: color ? color : undefined, + opacity: color ? 'default' : undefined, style: customColor ? { color: { background: customColor } } : undefined, diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 77cda7b553b5f..5b81e5634f969 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -6,25 +6,43 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { useEffect } from '@wordpress/element'; import { HorizontalRule } from '@wordpress/components'; import { useBlockProps, getColorClassName, __experimentalUseColorProps as useColorProps, } from '@wordpress/block-editor'; +import { usePrevious } from '@wordpress/compose'; -export default function SeparatorEdit( { attributes } ) { - const { backgroundColor, style } = attributes; +export default function SeparatorEdit( { attributes, setAttributes } ) { + const { backgroundColor, style, opacity } = attributes; const color = useColorProps( attributes ); + // V1 blocks expect to have a default opacity of 0.4, so on transformation + // get an opacity attribute set to default in order to assign a class name + // to provide this opactiy. Once the user changes the color this is removed + // and opacity can then be set via the color block support alpha channel. + const previousClassName = usePrevious( color.className ); + useEffect( () => { + if ( + previousClassName && + opacity === 'default' && + color.className !== previousClassName + ) { + setAttributes( { opacity: undefined } ); + } + }, [ color.className, previousClassName ] ); + const customColor = style?.color?.background; // The dots styles uses text for the dots, to change those dots color is // using color, not backgroundColor. const colorClass = getColorClassName( 'color', backgroundColor ); const className = classnames( { - 'has-text-color has-alpha-channel': backgroundColor || customColor, + 'has-text-color': backgroundColor || customColor, [ colorClass ]: colorClass, + 'has-default-opacity': opacity === 'default', } ); const styles = { diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index ee71252288952..02770df632e4f 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -20,7 +20,7 @@ export default function separatorSave( { attributes } ) { const colorClass = getColorClassName( 'color', backgroundColor ); const className = classnames( { - 'has-text-color has-alpha-channel': backgroundColor || customColor, + 'has-text-color': backgroundColor || customColor, [ colorClass ]: colorClass, 'has-css-opacity': opacity === 'css', 'has-alpha-channel-opacity': opacity === 'alpha-channel', diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index 67e5463197105..290fca057d65b 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -3,11 +3,14 @@ border-bottom: 2px solid currentColor; margin-left: auto; margin-right: auto; - opacity: 0.4; // V2 of the block can set opacity via the backgroundColor // alpha channel so reset the default opacity. - &.has-alpha-channel { + &.has-default-opacity { + opacity: 0.4; + } + + &:not(.has-default-opacity) { opacity: initial; } diff --git a/test/integration/fixtures/blocks/core__separator-color.json b/test/integration/fixtures/blocks/core__separator-color.json index b5ffeffbfd3f2..c9868e95663f7 100644 --- a/test/integration/fixtures/blocks/core__separator-color.json +++ b/test/integration/fixtures/blocks/core__separator-color.json @@ -4,7 +4,8 @@ "name": "core/separator", "isValid": true, "attributes": { - "backgroundColor": "accent" + "backgroundColor": "accent", + "className": "has-alpha-channel" }, "innerBlocks": [], "originalContent": "
" diff --git a/test/integration/fixtures/blocks/core__separator-color.serialized.html b/test/integration/fixtures/blocks/core__separator-color.serialized.html index 649e84076acff..23a2d07aa1513 100644 --- a/test/integration/fixtures/blocks/core__separator-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-color.serialized.html @@ -1,3 +1,3 @@ - -
+ +
diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.json b/test/integration/fixtures/blocks/core__separator-custom-color.json index f61fdd2dfbf9c..317a63b71c9e3 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.json @@ -8,7 +8,8 @@ "color": { "background": "#5da54c" } - } + }, + "className": "has-alpha-channel" }, "innerBlocks": [], "originalContent": "
" diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html index f8579430857d3..463a5553e61ef 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json index d5a0837890d93..9f79d05e883eb 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json @@ -4,7 +4,8 @@ "name": "core/separator", "isValid": true, "attributes": { - "backgroundColor": "accent" + "backgroundColor": "accent", + "opacity": "default" }, "innerBlocks": [], "originalContent": "
" diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html index 649e84076acff..5ff1b1bc823ea 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html @@ -1,3 +1,3 @@ - -
+ +
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html index 5eca7673c36c8..7ed24c52b028c 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html @@ -1,3 +1,3 @@ -
+
From 620a2be34b9a7faf340b23ed4c39dbd6f151394f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 11 Feb 2022 14:51:49 +1300 Subject: [PATCH 08/26] Typo fix Co-authored-by: Ramon --- packages/block-library/src/separator/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss index 4a833b4e2e7c4..a6e58b49a6312 100644 --- a/packages/block-library/src/separator/editor.scss +++ b/packages/block-library/src/separator/editor.scss @@ -3,7 +3,7 @@ padding-top: 0.1px; padding-bottom: 0.1px; - // This is also set in style.scss, but need a higher specificty in editor + // This is also set in style.scss, but needs a higher specificity in editor // due to the way that color block supports adds additional background color styles. &.wp-block-separator.is-style-dots { background: none !important; From 6cc4459365903a5f1fbc36a50183d15c0fa4d2b3 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 11 Feb 2022 16:38:36 +1300 Subject: [PATCH 09/26] Update to ensure deprecated opacity is also applied on blocks with no color set --- .../block-library/src/separator/deprecated.js | 6 +++--- packages/block-library/src/separator/edit.js | 16 ++++++++++++---- packages/block-library/src/separator/theme.scss | 4 ++-- .../fixtures/blocks/core__separator-color.html | 4 ++-- .../fixtures/blocks/core__separator-color.json | 6 +++--- .../blocks/core__separator-color.parsed.json | 7 ++++--- .../blocks/core__separator-color.serialized.html | 4 ++-- .../blocks/core__separator-custom-color.html | 4 ++-- .../blocks/core__separator-custom-color.json | 6 +++--- .../core__separator-custom-color.parsed.json | 5 +++-- .../core__separator-custom-color.serialized.html | 4 ++-- .../fixtures/blocks/core__separator.html | 4 ++-- .../fixtures/blocks/core__separator.parsed.json | 10 +++++++--- .../blocks/core__separator.serialized.html | 4 ++-- .../core__separator__deprecated-color-v1.json | 2 +- ...eparator__deprecated-color-v1.serialized.html | 4 ++-- ...e__separator__deprecated-custom-color-v1.json | 1 + ...r__deprecated-custom-color-v1.serialized.html | 4 ++-- 18 files changed, 55 insertions(+), 40 deletions(-) diff --git a/packages/block-library/src/separator/deprecated.js b/packages/block-library/src/separator/deprecated.js index 49be5db8c769f..8003e1ef4297c 100644 --- a/packages/block-library/src/separator/deprecated.js +++ b/packages/block-library/src/separator/deprecated.js @@ -41,15 +41,15 @@ const v1 = { return
; }, - isEligible( { color, customColor } ) { - return color || customColor; + isEligible( { opacity } ) { + return ! opacity; }, migrate( attributes ) { const { color, customColor } = attributes; return { ...omit( attributes, [ 'color', 'customColor' ] ), backgroundColor: color ? color : undefined, - opacity: color ? 'default' : undefined, + opacity: 'css', style: customColor ? { color: { background: customColor } } : undefined, diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 5b81e5634f969..ce325857394f5 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -20,17 +20,24 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { const color = useColorProps( attributes ); // V1 blocks expect to have a default opacity of 0.4, so on transformation - // get an opacity attribute set to default in order to assign a class name + // get an opacity attribute set to css in order to assign a class name // to provide this opactiy. Once the user changes the color this is removed // and opacity can then be set via the color block support alpha channel. + + useEffect( () => { + if ( ! opacity ) { + setAttributes( { opacity: 'alpha-channel' } ); + } + }, [ opacity ] ); + const previousClassName = usePrevious( color.className ); useEffect( () => { if ( previousClassName && - opacity === 'default' && + opacity === 'css' && color.className !== previousClassName ) { - setAttributes( { opacity: undefined } ); + setAttributes( { opacity: 'alpha-channel' } ); } }, [ color.className, previousClassName ] ); @@ -42,7 +49,8 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { const className = classnames( { 'has-text-color': backgroundColor || customColor, [ colorClass ]: colorClass, - 'has-default-opacity': opacity === 'default', + 'has-css-opacity': opacity === 'css', + 'has-alpha-channel-opacity': opacity === 'alpha-channel', } ); const styles = { diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index 290fca057d65b..b0c7e9ede246b 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -6,11 +6,11 @@ // V2 of the block can set opacity via the backgroundColor // alpha channel so reset the default opacity. - &.has-default-opacity { + &.has-css-opacity { opacity: 0.4; } - &:not(.has-default-opacity) { + &.has-alpha-channel-opacity { opacity: initial; } diff --git a/test/integration/fixtures/blocks/core__separator-color.html b/test/integration/fixtures/blocks/core__separator-color.html index 6e115890cab17..a00ab74a5c6ff 100644 --- a/test/integration/fixtures/blocks/core__separator-color.html +++ b/test/integration/fixtures/blocks/core__separator-color.html @@ -1,3 +1,3 @@ - -
+ +
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-color.json b/test/integration/fixtures/blocks/core__separator-color.json index c9868e95663f7..1627c153f2056 100644 --- a/test/integration/fixtures/blocks/core__separator-color.json +++ b/test/integration/fixtures/blocks/core__separator-color.json @@ -4,10 +4,10 @@ "name": "core/separator", "isValid": true, "attributes": { - "backgroundColor": "accent", - "className": "has-alpha-channel" + "opacity": "alpha-channel", + "backgroundColor": "accent" }, "innerBlocks": [], - "originalContent": "
" + "originalContent": "
" } ] diff --git a/test/integration/fixtures/blocks/core__separator-color.parsed.json b/test/integration/fixtures/blocks/core__separator-color.parsed.json index 4b359819bbdbe..2e6777646a1c3 100644 --- a/test/integration/fixtures/blocks/core__separator-color.parsed.json +++ b/test/integration/fixtures/blocks/core__separator-color.parsed.json @@ -2,12 +2,13 @@ { "blockName": "core/separator", "attrs": { - "backgroundColor": "accent" + "backgroundColor": "accent", + "opacity": "alpha-channel" }, "innerBlocks": [], - "innerHTML": "\n
\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n
\n" + "\n
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__separator-color.serialized.html b/test/integration/fixtures/blocks/core__separator-color.serialized.html index 23a2d07aa1513..1cce62201931f 100644 --- a/test/integration/fixtures/blocks/core__separator-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-color.serialized.html @@ -1,3 +1,3 @@ - -
+ +
diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.html b/test/integration/fixtures/blocks/core__separator-custom-color.html index ece8235e341bb..5b61d6bf84e20 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.html +++ b/test/integration/fixtures/blocks/core__separator-custom-color.html @@ -1,3 +1,3 @@ - -
+ +
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.json b/test/integration/fixtures/blocks/core__separator-custom-color.json index 317a63b71c9e3..c7f99558150df 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.json @@ -4,14 +4,14 @@ "name": "core/separator", "isValid": true, "attributes": { + "opacity": "alpha-channel", "style": { "color": { "background": "#5da54c" } - }, - "className": "has-alpha-channel" + } }, "innerBlocks": [], - "originalContent": "
" + "originalContent": "
" } ] diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json index d17ee3ec29dc5..d9d3ab1fcd7d9 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json @@ -2,6 +2,7 @@ { "blockName": "core/separator", "attrs": { + "opacity": "alpha-channel", "style": { "color": { "background": "#5da54c" @@ -9,9 +10,9 @@ } }, "innerBlocks": [], - "innerHTML": "\n
\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n
\n" + "\n
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html index 463a5553e61ef..17dda0847fff6 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html @@ -1,3 +1,3 @@ - -
+ +
diff --git a/test/integration/fixtures/blocks/core__separator.html b/test/integration/fixtures/blocks/core__separator.html index 6750aea5f1e8d..917da37610b70 100644 --- a/test/integration/fixtures/blocks/core__separator.html +++ b/test/integration/fixtures/blocks/core__separator.html @@ -1,3 +1,3 @@ - -
+ +
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator.parsed.json b/test/integration/fixtures/blocks/core__separator.parsed.json index c1a9e859bd6ed..3d4ba70e38da0 100644 --- a/test/integration/fixtures/blocks/core__separator.parsed.json +++ b/test/integration/fixtures/blocks/core__separator.parsed.json @@ -1,9 +1,13 @@ [ { "blockName": "core/separator", - "attrs": {}, + "attrs": { + "opacity": "alpha-channel" + }, "innerBlocks": [], - "innerHTML": "\n
\n", - "innerContent": [ "\n
\n" ] + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] } ] diff --git a/test/integration/fixtures/blocks/core__separator.serialized.html b/test/integration/fixtures/blocks/core__separator.serialized.html index cb5aeea74070c..5ab847b7c76fc 100644 --- a/test/integration/fixtures/blocks/core__separator.serialized.html +++ b/test/integration/fixtures/blocks/core__separator.serialized.html @@ -1,3 +1,3 @@ - -
+ +
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json index 9f79d05e883eb..cee66c0b4ac38 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json @@ -5,7 +5,7 @@ "isValid": true, "attributes": { "backgroundColor": "accent", - "opacity": "default" + "opacity": "css" }, "innerBlocks": [], "originalContent": "
" diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html index 5ff1b1bc823ea..24d43d7f8c844 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.serialized.html @@ -1,3 +1,3 @@ - -
+ +
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json index c9d605c77cf5b..737b8f8eb8af8 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json @@ -4,6 +4,7 @@ "name": "core/separator", "isValid": true, "attributes": { + "opacity": "css", "style": { "color": { "background": "#cc1d1d" diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html index 7ed24c52b028c..6ef20a01c8f33 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html @@ -1,3 +1,3 @@ - -
+ +
From 61672a57cbf64a2147f3897778ca69aa1efd470f Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 14 Feb 2022 13:44:05 +1100 Subject: [PATCH 10/26] Removing fixture JSON props pursuant to https://github.com/WordPress/gutenberg/pull/38685 --- test/integration/fixtures/blocks/core__separator-color.json | 4 +--- .../fixtures/blocks/core__separator-custom-color.json | 4 +--- test/integration/fixtures/blocks/core__separator.json | 3 +-- .../fixtures/blocks/core__separator__deprecated-color-v1.json | 4 +--- .../blocks/core__separator__deprecated-custom-color-v1.json | 4 +--- 5 files changed, 5 insertions(+), 14 deletions(-) diff --git a/test/integration/fixtures/blocks/core__separator-color.json b/test/integration/fixtures/blocks/core__separator-color.json index 1627c153f2056..d32cb34f1871e 100644 --- a/test/integration/fixtures/blocks/core__separator-color.json +++ b/test/integration/fixtures/blocks/core__separator-color.json @@ -1,13 +1,11 @@ [ { - "clientId": "_clientId_0", "name": "core/separator", "isValid": true, "attributes": { "opacity": "alpha-channel", "backgroundColor": "accent" }, - "innerBlocks": [], - "originalContent": "
" + "innerBlocks": [] } ] diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.json b/test/integration/fixtures/blocks/core__separator-custom-color.json index c7f99558150df..7b0e6c3a7127a 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.json @@ -1,6 +1,5 @@ [ { - "clientId": "_clientId_0", "name": "core/separator", "isValid": true, "attributes": { @@ -11,7 +10,6 @@ } } }, - "innerBlocks": [], - "originalContent": "
" + "innerBlocks": [] } ] diff --git a/test/integration/fixtures/blocks/core__separator.json b/test/integration/fixtures/blocks/core__separator.json index d016853f0c040..3d69d4e24413c 100644 --- a/test/integration/fixtures/blocks/core__separator.json +++ b/test/integration/fixtures/blocks/core__separator.json @@ -5,7 +5,6 @@ "attributes": { "opacity": "alpha-channel" }, - "innerBlocks": [], - "originalContent": "
" + "innerBlocks": [] } ] diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json index cee66c0b4ac38..6e0ddf0dbef55 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json +++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json @@ -1,13 +1,11 @@ [ { - "clientId": "_clientId_0", "name": "core/separator", "isValid": true, "attributes": { "backgroundColor": "accent", "opacity": "css" }, - "innerBlocks": [], - "originalContent": "
" + "innerBlocks": [] } ] diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json index 737b8f8eb8af8..bc2de191b19cd 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json @@ -1,6 +1,5 @@ [ { - "clientId": "_clientId_0", "name": "core/separator", "isValid": true, "attributes": { @@ -11,7 +10,6 @@ } } }, - "innerBlocks": [], - "originalContent": "
" + "innerBlocks": [] } ] From bc6882e2d1409cf4a8b6f5d1feab3715c872459c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 23 Feb 2022 12:59:21 +1300 Subject: [PATCH 11/26] Fix e2e test --- .../specs/editor/blocks/__snapshots__/separator.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap index 41466bc4de250..94888e1f8859a 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Separator can be created by three dashes and enter 1`] = ` -" -
+" +
" `; From e8d02a14c7e3fb3ad65824929573706a0091a140 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 23 Feb 2022 14:48:15 +1300 Subject: [PATCH 12/26] Another e2e test fix --- .../__snapshots__/block-hierarchy-navigation.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap index 75dd24a83136f..dfcb368440901 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap @@ -56,8 +56,8 @@ exports[`Navigating the block hierarchy should select the wrapper div for a grou

just a paragraph

- -
+ +
" `; From c6ad0db7f44c71ea70c8528faf04633626c0bca1 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 23 Feb 2022 15:32:28 +1300 Subject: [PATCH 13/26] Move deprecated css to a separate file --- packages/block-library/src/separator/deprecated.scss | 6 ++++++ packages/block-library/src/separator/theme.scss | 9 +++------ 2 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 packages/block-library/src/separator/deprecated.scss diff --git a/packages/block-library/src/separator/deprecated.scss b/packages/block-library/src/separator/deprecated.scss new file mode 100644 index 0000000000000..b133ad1243704 --- /dev/null +++ b/packages/block-library/src/separator/deprecated.scss @@ -0,0 +1,6 @@ +.wp-block-separator { + // V1 version of the block expects a default opactiy of 0.4 to be set. + &.has-css-opacity { + opacity: 0.4; + } +} diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index b0c7e9ede246b..42df8b7bcbc79 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -1,15 +1,12 @@ +// Import styles for rendering the static content of deprecated block versions. +@import "./deprecated.scss"; + .wp-block-separator { border: none; border-bottom: 2px solid currentColor; margin-left: auto; margin-right: auto; - // V2 of the block can set opacity via the backgroundColor - // alpha channel so reset the default opacity. - &.has-css-opacity { - opacity: 0.4; - } - &.has-alpha-channel-opacity { opacity: initial; } From 0a735358d0ca3315e1dafbf0d0b0de65ef88b822 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 24 Feb 2022 12:34:32 +1300 Subject: [PATCH 14/26] Add background color default --- packages/block-library/src/separator/block.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index c69eba02ae5f6..672abc411e17e 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -18,7 +18,10 @@ "color": { "gradients": true, "background": true, - "text": false + "text": false, + "__experimentalDefaultControls": { + "background": true + } } }, "styles": [ From bd6f912b0c01ed1a4304c6fc9ed60eb8b221bd7a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 24 Feb 2022 16:48:03 +1300 Subject: [PATCH 15/26] Set default attribute to simplify the migration of old blocks --- packages/block-library/src/separator/block.json | 3 ++- packages/block-library/src/separator/deprecated.js | 3 --- packages/block-library/src/separator/edit.js | 11 ----------- 3 files changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index 672abc411e17e..97556aef1e011 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -9,7 +9,8 @@ "textdomain": "default", "attributes": { "opacity": { - "type": "string" + "type": "string", + "default": "alpha-channel" } }, "supports": { diff --git a/packages/block-library/src/separator/deprecated.js b/packages/block-library/src/separator/deprecated.js index 8003e1ef4297c..011402dfa9575 100644 --- a/packages/block-library/src/separator/deprecated.js +++ b/packages/block-library/src/separator/deprecated.js @@ -41,9 +41,6 @@ const v1 = { return
; }, - isEligible( { opacity } ) { - return ! opacity; - }, migrate( attributes ) { const { color, customColor } = attributes; return { diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index ce325857394f5..39dae46139e66 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -19,17 +19,6 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { const { backgroundColor, style, opacity } = attributes; const color = useColorProps( attributes ); - // V1 blocks expect to have a default opacity of 0.4, so on transformation - // get an opacity attribute set to css in order to assign a class name - // to provide this opactiy. Once the user changes the color this is removed - // and opacity can then be set via the color block support alpha channel. - - useEffect( () => { - if ( ! opacity ) { - setAttributes( { opacity: 'alpha-channel' } ); - } - }, [ opacity ] ); - const previousClassName = usePrevious( color.className ); useEffect( () => { if ( From 6457a8a0731f15d159a3277f37af5f2d295c2676 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 28 Feb 2022 12:54:40 +1300 Subject: [PATCH 16/26] Extract the deprecated opacity settings to a custom hook --- packages/block-library/src/separator/edit.js | 31 +++++++---------- .../src/separator/use-deprecated-opacity.js | 34 +++++++++++++++++++ 2 files changed, 47 insertions(+), 18 deletions(-) create mode 100644 packages/block-library/src/separator/use-deprecated-opacity.js diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 39dae46139e66..4b462f742cdeb 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -6,45 +6,40 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useEffect } from '@wordpress/element'; import { HorizontalRule } from '@wordpress/components'; import { useBlockProps, getColorClassName, __experimentalUseColorProps as useColorProps, } from '@wordpress/block-editor'; -import { usePrevious } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import useDeprecatedOpacity from './use-deprecated-opacity'; export default function SeparatorEdit( { attributes, setAttributes } ) { - const { backgroundColor, style, opacity } = attributes; + const { backgroundColor, opacity } = attributes; + const color = useColorProps( attributes ); + const currentColor = color?.style?.backgroundColor; + + useDeprecatedOpacity( opacity, currentColor, setAttributes ); - const previousClassName = usePrevious( color.className ); - useEffect( () => { - if ( - previousClassName && - opacity === 'css' && - color.className !== previousClassName - ) { - setAttributes( { opacity: 'alpha-channel' } ); - } - }, [ color.className, previousClassName ] ); - - const customColor = style?.color?.background; // The dots styles uses text for the dots, to change those dots color is // using color, not backgroundColor. const colorClass = getColorClassName( 'color', backgroundColor ); const className = classnames( { - 'has-text-color': backgroundColor || customColor, + 'has-text-color': backgroundColor || currentColor, [ colorClass ]: colorClass, 'has-css-opacity': opacity === 'css', 'has-alpha-channel-opacity': opacity === 'alpha-channel', } ); const styles = { - color: color?.style?.backgroundColor, - backgroundColor: color?.style?.backgroundColor, + color: currentColor, + backgroundColor: currentColor, }; return ( diff --git a/packages/block-library/src/separator/use-deprecated-opacity.js b/packages/block-library/src/separator/use-deprecated-opacity.js new file mode 100644 index 0000000000000..99da2d5fc1c6e --- /dev/null +++ b/packages/block-library/src/separator/use-deprecated-opacity.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { useEffect, useState } from '@wordpress/element'; +import { usePrevious } from '@wordpress/compose'; + +export default function useDeprecatedOpacity( + opacity, + currentColor, + setAttributes +) { + const [ + deprecatedOpacityWithNoColor, + setSeprecatedOpacityWithNoColor, + ] = useState( false ); + const previousColor = usePrevious( currentColor ); + + useEffect( () => { + if ( opacity === 'css' && ! currentColor && ! previousColor ) { + setSeprecatedOpacityWithNoColor( true ); + } + }, [ currentColor, previousColor, opacity ] ); + + useEffect( () => { + if ( + opacity === 'css' && + ( ( deprecatedOpacityWithNoColor && currentColor ) || + ( previousColor && currentColor !== previousColor ) ) + ) { + setAttributes( { opacity: 'alpha-channel' } ); + setSeprecatedOpacityWithNoColor( false ); + } + }, [ deprecatedOpacityWithNoColor, currentColor, previousColor ] ); +} From ba46d5e647c051c6362091de5359a8a040b107a1 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 28 Feb 2022 14:33:30 +1300 Subject: [PATCH 17/26] Tidy up application of inline styles and add comment to deprecated opacity hook --- packages/block-library/src/separator/edit.js | 20 ++++++++++++------- .../src/separator/use-deprecated-opacity.js | 9 ++++++--- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 4b462f742cdeb..f219ebce631d6 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -19,10 +19,10 @@ import { import useDeprecatedOpacity from './use-deprecated-opacity'; export default function SeparatorEdit( { attributes, setAttributes } ) { - const { backgroundColor, opacity } = attributes; - + const { backgroundColor, opacity, style, className } = attributes; const color = useColorProps( attributes ); const currentColor = color?.style?.backgroundColor; + const hasCustomColor = !! style?.color?.background; useDeprecatedOpacity( opacity, currentColor, setAttributes ); @@ -30,7 +30,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { // using color, not backgroundColor. const colorClass = getColorClassName( 'color', backgroundColor ); - const className = classnames( { + const classNames = classnames( { 'has-text-color': backgroundColor || currentColor, [ colorClass ]: colorClass, 'has-css-opacity': opacity === 'css', @@ -38,16 +38,22 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { } ); const styles = { - color: currentColor, - backgroundColor: currentColor, + color: + className === 'is-style-dots' && hasCustomColor + ? currentColor + : undefined, + backgroundColor: + className !== 'is-style-dots' && hasCustomColor + ? currentColor + : undefined, }; return ( <> diff --git a/packages/block-library/src/separator/use-deprecated-opacity.js b/packages/block-library/src/separator/use-deprecated-opacity.js index 99da2d5fc1c6e..8beabdd7ad8a4 100644 --- a/packages/block-library/src/separator/use-deprecated-opacity.js +++ b/packages/block-library/src/separator/use-deprecated-opacity.js @@ -11,13 +11,16 @@ export default function useDeprecatedOpacity( ) { const [ deprecatedOpacityWithNoColor, - setSeprecatedOpacityWithNoColor, + setDeprecatedOpacityWithNoColor, ] = useState( false ); const previousColor = usePrevious( currentColor ); + // A separator with no color set will always have previousColor set to undefined, + // and we need to differentiate these from those with color set that will return + // previousColor as undefined on the first render. useEffect( () => { if ( opacity === 'css' && ! currentColor && ! previousColor ) { - setSeprecatedOpacityWithNoColor( true ); + setDeprecatedOpacityWithNoColor( true ); } }, [ currentColor, previousColor, opacity ] ); @@ -28,7 +31,7 @@ export default function useDeprecatedOpacity( ( previousColor && currentColor !== previousColor ) ) ) { setAttributes( { opacity: 'alpha-channel' } ); - setSeprecatedOpacityWithNoColor( false ); + setDeprecatedOpacityWithNoColor( false ); } }, [ deprecatedOpacityWithNoColor, currentColor, previousColor ] ); } From e5cbdef291d497ec7778bcf832c66e1fb71f1d08 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 28 Feb 2022 14:40:38 +1300 Subject: [PATCH 18/26] Add another explanatory comment. --- .../block-library/src/separator/use-deprecated-opacity.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/separator/use-deprecated-opacity.js b/packages/block-library/src/separator/use-deprecated-opacity.js index 8beabdd7ad8a4..9ece02f41fe87 100644 --- a/packages/block-library/src/separator/use-deprecated-opacity.js +++ b/packages/block-library/src/separator/use-deprecated-opacity.js @@ -24,6 +24,10 @@ export default function useDeprecatedOpacity( } }, [ currentColor, previousColor, opacity ] ); + // For deprecated blocks, that have a default 0.4 css opacity set, we + // need to remove this if the current color is changed, or a color is added. + // In these instances the opacity attribute is set back to the default of + // alpha-channel which allows a new custom opacity to be set via the color picker. useEffect( () => { if ( opacity === 'css' && From 245edc8e84471a9ce7891e99ef8857739a2d3095 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 28 Feb 2022 17:20:09 +1300 Subject: [PATCH 19/26] Add initial edit method unit test --- .../block-library/src/separator/test/edit.js | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 packages/block-library/src/separator/test/edit.js diff --git a/packages/block-library/src/separator/test/edit.js b/packages/block-library/src/separator/test/edit.js new file mode 100644 index 0000000000000..7fa4aba9bcdb2 --- /dev/null +++ b/packages/block-library/src/separator/test/edit.js @@ -0,0 +1,44 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import SeparatorEdit from '../edit'; + +jest.mock( '@wordpress/block-editor', () => ( { + ...jest.requireActual( '@wordpress/block-editor' ), + useBlockProps: jest.fn(), +} ) ); + +const defaultAttributes = { + backgroundColor: undefined, + opacity: 'alpha-channel', + style: {}, + className: '', +}; +const defaultProps = { + attributes: defaultAttributes, + setAttributes: jest.fn(), +}; + +describe( 'Separator block edit method', () => { + beforeEach( () => { + useBlockProps.mockClear(); + } ); + + test( 'should call useBlockProps with has-alpha-channel-opacity class and no inline styles by default', () => { + render( ); + expect( useBlockProps ).toHaveBeenCalledWith( { + className: 'has-alpha-channel-opacity', + style: undefined, + } ); + } ); +} ); From 9248a0973fd2dcf55ff4058c4c915a015e430e6c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Mar 2022 12:02:05 +1300 Subject: [PATCH 20/26] Regenerate fixtures to remove default attributes --- .../fixtures/blocks/core__separator-color.serialized.html | 2 +- .../blocks/core__separator-custom-color.serialized.html | 2 +- .../integration/fixtures/blocks/core__separator.serialized.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/integration/fixtures/blocks/core__separator-color.serialized.html b/test/integration/fixtures/blocks/core__separator-color.serialized.html index 1cce62201931f..046c9b1070fce 100644 --- a/test/integration/fixtures/blocks/core__separator-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-color.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html index 17dda0847fff6..808b80a181b40 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html +++ b/test/integration/fixtures/blocks/core__separator-custom-color.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/test/integration/fixtures/blocks/core__separator.serialized.html b/test/integration/fixtures/blocks/core__separator.serialized.html index 5ab847b7c76fc..fe50bfba92b5c 100644 --- a/test/integration/fixtures/blocks/core__separator.serialized.html +++ b/test/integration/fixtures/blocks/core__separator.serialized.html @@ -1,3 +1,3 @@ - +
From bc2cacd6c1dd50660ceab07dd27d66eb510c41dc Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Mar 2022 12:52:25 +1300 Subject: [PATCH 21/26] Fix unit tests --- test/integration/fixtures/documents/evernote-out.html | 2 +- test/integration/fixtures/documents/google-docs-out.html | 2 +- .../fixtures/documents/google-docs-with-comments-out.html | 2 +- test/integration/fixtures/documents/ms-word-out.html | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/test/integration/fixtures/documents/evernote-out.html b/test/integration/fixtures/documents/evernote-out.html index 39965a9cf62fa..dec057d999ef1 100644 --- a/test/integration/fixtures/documents/evernote-out.html +++ b/test/integration/fixtures/documents/evernote-out.html @@ -15,7 +15,7 @@ -
+
diff --git a/test/integration/fixtures/documents/google-docs-out.html b/test/integration/fixtures/documents/google-docs-out.html index 46894395d9cbe..42b98c6553247 100644 --- a/test/integration/fixtures/documents/google-docs-out.html +++ b/test/integration/fixtures/documents/google-docs-out.html @@ -23,7 +23,7 @@

This is a heading

-
+
diff --git a/test/integration/fixtures/documents/google-docs-with-comments-out.html b/test/integration/fixtures/documents/google-docs-with-comments-out.html index 46894395d9cbe..42b98c6553247 100644 --- a/test/integration/fixtures/documents/google-docs-with-comments-out.html +++ b/test/integration/fixtures/documents/google-docs-with-comments-out.html @@ -23,7 +23,7 @@

This is a heading

-
+
diff --git a/test/integration/fixtures/documents/ms-word-out.html b/test/integration/fixtures/documents/ms-word-out.html index 0b1f49fbd692c..faae96541aa5f 100644 --- a/test/integration/fixtures/documents/ms-word-out.html +++ b/test/integration/fixtures/documents/ms-word-out.html @@ -63,7 +63,7 @@

This is a heading level 2

-
+
@@ -71,7 +71,7 @@

This is a heading level 2

-
+
From ea1b9b1b611899f156869f516105678899caf66c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Mar 2022 13:23:58 +1300 Subject: [PATCH 22/26] Some more test fixes --- .../__snapshots__/block-hierarchy-navigation.test.js.snap | 2 +- test/integration/fixtures/blocks/core__separator-color.html | 2 +- .../fixtures/blocks/core__separator-color.parsed.json | 3 +-- .../fixtures/blocks/core__separator-custom-color.html | 2 +- .../fixtures/blocks/core__separator-custom-color.parsed.json | 1 - test/integration/fixtures/blocks/core__separator.html | 2 +- test/integration/fixtures/blocks/core__separator.parsed.json | 4 +--- 7 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap index dfcb368440901..eb52e25922a66 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap @@ -56,7 +56,7 @@ exports[`Navigating the block hierarchy should select the wrapper div for a grou

just a paragraph

- +
" diff --git a/test/integration/fixtures/blocks/core__separator-color.html b/test/integration/fixtures/blocks/core__separator-color.html index a00ab74a5c6ff..2b09559b8c1fd 100644 --- a/test/integration/fixtures/blocks/core__separator-color.html +++ b/test/integration/fixtures/blocks/core__separator-color.html @@ -1,3 +1,3 @@ - +
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-color.parsed.json b/test/integration/fixtures/blocks/core__separator-color.parsed.json index 2e6777646a1c3..925d80d49719a 100644 --- a/test/integration/fixtures/blocks/core__separator-color.parsed.json +++ b/test/integration/fixtures/blocks/core__separator-color.parsed.json @@ -2,8 +2,7 @@ { "blockName": "core/separator", "attrs": { - "backgroundColor": "accent", - "opacity": "alpha-channel" + "backgroundColor": "accent" }, "innerBlocks": [], "innerHTML": "\n
\n", diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.html b/test/integration/fixtures/blocks/core__separator-custom-color.html index 5b61d6bf84e20..ffed04d796db6 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.html +++ b/test/integration/fixtures/blocks/core__separator-custom-color.html @@ -1,3 +1,3 @@ - +
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json index d9d3ab1fcd7d9..c172d3cc7e08e 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.parsed.json @@ -2,7 +2,6 @@ { "blockName": "core/separator", "attrs": { - "opacity": "alpha-channel", "style": { "color": { "background": "#5da54c" diff --git a/test/integration/fixtures/blocks/core__separator.html b/test/integration/fixtures/blocks/core__separator.html index 917da37610b70..07b535a6be03c 100644 --- a/test/integration/fixtures/blocks/core__separator.html +++ b/test/integration/fixtures/blocks/core__separator.html @@ -1,3 +1,3 @@ - +
\ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__separator.parsed.json b/test/integration/fixtures/blocks/core__separator.parsed.json index 3d4ba70e38da0..69ab3ea1dd4da 100644 --- a/test/integration/fixtures/blocks/core__separator.parsed.json +++ b/test/integration/fixtures/blocks/core__separator.parsed.json @@ -1,9 +1,7 @@ [ { "blockName": "core/separator", - "attrs": { - "opacity": "alpha-channel" - }, + "attrs": {}, "innerBlocks": [], "innerHTML": "\n
\n", "innerContent": [ From 20cf8f110bb1640d8488d07ad379d1977cbd3a45 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Mar 2022 14:39:26 +1300 Subject: [PATCH 23/26] Hopefully the last test fix --- .../specs/editor/blocks/__snapshots__/separator.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap index 94888e1f8859a..9afc30c0e3271 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/separator.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Separator can be created by three dashes and enter 1`] = ` -" +"
" `; From 91487e06f9688830eac1800bf935e44990917a1b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 2 Mar 2022 17:28:09 +1300 Subject: [PATCH 24/26] Add some more tests --- .../block-library/src/separator/test/edit.js | 71 ++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/separator/test/edit.js b/packages/block-library/src/separator/test/edit.js index 7fa4aba9bcdb2..1412d444615e0 100644 --- a/packages/block-library/src/separator/test/edit.js +++ b/packages/block-library/src/separator/test/edit.js @@ -34,11 +34,80 @@ describe( 'Separator block edit method', () => { useBlockProps.mockClear(); } ); - test( 'should call useBlockProps with has-alpha-channel-opacity class and no inline styles by default', () => { + test( 'should add the has-alpha-channel-opacity class and no inline styles by default', () => { render( ); expect( useBlockProps ).toHaveBeenCalledWith( { className: 'has-alpha-channel-opacity', style: undefined, } ); } ); + + test( 'should add has-css-opacity class and no inline styles for deprecated block with no color specified', () => { + const props = { + ...defaultProps, + attributes: { ...defaultAttributes, opacity: 'css' }, + }; + render( ); + expect( useBlockProps ).toHaveBeenCalledWith( { + className: 'has-css-opacity', + style: undefined, + } ); + } ); + + test( 'should add inline background style for block without dots style selected and custom color specified', () => { + const props = { + ...defaultProps, + attributes: { + ...defaultAttributes, + style: { color: { background: '#ff0000' } }, + }, + }; + render( ); + expect( useBlockProps ).toHaveBeenCalledWith( { + // For backwards compatibility the has-text-color class is also added even though it is only needed for + // is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins. + className: 'has-text-color has-alpha-channel-opacity', + style: { + backgroundColor: '#ff0000', + color: undefined, + }, + } ); + } ); + + test( 'should add inline color style for block with dots style selected and custom color specified', () => { + const props = { + ...defaultProps, + attributes: { + ...defaultAttributes, + className: 'is-style-dots', + style: { color: { background: '#ff0000' } }, + }, + }; + render( ); + expect( useBlockProps ).toHaveBeenCalledWith( { + className: 'has-text-color has-alpha-channel-opacity', + style: { + backgroundColor: undefined, + color: '#ff0000', + }, + } ); + } ); + + test( 'should add color class when color from palette specified', () => { + const props = { + ...defaultProps, + attributes: { + ...defaultAttributes, + backgroundColor: 'banana', + }, + }; + render( ); + // Note that only the manual addition of the text color class can be checked as the + // background color classes are added by useBlockProps which has to be mocked. + expect( useBlockProps ).toHaveBeenCalledWith( { + className: + 'has-text-color has-banana-color has-alpha-channel-opacity', + style: undefined, + } ); + } ); } ); From e4ef3d36e2ff1c228dd061772d56947873c593d2 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 16 Mar 2022 13:56:03 +1300 Subject: [PATCH 25/26] Switch to skipSerialization --- packages/block-library/src/separator/block.json | 1 + packages/block-library/src/separator/edit.js | 6 +++--- packages/block-library/src/separator/save.js | 10 +++++++--- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index 97556aef1e011..384d3826f34ed 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -17,6 +17,7 @@ "anchor": true, "align": [ "center", "wide", "full" ], "color": { + "__experimentalSkipSerialization": true, "gradients": true, "background": true, "text": false, diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index f219ebce631d6..08acb818e3b5a 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -20,8 +20,8 @@ import useDeprecatedOpacity from './use-deprecated-opacity'; export default function SeparatorEdit( { attributes, setAttributes } ) { const { backgroundColor, opacity, style, className } = attributes; - const color = useColorProps( attributes ); - const currentColor = color?.style?.backgroundColor; + const colorProps = useColorProps( attributes ); + const currentColor = colorProps?.style?.backgroundColor; const hasCustomColor = !! style?.color?.background; useDeprecatedOpacity( opacity, currentColor, setAttributes ); @@ -30,7 +30,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { // using color, not backgroundColor. const colorClass = getColorClassName( 'color', backgroundColor ); - const classNames = classnames( { + const classNames = classnames( colorProps.classname, { 'has-text-color': backgroundColor || currentColor, [ colorClass ]: colorClass, 'has-css-opacity': opacity === 'css', diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index 02770df632e4f..09bf29ca0e5b4 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -6,12 +6,16 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { getColorClassName, useBlockProps } from '@wordpress/block-editor'; +import { + getColorClassName, + useBlockProps, + __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, +} from '@wordpress/block-editor'; export default function separatorSave( { attributes } ) { const { backgroundColor, style, opacity } = attributes; const customColor = style?.color?.background; - + const colorProps = getColorClassesAndStyles( attributes ); // The hr support changing color using border-color, since border-color // is not yet supported in the color palette, we use background-color. @@ -19,7 +23,7 @@ export default function separatorSave( { attributes } ) { // using color, not backgroundColor. const colorClass = getColorClassName( 'color', backgroundColor ); - const className = classnames( { + const className = classnames( colorProps.className, { 'has-text-color': backgroundColor || customColor, [ colorClass ]: colorClass, 'has-css-opacity': opacity === 'css', From 22ff3a29094d7563063487880e95fda469a7470b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 16 Mar 2022 15:10:55 +1300 Subject: [PATCH 26/26] Revert inline styles so they are the same as the existing block to avoid any unintended backwards compat issues --- packages/block-library/src/separator/edit.js | 29 +++++++++---------- packages/block-library/src/separator/save.js | 16 ++++++---- .../block-library/src/separator/test/edit.js | 4 +-- 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 08acb818e3b5a..2663d6fac1d5c 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -19,7 +19,7 @@ import { import useDeprecatedOpacity from './use-deprecated-opacity'; export default function SeparatorEdit( { attributes, setAttributes } ) { - const { backgroundColor, opacity, style, className } = attributes; + const { backgroundColor, opacity, style } = attributes; const colorProps = useColorProps( attributes ); const currentColor = colorProps?.style?.backgroundColor; const hasCustomColor = !! style?.color?.background; @@ -30,29 +30,26 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { // using color, not backgroundColor. const colorClass = getColorClassName( 'color', backgroundColor ); - const classNames = classnames( colorProps.classname, { - 'has-text-color': backgroundColor || currentColor, - [ colorClass ]: colorClass, - 'has-css-opacity': opacity === 'css', - 'has-alpha-channel-opacity': opacity === 'alpha-channel', - } ); + const className = classnames( + { + 'has-text-color': backgroundColor || currentColor, + [ colorClass ]: colorClass, + 'has-css-opacity': opacity === 'css', + 'has-alpha-channel-opacity': opacity === 'alpha-channel', + }, + colorProps.classname + ); const styles = { - color: - className === 'is-style-dots' && hasCustomColor - ? currentColor - : undefined, - backgroundColor: - className !== 'is-style-dots' && hasCustomColor - ? currentColor - : undefined, + color: currentColor, + backgroundColor: currentColor, }; return ( <> diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index 09bf29ca0e5b4..55a67c980c24f 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -23,14 +23,18 @@ export default function separatorSave( { attributes } ) { // using color, not backgroundColor. const colorClass = getColorClassName( 'color', backgroundColor ); - const className = classnames( colorProps.className, { - 'has-text-color': backgroundColor || customColor, - [ colorClass ]: colorClass, - 'has-css-opacity': opacity === 'css', - 'has-alpha-channel-opacity': opacity === 'alpha-channel', - } ); + const className = classnames( + { + 'has-text-color': backgroundColor || customColor, + [ colorClass ]: colorClass, + 'has-css-opacity': opacity === 'css', + 'has-alpha-channel-opacity': opacity === 'alpha-channel', + }, + colorProps.className + ); const styles = { + backgroundColor: colorProps?.style?.backgroundColor, color: colorClass ? undefined : customColor, }; return
; diff --git a/packages/block-library/src/separator/test/edit.js b/packages/block-library/src/separator/test/edit.js index 1412d444615e0..a78e9c34aa661 100644 --- a/packages/block-library/src/separator/test/edit.js +++ b/packages/block-library/src/separator/test/edit.js @@ -69,7 +69,7 @@ describe( 'Separator block edit method', () => { className: 'has-text-color has-alpha-channel-opacity', style: { backgroundColor: '#ff0000', - color: undefined, + color: '#ff0000', }, } ); } ); @@ -87,7 +87,7 @@ describe( 'Separator block edit method', () => { expect( useBlockProps ).toHaveBeenCalledWith( { className: 'has-text-color has-alpha-channel-opacity', style: { - backgroundColor: undefined, + backgroundColor: '#ff0000', color: '#ff0000', }, } );