From d5800b640640eecf4e1c40ecb2d90358b3c6d8e5 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Tue, 6 Aug 2019 15:42:32 +0100
Subject: [PATCH] add width control to separator

---
 .../block-library/src/separator/block.json    |  3 +++
 packages/block-library/src/separator/edit.js  | 19 +++++++++++++++++--
 packages/block-library/src/separator/save.js  |  2 ++
 .../block-library/src/separator/theme.scss    |  2 +-
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
index 98bcbb9150609..edbfed0b62402 100644
--- a/packages/block-library/src/separator/block.json
+++ b/packages/block-library/src/separator/block.json
@@ -7,6 +7,9 @@
 		},
 		"customColor": {
 			"type": "string"
+		},
+		"width": {
+			"type": "number"
 		}
 	}
 }
diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 050bd7423fb66..b3016f7fd93c9 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/packages/block-library/src/separator/edit.js
@@ -7,14 +7,15 @@ 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 } ) {
+function SeparatorEdit( { color, setColor, className, attributes, setAttributes } ) {
+	const { width = 25 } = attributes;
 	return (
 		<>
 			<HorizontalRule
@@ -27,9 +28,23 @@ function SeparatorEdit( { color, setColor, className } ) {
 				style={ {
 					backgroundColor: color.color,
 					color: color.color,
+					width: width + '%',
 				} }
 			/>
 			<InspectorControls>
+				<PanelBody title={ __( 'Separator Settings' ) }>
+					<RangeControl
+						label={ __( 'Percentage width' ) }
+						value={ width || '' }
+						onChange={ ( nextWidth ) => {
+							setAttributes( { width: nextWidth } );
+						} }
+						min={ 1 }
+						max={ 100 }
+						required
+						allowReset
+					/>
+				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color Settings' ) }
 					colorSettings={ [
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index d9b899486233c..77c6e93d029d4 100644
--- a/packages/block-library/src/separator/save.js
+++ b/packages/block-library/src/separator/save.js
@@ -14,6 +14,7 @@ export default function separatorSave( { attributes } ) {
 	const {
 		color,
 		customColor,
+		width,
 	} = attributes;
 
 	// the hr support changing color using border-color, since border-color
@@ -32,6 +33,7 @@ export default function separatorSave( { attributes } ) {
 	const separatorStyle = {
 		backgroundColor: backgroundClass ? undefined : customColor,
 		color: colorClass ? undefined : customColor,
+		width: width ? width + '%' : undefined,
 	};
 
 	return ( <hr
diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
index f0673d7bb6f5d..c87dc8193ecf5 100644
--- a/packages/block-library/src/separator/theme.scss
+++ b/packages/block-library/src/separator/theme.scss
@@ -6,7 +6,7 @@
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {
-		max-width: 100px;
+		width: 100px;
 	}
 
 	&.has-background:not(.is-style-dots) {