Add top/bottom margins to separator block

This leverages the modified BoxControl component from `update/boxcontrol-with-configurable-sides` to allow only top and bottom margins to be set.
WordPress · Apr 30, 2021 · 2f96692 · 2f96692
1 parent d8bf09e
commit 2f96692
Show file tree

Hide file tree

Showing 9 changed files with 366 additions and 37 deletions.
diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
@@ -8,6 +8,9 @@
 		},
 		"customColor": {
 			"type": "string"
+		},
+		"style": {
+			"type": "object"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
@@ -6,29 +6,59 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
+import {
+	HorizontalRule,
+	__experimentalBoxControl as BoxControl,
+} from '@wordpress/components';
+import { View } from '@wordpress/primitives';
 import { withColors, useBlockProps } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
 import SeparatorSettings from './separator-settings';
+import { MARGIN_CONSTRAINTS, parseUnit } from './shared';
+
+const { __Visualizer: BoxControlVisualizer } = BoxControl;
+
+function SeparatorEdit( props ) {
+	const {
+		color,
+		attributes: { style },
+	} = props;
+
+	const { top, bottom } = style?.spacing?.margin || {};
+	const marginUnit = parseUnit( top || bottom );
+	const blockProps = useBlockProps();
 
-function SeparatorEdit( { color, setColor, className } ) {
 	return (
 		<>
-			<HorizontalRule
-				{ ...useBlockProps( {
-					className: classnames( className, {
+			<View
+				{ ...blockProps }
+				className={ blockProps.className?.replace(
+					'wp-block-separator',
+					'wp-block-separator-wrapper'
+				) }
+			>
+				<BoxControlVisualizer
+					values={ style?.spacing?.margin }
+					showValues={ style?.visualizers?.margin }
+				/>
+				<HorizontalRule
+					className={ classnames( blockProps.className, {
 						'has-background': color.color,
 						[ color.class ]: color.class,
-					} ),
-					style: {
+					} ) }
+					style={ {
 						backgroundColor: color.color,
 						color: color.color,
-					},
-				} ) }
-			/>
-			<SeparatorSettings color={ color } setColor={ setColor } />
+						marginTop: top || MARGIN_CONSTRAINTS[ marginUnit ].min,
+						marginBottom:
+							bottom || MARGIN_CONSTRAINTS[ marginUnit ].min,
+					} }
+				/>
+			</View>
+			<SeparatorSettings { ...props } />
 		</>
 	);
 }

diff --git a/packages/block-library/src/separator/edit.native.js b/packages/block-library/src/separator/edit.native.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { HorizontalRule, useConvertUnitToMobile } from '@wordpress/components';
+import { withColors, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import SeparatorSettings from './separator-settings';
+import { MARGIN_CONSTRAINTS, parseUnit } from './shared';
+
+function SeparatorEdit( props ) {
+	const {
+		color,
+		attributes: { style },
+	} = props;
+
+	const { top, bottom } = style?.spacing?.margin || {};
+	const marginUnit = parseUnit( top || bottom );
+
+	const convertedMarginTop = useConvertUnitToMobile(
+		parseFloat( top || 0 ) || MARGIN_CONSTRAINTS[ marginUnit ].min,
+		marginUnit
+	);
+
+	const convertedMarginBottom = useConvertUnitToMobile(
+		parseFloat( bottom || 0 ) || MARGIN_CONSTRAINTS[ marginUnit ].min,
+		marginUnit
+	);
+
+	return (
+		<>
+			<HorizontalRule
+				{ ...useBlockProps() }
+				style={ {
+					backgroundColor: color.color,
+					color: color.color,
+					marginBottom: convertedMarginBottom,
+					marginTop: convertedMarginTop,
+				} }
+			/>
+			<SeparatorSettings { ...props } />
+		</>
+	);
+}
+
+export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );
diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss
@@ -1,5 +1,7 @@
-.block-editor-block-list__block[data-type="core/separator"] {
-	// Prevent margin collapsing so the area to select the separator is bigger.
-	padding-top: 0.1px;
-	padding-bottom: 0.1px;
+.wp-block-separator-wrapper {
+	display: flex;
+
+	.wp-block-separator {
+		width: 100%;
+	}
 }
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
@@ -27,6 +27,8 @@ export default function separatorSave( { attributes } ) {
 	const style = {
 		backgroundColor: backgroundClass ? undefined : customColor,
 		color: colorClass ? undefined : customColor,
+		marginBottom: attributes.style?.spacing?.margin?.bottom,
+		marginTop: attributes.style?.spacing?.margin?.top,
 	};
 
 	return <hr { ...useBlockProps.save( { className, style } ) } />;

diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js
@@ -3,20 +3,74 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	__experimentalBoxControl as BoxControl,
+} from '@wordpress/components';
 
-const SeparatorSettings = ( { color, setColor } ) => (
-	<InspectorControls>
-		<PanelColorSettings
-			title={ __( 'Color' ) }
-			colorSettings={ [
-				{
-					value: color.color,
-					onChange: setColor,
-					label: __( 'Color' ),
+/**
+ * Internal dependencies
+ */
+import { CSS_UNITS } from './shared';
+
+const SeparatorSettings = ( {
+	color,
+	setColor,
+	attributes: { style },
+	setAttributes,
+} ) => {
+	const updateMargins = ( { top, bottom } ) => {
+		setAttributes( {
+			style: {
+				...style,
+				spacing: {
+					...style?.spacing,
+					margin: { top, bottom },
 				},
-			] }
-		></PanelColorSettings>
-	</InspectorControls>
-);
+			},
+		} );
+	};
+
+	const onChangeShowVisualizer = ( { top, bottom } ) => {
+		setAttributes( {
+			style: {
+				...style,
+				visualizers: {
+					margin: { top, bottom },
+				},
+			},
+		} );
+	};
+
+	return (
+		<InspectorControls>
+			<PanelColorSettings
+				title={ __( 'Color settings' ) }
+				colorSettings={ [
+					{
+						value: color.color,
+						onChange: setColor,
+						label: __( 'Color' ),
+					},
+				] }
+			/>
+			<PanelBody title={ __( 'Separator settings' ) }>
+				<BoxControl
+					label={ __( 'Margin' ) }
+					onChange={ updateMargins }
+					sides={ {
+						top: true,
+						right: false,
+						bottom: true,
+						left: false,
+					} }
+					units={ CSS_UNITS }
+					values={ style?.spacing?.margin || {} }
+					onChangeShowVisualizer={ onChangeShowVisualizer }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
 
 export default SeparatorSettings;
diff --git a/packages/block-library/src/separator/separator-settings.native.js b/packages/block-library/src/separator/separator-settings.native.js
@@ -1,3 +1,106 @@
-// Mobile has no separator settings at this time, so render nothing
-const SeparatorSettings = () => null;
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
+import { PanelBody, UnitControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { CSS_UNITS, MARGIN_CONSTRAINTS, parseUnit } from './shared';
+
+const SeparatorSettings = ( {
+	color,
+	setColor,
+	attributes,
+	setAttributes,
+} ) => {
+	const { style } = attributes;
+	const { top, bottom } = style?.spacing?.margin || {};
+
+	const topUnit = parseUnit( top );
+	const bottomUnit = parseUnit( bottom );
+	const topValue = top
+		? parseFloat( top )
+		: MARGIN_CONSTRAINTS[ topUnit ].min;
+	const bottomValue = bottom
+		? parseFloat( bottom )
+		: MARGIN_CONSTRAINTS[ bottomUnit ].min;
+
+	const updateMargins = ( margins ) => {
+		setAttributes( {
+			style: {
+				...style,
+				spacing: {
+					...style?.spacing,
+					margin: margins,
+				},
+			},
+		} );
+	};
+
+	const createHandleMarginChange = ( side, unit ) => ( value ) => {
+		updateMargins( {
+			...style?.spacing?.margin,
+			[ side ]: `${ value }${ unit }`,
+		} );
+	};
+
+	const onUnitChange = ( unit ) => {
+		updateMargins( {
+			top: MARGIN_CONSTRAINTS[ unit ].default,
+			bottom: MARGIN_CONSTRAINTS[ unit ].default,
+		} );
+	};
+
+	return (
+		<InspectorControls>
+			<PanelColorSettings
+				title={ __( 'Color settings' ) }
+				colorSettings={ [
+					{
+						value: color.color,
+						onChange: setColor,
+						label: __( 'Color' ),
+					},
+				] }
+			/>
+			<PanelBody title={ __( 'Separator settings' ) }>
+				<UnitControl
+					label={ __( 'Top margin' ) }
+					key={ `separator-top-margin-${ bottomUnit }` }
+					min={ MARGIN_CONSTRAINTS[ topUnit ].min }
+					max={ MARGIN_CONSTRAINTS[ topUnit ].max }
+					value={ topValue || MARGIN_CONSTRAINTS[ topUnit ].min }
+					unit={ topUnit }
+					units={ CSS_UNITS }
+					onChange={ createHandleMarginChange( 'top', topUnit ) }
+					onUnitChange={ onUnitChange }
+					decimalNum={ 1 }
+					step={ topUnit === 'px' ? 1 : 0.1 }
+				/>
+				<UnitControl
+					label={ __( 'Bottom margin' ) }
+					key={ `separator-bottom-margin-${ bottomUnit }` }
+					min={ MARGIN_CONSTRAINTS[ bottomUnit ].min }
+					max={ MARGIN_CONSTRAINTS[ bottomUnit ].max }
+					value={
+						bottomValue || MARGIN_CONSTRAINTS[ bottomUnit ].min
+					}
+					unit={ bottomUnit }
+					units={ CSS_UNITS }
+					onChange={ createHandleMarginChange(
+						'bottom',
+						bottomUnit
+					) }
+					onUnitChange={ onUnitChange }
+					decimalNum={ 1 }
+					step={ bottomUnit === 'px' ? 1 : 0.1 }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
 export default SeparatorSettings;