Switch to skipSerialization

WordPress · Mar 16, 2022 · e4ef3d3 · e4ef3d3
1 parent 91487e0
commit e4ef3d3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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
@@ -6,20 +6,24 @@ 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.
 
 	// 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( {
+	const className = classnames( colorProps.className, {
 		'has-text-color': backgroundColor || customColor,
 		[ colorClass ]: colorClass,
 		'has-css-opacity': opacity === 'css',