add color support to separator block (#16784)

* add color support to separator block

* add color to frontend render

* add support for dots style in frontend

* fix review problems, update block.json file

* fix border issue with theme.scss

* extend border remove in editor

* fix problems with no color selected

packages/block-library/src/separator/block.json

@@ -1,4 +1,12 @@
 {
 	"name": "core/separator",
-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"color": {
+			"type": "string"
+		},
+		"customColor": {
+			"type": "string"
+		}
+	}
 }

packages/block-library/src/separator/edit.js

@@ -1,8 +1,49 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { HorizontalRule } from '@wordpress/components';
+import {
+	InspectorControls,
+	withColors,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
 
-export default function SeparatorEdit( { className } ) {
-	return <HorizontalRule className={ className } />;
+function SeparatorEdit( { color, setColor, className } ) {
+	return (
+		<>
+			<HorizontalRule
+				className={ classnames(
+					className, {
+						'has-background': color.color,
+						[ color.class ]: color.class,
+					}
+				) }
+				style={ {
+					backgroundColor: color.color,
+					color: color.color,
+				} }
+			/>
+			<InspectorControls>
+				<PanelColorSettings
+					title={ __( 'Color Settings' ) }
+					colorSettings={ [
+						{
+							value: color.color,
+							onChange: setColor,
+							label: __( 'Color' ),
+						},
+					] }
+				>
+				</PanelColorSettings>
+			</InspectorControls>
+		</>
+	);
 }
+
+export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );

packages/block-library/src/separator/save.js

@@ -1,3 +1,41 @@
-export default function save() {
-	return <hr />;
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	getColorClassName,
+} from '@wordpress/block-editor';
+
+export default function separatorSave( { 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 separatorClasses = classnames( {
+		'has-text-color has-background': color || customColor,
+		[ backgroundClass ]: backgroundClass,
+		[ colorClass ]: colorClass,
+	} );
+
+	const separatorStyle = {
+		backgroundColor: backgroundClass ? undefined : customColor,
+		color: colorClass ? undefined : customColor,
+	};
+
+	return ( <hr
+		className={ separatorClasses }
+		style={ separatorStyle }
+	/> );
 }

packages/block-library/src/separator/style.scss

@@ -8,7 +8,9 @@
 
 	// Dots style
 	&.is-style-dots {
-		background: none; // Override any background themes often set on the hr tag for this style.
+		// Override any background themes often set on the hr tag for this style.
+		// also override the color set in the editor since it's intented for normal HR
+		background: none !important;
 		border: none;
 		text-align: center;
 		max-width: none;
@@ -17,7 +19,7 @@
 
 		&::before {
 			content: "\00b7 \00b7 \00b7";
-			color: $dark-gray-900;
+			color: currentColor;
 			font-size: 20px;
 			letter-spacing: 2em;
 			padding-left: 2em;

packages/block-library/src/separator/theme.scss

@@ -8,4 +8,13 @@
 	&:not(.is-style-wide):not(.is-style-dots) {
 		max-width: 100px;
 	}
+
+	&.has-background:not(.is-style-dots) {
+		border-bottom: none;
+		height: 1px;
+	}
+
+	&.has-background:not(.is-style-wide):not(.is-style-dots) {
+		height: 2px;
+	}
 }