2

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

@@ -6,29 +6,96 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
+import { HorizontalRule, ResizableBox } from '@wordpress/components';
 import { withColors } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { withDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import SeparatorSettings from './separator-settings';
 
-function SeparatorEdit( { color, setColor, className } ) {
+function SeparatorEdit( {
+	attributes,
+	isSelected,
+	setAttributes,
+	onResizeStart,
+	onResizeStop,
+	color,
+	setColor,
+	className,
+} ) {
+	const { height } = attributes;
+	const [ inputHeightValue, setInputHeightValue ] = useState( height );
+
 	return (
 		<>
-			<HorizontalRule
-				className={ classnames( className, {
-					'has-background': color.color,
-					[ color.class ]: color.class,
-				} ) }
-				style={ {
-					backgroundColor: color.color,
-					color: color.color,
+			<ResizableBox
+				className={ classnames(
+					'block-library-separator__resize-container',
+					{
+						'is-selected': isSelected,
+					}
+				) }
+				size={ {
+					height,
+				} }
+				minHeight="20"
+				enable={ {
+					top: false,
+					right: false,
+					bottom: true,
+					left: false,
+					topRight: false,
+					bottomRight: false,
+					bottomLeft: false,
+					topLeft: false,
 				} }
+				onResizeStart={ onResizeStart }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					onResizeStop();
+					const separatorHeight = parseInt(
+						height + delta.height,
+						10
+					);
+					setAttributes( {
+						height: separatorHeight,
+					} );
+					setInputHeightValue( separatorHeight );
+				} }
+			>
+				<HorizontalRule
+					className={ classnames( className, {
+						'has-background': color.color,
+						[ color.class ]: color.class,
+					} ) }
+					style={ {
+						backgroundColor: color.color,
+						color: color.color,
+					} }
+				/>
+			</ResizableBox>
+			<SeparatorSettings
+				color={ color }
+				height={ inputHeightValue }
+				setColor={ setColor }
+				setInputHeightValue={ setInputHeightValue }
+				setAttributes={ setAttributes }
 			/>
-			<SeparatorSettings color={ color } setColor={ setColor } />
 		</>
 	);
 }
 
-export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );
+export default compose( [
+	withColors( 'color', { textColor: 'color' } ),
+	withDispatch( ( dispatch ) => {
+		const { toggleSelection } = dispatch( 'core/block-editor' );
+
+		return {
+			onResizeStart: () => toggleSelection( false ),
+			onResizeStop: () => toggleSelection( true ),
+		};
+	} ),
+] )( SeparatorEdit );

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

@@ -0,0 +1,18 @@
+.block-library-separator__resize-container.is-selected {
+	background: $light-gray-200;
+
+	.is-dark-theme & {
+		background: $light-opacity-light-200;
+	}
+}
+
+.block-library-separator__resize-container {
+	clear: both;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin-bottom: $default-block-margin;
+	hr {
+		min-width: 2.5em;
+	}
+}

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

@@ -3,20 +3,67 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
+import { compose, withInstanceId } from '@wordpress/compose';
+import { BaseControl, PanelBody } from '@wordpress/components';
 
-const SeparatorSettings = ( { color, setColor } ) => (
-	<InspectorControls>
-		<PanelColorSettings
-			title={ __( 'Color settings' ) }
-			colorSettings={ [
-				{
-					value: color.color,
-					onChange: setColor,
-					label: __( 'Color' ),
-				},
-			] }
-		></PanelColorSettings>
-	</InspectorControls>
-);
+const MINIMUM_HEIGHT = 20;
 
-export default SeparatorSettings;
+const SeparatorSettings = ( {
+	color,
+	height,
+	instanceId,
+	setColor,
+	setInputHeightValue,
+	setAttributes,
+} ) => {
+	const id = `block-spacer-height-input-${ instanceId }`;
+	return (
+		<InspectorControls>
+			<PanelColorSettings
+				title={ __( 'Color settings' ) }
+				colorSettings={ [
+					{
+						value: color.color,
+						onChange: setColor,
+						label: __( 'Color' ),
+					},
+				] }
+			></PanelColorSettings>
+			<PanelBody title={ __( 'Size settings' ) }>
+				<BaseControl
+					id={ id }
+					label={ __( 'Empty vertical space in pixels' ) }
+				>
+					<input
+						type="number"
+						id={ id }
+						onChange={ ( event ) => {
+							let spacerHeight = parseInt(
+								event.target.value,
+								10
+							);
+							setInputHeightValue( spacerHeight );
+							if ( isNaN( spacerHeight ) ) {
+								// Set spacer height to default size and input box to empty string
+								setInputHeightValue( '' );
+								spacerHeight = MINIMUM_HEIGHT;
+							} else if ( spacerHeight < MINIMUM_HEIGHT ) {
+								// Set spacer height to minimum size
+								setInputHeightValue( MINIMUM_HEIGHT );
+								spacerHeight = MINIMUM_HEIGHT;
+							}
+							setAttributes( {
+								height: spacerHeight,
+							} );
+						} }
+						value={ height }
+						min={ MINIMUM_HEIGHT }
+						step="10"
+					/>
+				</BaseControl>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default compose( [ withInstanceId ] )( SeparatorSettings );