Add supprt for line thickness/Circle size in separator block

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

@@ -7,6 +7,15 @@
 		},
 		"customColor": {
 			"type": "string"
+		},
+		"dotSize": {
+			"type": "number"
+		},
+		"dotSpacing": {
+			"type": "number"
+		},
+		"lineThickness": {
+			"type": "number"
 		}
 	}
 }

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

@@ -7,14 +7,24 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { HorizontalRule } from '@wordpress/components';
+import { HorizontalRule, RangeControl, PanelBody } from '@wordpress/components';
 import {
 	InspectorControls,
 	withColors,
 	PanelColorSettings,
 } from '@wordpress/block-editor';
 
-function SeparatorEdit( { color, setColor, className } ) {
+/**
+ * Internal dependencies
+ */
+import getActiveStyle from './getActiveStyle';
+import { settings } from './index';
+
+function SeparatorEdit( { color, setColor, className, attributes, setAttributes } ) {
+	const { dotSize, dotSpacing, lineThickness } = attributes;
+	const currentStyle = getActiveStyle( settings.styles, className ).name;
+	const isDots = currentStyle === 'dots';
+	const isLine = currentStyle === 'wide' || currentStyle === 'default';
 	return (
 		<>
 			<HorizontalRule
@@ -27,9 +37,42 @@ function SeparatorEdit( { color, setColor, className } ) {
 				style={ {
 					backgroundColor: color.color,
 					color: color.color,
+					fontSize: dotSize,
+					letterSpacing: dotSpacing || dotSize,
+					paddingLeft: ( isDots ? ( dotSpacing || dotSize ) : undefined ),
+					borderWidth: lineThickness,
+					height: isLine ? lineThickness : undefined,
 				} }
 			/>
 			<InspectorControls>
+				{ isDots && <PanelBody title={ __( 'Dots Settings' ) }>
+					<RangeControl
+						label={ __( 'Dot Size' ) }
+						value={ dotSize || 20 }
+						onChange={ ( nextSize ) => {
+							setAttributes( { dotSize: nextSize } );
+						} }
+						allowReset
+					/>
+					<RangeControl
+						label={ __( 'Dot Spacing' ) }
+						value={ dotSpacing || 20 }
+						onChange={ ( nextSize ) => {
+							setAttributes( { dotSpacing: nextSize } );
+						} }
+						allowReset
+					/>
+				</PanelBody> }
+				{ isLine && <PanelBody title={ __( 'Line Settings' ) }>
+					<RangeControl
+						label={ __( 'Line Thickness' ) }
+						value={ lineThickness || 2 }
+						onChange={ ( nextSize ) => {
+							setAttributes( { lineThickness: nextSize } );
+						} }
+						allowReset
+					/>
+				</PanelBody> }
 				<PanelColorSettings
 					title={ __( 'Color Settings' ) }
 					colorSettings={ [

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

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import TokenList from '@wordpress/token-list';
+
+export default function getActiveStyle( styles, className ) {
+	for ( const style of new TokenList( className ).values() ) {
+		if ( style.indexOf( 'is-style-' ) === -1 ) {
+			continue;
+		}
+
+		const potentialStyleName = style.substring( 9 );
+		const activeStyle = find( styles, { name: potentialStyleName } );
+		if ( activeStyle ) {
+			return activeStyle;
+		}
+	}
+
+	return find( styles, 'isDefault' );
+}

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

@@ -9,12 +9,27 @@ import classnames from 'classnames';
 import {
 	getColorClassName,
 } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import getActiveStyle from './getActiveStyle';
+import { settings } from './index';
 
 export default function separatorSave( { attributes } ) {
 	const {
 		color,
 		customColor,
+		dotSize,
+		dotSpacing,
+		lineThickness,
+		className,
 	} = attributes;
+	let { isDots, isLine } = false;
+	if ( className ) {
+		const currentStyle = getActiveStyle( settings.styles, className ).name;
+		isDots = currentStyle === 'dots';
+		isLine = currentStyle === 'wide' || currentStyle === 'default';
+	}
 
 	// the hr support changing color using border-color, since border-color
 	// is not yet supported in the color palette, we use background-color
@@ -32,6 +47,11 @@ export default function separatorSave( { attributes } ) {
 	const separatorStyle = {
 		backgroundColor: backgroundClass ? undefined : customColor,
 		color: colorClass ? undefined : customColor,
+		fontSize: dotSize || undefined,
+		letterSpacing: dotSpacing || dotSize,
+		paddingLeft: ( isDots ? ( dotSpacing || dotSize ) : undefined ),
+		borderWidth: lineThickness,
+		height: isLine ? lineThickness : undefined,
 	};
 
 	return ( <hr

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

@@ -16,13 +16,13 @@
 		max-width: none;
 		line-height: 1;
 		height: auto;
+		font-size: 20px;
+		letter-spacing: 2em;
+		padding-left: 2em;
 
 		&::before {
 			content: "\00b7 \00b7 \00b7";
 			color: currentColor;
-			font-size: 20px;
-			letter-spacing: 2em;
-			padding-left: 2em;
 			font-family: serif;
 		}
 	}