Revert inline styles so they are the same as the existing block to av…

…oid any unintended backwards compat issues
WordPress · Mar 16, 2022 · 22ff3a2 · 22ff3a2
1 parent e4ef3d3
commit 22ff3a2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 24 deletions.
diff --git 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 (
 		<>
 			<HorizontalRule
 				{ ...useBlockProps( {
-					className: classNames,
+					className,
 					style: hasCustomColor ? styles : undefined,
 				} ) }
 			/>

diff --git 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 <hr { ...useBlockProps.save( { className, style: styles } ) } />;

diff --git 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',
 			},
 		} );