diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
index 98bcbb9150609..802510ae39765 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"
}
}
}
diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 050bd7423fb66..827d9b619e824 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 (
<>
+ { isDots &&
+ {
+ setAttributes( { dotSize: nextSize } );
+ } }
+ allowReset
+ />
+ {
+ setAttributes( { dotSpacing: nextSize } );
+ } }
+ allowReset
+ />
+ }
+ { isLine &&
+ {
+ setAttributes( { lineThickness: nextSize } );
+ } }
+ allowReset
+ />
+ }