add color support to separator block

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

@@ -1,8 +1,72 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import {
+	Component,
+} from '@wordpress/element';
 
-export default function SeparatorEdit( { className } ) {
-	return <HorizontalRule className={ className } />;
+import {
+	compose,
+	withInstanceId,
+} from '@wordpress/compose';
+
+import {
+	HorizontalRule,
+} from '@wordpress/components';
+
+import {
+	InspectorControls,
+	withColors,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
+
+class SeparatorEdit extends Component {
+	render() {
+		const {
+			backgroundColor,
+			setBackgroundColor,
+			className,
+		} = this.props;
+		return (
+			<div>
+				<HorizontalRule
+					className={ classnames(
+						className, {
+							'has-background': backgroundColor.color,
+							[ backgroundColor.class ]: backgroundColor.class,
+						}
+					) }
+					style={ {
+						borderColor: backgroundColor.color,
+						color: backgroundColor.color,
+					} }
+				/>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Color Settings' ) }
+						colorSettings={ [
+							{
+								value: backgroundColor.color,
+								onChange: setBackgroundColor,
+								label: __( 'Background Color' ),
+							},
+						] }
+					>
+					</PanelColorSettings>
+				</InspectorControls>
+			</div>
+		);
+	}
 }
+
+export default compose( [
+	withInstanceId,
+	withColors( 'backgroundColor', { textColor: 'color' } ),
+] )( SeparatorEdit );

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

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

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

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