diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 9c5fb95fb89e7..3327e848bc7a5 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -698,8 +698,8 @@ Create a break between ideas or sections with a horizontal separator. ([Source](
- **Name:** core/separator
- **Category:** design
-- **Supports:** align (center, full, wide), anchor
-- **Attributes:** color, customColor
+- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~text~~)
+- **Attributes:** opacity
## Shortcode
diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
index ae288d37c28ea..384d3826f34ed 100644
--- a/packages/block-library/src/separator/block.json
+++ b/packages/block-library/src/separator/block.json
@@ -8,16 +8,23 @@
"keywords": [ "horizontal-line", "hr", "divider" ],
"textdomain": "default",
"attributes": {
- "color": {
- "type": "string"
- },
- "customColor": {
- "type": "string"
+ "opacity": {
+ "type": "string",
+ "default": "alpha-channel"
}
},
"supports": {
"anchor": true,
- "align": [ "center", "wide", "full" ]
+ "align": [ "center", "wide", "full" ],
+ "color": {
+ "__experimentalSkipSerialization": true,
+ "gradients": true,
+ "background": true,
+ "text": false,
+ "__experimentalDefaultControls": {
+ "background": true
+ }
+ }
},
"styles": [
{ "name": "default", "label": "Default", "isDefault": true },
diff --git a/packages/block-library/src/separator/deprecated.js b/packages/block-library/src/separator/deprecated.js
new file mode 100644
index 0000000000000..011402dfa9575
--- /dev/null
+++ b/packages/block-library/src/separator/deprecated.js
@@ -0,0 +1,57 @@
+/**
+ * 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
;
+ },
+ migrate( attributes ) {
+ const { color, customColor } = attributes;
+ return {
+ ...omit( attributes, [ 'color', 'customColor' ] ),
+ backgroundColor: color ? color : undefined,
+ opacity: 'css',
+ style: customColor
+ ? { color: { background: customColor } }
+ : undefined,
+ };
+ },
+};
+
+export default [ v1 ];
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/edit.js b/packages/block-library/src/separator/edit.js
index f611abde42a62..2663d6fac1d5c 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/packages/block-library/src/separator/edit.js
@@ -7,30 +7,52 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { HorizontalRule } from '@wordpress/components';
-import { withColors, useBlockProps } from '@wordpress/block-editor';
+import {
+ useBlockProps,
+ getColorClassName,
+ __experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+
/**
* Internal dependencies
*/
-import SeparatorSettings from './separator-settings';
+import useDeprecatedOpacity from './use-deprecated-opacity';
+
+export default function SeparatorEdit( { attributes, setAttributes } ) {
+ const { backgroundColor, opacity, style } = attributes;
+ const colorProps = useColorProps( attributes );
+ const currentColor = colorProps?.style?.backgroundColor;
+ const hasCustomColor = !! style?.color?.background;
+
+ useDeprecatedOpacity( opacity, currentColor, setAttributes );
+
+ // 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 || currentColor,
+ [ colorClass ]: colorClass,
+ 'has-css-opacity': opacity === 'css',
+ 'has-alpha-channel-opacity': opacity === 'alpha-channel',
+ },
+ colorProps.classname
+ );
+
+ const styles = {
+ color: currentColor,
+ backgroundColor: currentColor,
+ };
-function SeparatorEdit( { color, setColor, className } ) {
return (
<>
-
>
);
}
-
-export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );
diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss
index 24e940684279e..a6e58b49a6312 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 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;
+ }
}
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,
};
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index a24127cada56d..55a67c980c24f 100644
--- a/packages/block-library/src/separator/save.js
+++ b/packages/block-library/src/separator/save.js
@@ -6,28 +6,36 @@ 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 { color, customColor } = 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.
- 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,
- [ colorClass ]: colorClass,
- } );
+ 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 style = {
- backgroundColor: backgroundClass ? undefined : customColor,
+ const styles = {
+ backgroundColor: colorProps?.style?.backgroundColor,
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;
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..a78e9c34aa661
--- /dev/null
+++ b/packages/block-library/src/separator/test/edit.js
@@ -0,0 +1,113 @@
+/**
+ * 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 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: '#ff0000',
+ },
+ } );
+ } );
+
+ 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: '#ff0000',
+ 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,
+ } );
+ } );
+} );
diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
index 397142cf39022..42df8b7bcbc79 100644
--- a/packages/block-library/src/separator/theme.scss
+++ b/packages/block-library/src/separator/theme.scss
@@ -1,9 +1,15 @@
+// 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;
- opacity: 0.4;
+
+ &.has-alpha-channel-opacity {
+ opacity: initial;
+ }
// Default, thin style
&:not(.is-style-wide):not(.is-style-dots) {
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..9ece02f41fe87
--- /dev/null
+++ b/packages/block-library/src/separator/use-deprecated-opacity.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+
+export default function useDeprecatedOpacity(
+ opacity,
+ currentColor,
+ setAttributes
+) {
+ const [
+ deprecatedOpacityWithNoColor,
+ 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 ) {
+ setDeprecatedOpacityWithNoColor( true );
+ }
+ }, [ 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' &&
+ ( ( deprecatedOpacityWithNoColor && currentColor ) ||
+ ( previousColor && currentColor !== previousColor ) )
+ ) {
+ setAttributes( { opacity: 'alpha-channel' } );
+ setDeprecatedOpacityWithNoColor( false );
+ }
+ }, [ deprecatedOpacityWithNoColor, currentColor, previousColor ] );
+}
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..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
@@ -2,6 +2,6 @@
exports[`Separator can be created by three dashes and enter 1`] = `
"
-
+
"
`;
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..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
@@ -57,7 +57,7 @@ exports[`Navigating the block hierarchy should select the wrapper div for a grou
-
+
"
`;
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..2b09559b8c1fd
--- /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..d32cb34f1871e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__separator-color.json
@@ -0,0 +1,11 @@
+[
+ {
+ "name": "core/separator",
+ "isValid": true,
+ "attributes": {
+ "opacity": "alpha-channel",
+ "backgroundColor": "accent"
+ },
+ "innerBlocks": []
+ }
+]
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..925d80d49719a
--- /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..046c9b1070fce
--- /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..ffed04d796db6
--- /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..7b0e6c3a7127a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__separator-custom-color.json
@@ -0,0 +1,15 @@
+[
+ {
+ "name": "core/separator",
+ "isValid": true,
+ "attributes": {
+ "opacity": "alpha-channel",
+ "style": {
+ "color": {
+ "background": "#5da54c"
+ }
+ }
+ },
+ "innerBlocks": []
+ }
+]
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..c172d3cc7e08e
--- /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..808b80a181b40
--- /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..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.json b/test/integration/fixtures/blocks/core__separator.json
index 15b95a169d2c7..3d69d4e24413c 100644
--- a/test/integration/fixtures/blocks/core__separator.json
+++ b/test/integration/fixtures/blocks/core__separator.json
@@ -2,7 +2,9 @@
{
"name": "core/separator",
"isValid": true,
- "attributes": {},
+ "attributes": {
+ "opacity": "alpha-channel"
+ },
"innerBlocks": []
}
]
diff --git a/test/integration/fixtures/blocks/core__separator.parsed.json b/test/integration/fixtures/blocks/core__separator.parsed.json
index e390a6c511002..69ab3ea1dd4da 100644
--- a/test/integration/fixtures/blocks/core__separator.parsed.json
+++ b/test/integration/fixtures/blocks/core__separator.parsed.json
@@ -3,7 +3,9 @@
"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.serialized.html b/test/integration/fixtures/blocks/core__separator.serialized.html
index cb5aeea74070c..fe50bfba92b5c 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.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..6e0ddf0dbef55
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json
@@ -0,0 +1,11 @@
+[
+ {
+ "name": "core/separator",
+ "isValid": true,
+ "attributes": {
+ "backgroundColor": "accent",
+ "opacity": "css"
+ },
+ "innerBlocks": []
+ }
+]
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..24d43d7f8c844
--- /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..bc2de191b19cd
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json
@@ -0,0 +1,15 @@
+[
+ {
+ "name": "core/separator",
+ "isValid": true,
+ "attributes": {
+ "opacity": "css",
+ "style": {
+ "color": {
+ "background": "#cc1d1d"
+ }
+ }
+ },
+ "innerBlocks": []
+ }
+]
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..6ef20a01c8f33
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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
-
+