From 45995ce05dcfe4fca1e24f8a1727901f513c34b2 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Tue, 6 Aug 2019 17:27:32 +0100
Subject: [PATCH 1/3] add size control to separator

---
 packages/block-library/src/separator/edit.js  | 47 ++++++++++++++++++-
 .../src/separator/getActiveStyle.js           | 25 ++++++++++
 packages/block-library/src/separator/save.js  |  8 ++++
 .../block-library/src/separator/style.scss    |  6 +--
 4 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 packages/block-library/src/separator/getActiveStyle.js

diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 050bd7423fb665..850ca5ca1c2153 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/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 ) : '' ),
+					borderWidth: lineThickness,
+					height: lineThickness,
 				} }
 			/>
 			<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={ [
diff --git a/packages/block-library/src/separator/getActiveStyle.js b/packages/block-library/src/separator/getActiveStyle.js
new file mode 100644
index 00000000000000..dd71896c184534
--- /dev/null
+++ b/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' );
+}
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index d9b899486233c8..6e287b88fff0a3 100644
--- a/packages/block-library/src/separator/save.js
+++ b/packages/block-library/src/separator/save.js
@@ -14,6 +14,9 @@ export default function separatorSave( { attributes } ) {
 	const {
 		color,
 		customColor,
+		dotSize,
+		dotSpacing,
+		lineThickness,
 	} = attributes;
 
 	// the hr support changing color using border-color, since border-color
@@ -32,6 +35,11 @@ export default function separatorSave( { attributes } ) {
 	const separatorStyle = {
 		backgroundColor: backgroundClass ? undefined : customColor,
 		color: colorClass ? undefined : customColor,
+		fontSize: dotSize || undefined,
+		letterSpacing: dotSpacing || dotSize,
+		paddingLeft: dotSpacing || dotSize,
+		borderWidth: lineThickness,
+		height: lineThickness,
 	};
 
 	return ( <hr
diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss
index a4cf1f2fdb6d27..0ad7ce973f0fbf 100644
--- a/packages/block-library/src/separator/style.scss
+++ b/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;
 		}
 	}

From 1cc8737baffb6f6aa29635cf72bb0cc0a34327c3 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Tue, 6 Aug 2019 17:53:47 +0100
Subject: [PATCH 2/3] add attrs to block.json

---
 packages/block-library/src/separator/block.json | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
index 98bcbb9150609f..802510ae397658 100644
--- a/packages/block-library/src/separator/block.json
+++ b/packages/block-library/src/separator/block.json
@@ -7,6 +7,15 @@
 		},
 		"customColor": {
 			"type": "string"
+		},
+		"dotSize": {
+			"type": "number"
+		},
+		"dotSpacing": {
+			"type": "number"
+		},
+		"lineThickness": {
+			"type": "number"
 		}
 	}
 }

From c1c7520e12ca9581fc1c03d0fba81262e202f2d9 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Tue, 6 Aug 2019 18:48:56 +0100
Subject: [PATCH 3/3] safe fail when switching styles

---
 packages/block-library/src/separator/edit.js |  4 ++--
 packages/block-library/src/separator/save.js | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 850ca5ca1c2153..827d9b619e8248 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/packages/block-library/src/separator/edit.js
@@ -39,9 +39,9 @@ function SeparatorEdit( { color, setColor, className, attributes, setAttributes
 					color: color.color,
 					fontSize: dotSize,
 					letterSpacing: dotSpacing || dotSize,
-					paddingLeft: ( isDots ? ( dotSpacing || dotSize ) : '' ),
+					paddingLeft: ( isDots ? ( dotSpacing || dotSize ) : undefined ),
 					borderWidth: lineThickness,
-					height: lineThickness,
+					height: isLine ? lineThickness : undefined,
 				} }
 			/>
 			<InspectorControls>
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index 6e287b88fff0a3..22c0247d8383b3 100644
--- a/packages/block-library/src/separator/save.js
+++ b/packages/block-library/src/separator/save.js
@@ -9,6 +9,11 @@ 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 {
@@ -17,7 +22,14 @@ export default function separatorSave( { attributes } ) {
 		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
@@ -37,9 +49,9 @@ export default function separatorSave( { attributes } ) {
 		color: colorClass ? undefined : customColor,
 		fontSize: dotSize || undefined,
 		letterSpacing: dotSpacing || dotSize,
-		paddingLeft: dotSpacing || dotSize,
+		paddingLeft: ( isDots ? ( dotSpacing || dotSize ) : undefined ),
 		borderWidth: lineThickness,
-		height: lineThickness,
+		height: isLine ? lineThickness : undefined,
 	};
 
 	return ( <hr