Separate width/height constraints for horizontal or vertical configur…

…ations
WordPress · Mar 18, 2022 · 15a81af · 15a81af
1 parent 0bde2fd
commit 15a81af
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 14 deletions.
diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
@@ -15,9 +15,21 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE, MAX_SPACER_SIZE } from './edit';
+import {
+	MIN_SPACER_WIDTH,
+	MAX_SPACER_WIDTH,
+	MIN_SPACER_HEIGHT,
+	MAX_SPACER_HEIGHT,
+} from './edit';
 
-function DimensionInput( { label, onChange, isResizing, value = '' } ) {
+function DimensionInput( {
+	label,
+	onChange,
+	isResizing,
+	value = '',
+	min,
+	max,
+} ) {
 	const [ temporaryInput, setTemporaryInput ] = useState( null );
 
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
@@ -58,8 +70,8 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 			<UnitControl
 				id={ inputId }
 				isResetValueOnUnitChange
-				min={ MIN_SPACER_SIZE }
-				max={ MAX_SPACER_SIZE }
+				min={ min }
+				max={ max }
 				onBlur={ handleOnBlur }
 				onChange={ handleOnChange }
 				style={ { maxWidth: 80 } }
@@ -90,6 +102,8 @@ export default function SpacerControls( {
 							setAttributes( { width: nextWidth } )
 						}
 						isResizing={ isResizing }
+						min={ MIN_SPACER_WIDTH }
+						max={ MAX_SPACER_WIDTH }
 					/>
 				) }
 				{ orientation !== 'horizontal' && (
@@ -100,6 +114,8 @@ export default function SpacerControls( {
 							setAttributes( { height: nextHeight } )
 						}
 						isResizing={ isResizing }
+						min={ MIN_SPACER_HEIGHT }
+						max={ MAX_SPACER_HEIGHT }
 					/>
 				) }
 			</PanelBody>

diff --git a/packages/block-library/src/spacer/controls.native.js b/packages/block-library/src/spacer/controls.native.js
@@ -14,7 +14,12 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE, MAX_SPACER_SIZE } from './edit';
+import {
+	MIN_SPACER_WIDTH,
+	MAX_SPACER_WIDTH,
+	MIN_SPACER_HEIGHT,
+	MAX_SPACER_HEIGHT,
+} from './edit';
 import styles from './style.scss';
 
 const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
@@ -67,8 +72,16 @@ function Controls( { attributes, context, setAttributes } ) {
 			<PanelBody title={ __( 'Dimensions' ) }>
 				<UnitControl
 					label={ label }
-					min={ MIN_SPACER_SIZE }
-					max={ MAX_SPACER_SIZE }
+					min={
+						orientation === 'horizontal'
+							? MIN_SPACER_WIDTH
+							: MIN_SPACER_HEIGHT
+					}
+					max={
+						orientation === 'horizontal'
+							? MAX_SPACER_WIDTH
+							: MAX_SPACER_HEIGHT
+					}
 					value={ value }
 					onChange={ handleChange }
 					onUnitChange={ handleUnitChange }

diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
@@ -16,8 +16,10 @@ import { View } from '@wordpress/primitives';
  */
 import SpacerControls from './controls';
 
-export const MIN_SPACER_SIZE = 10;
-export const MAX_SPACER_SIZE = 500;
+export const MIN_SPACER_WIDTH = 1;
+export const MAX_SPACER_WIDTH = 500;
+export const MIN_SPACER_HEIGHT = 10;
+export const MAX_SPACER_HEIGHT = 500;
 
 const ResizableSpacer = ( {
 	orientation,
@@ -59,7 +61,9 @@ const ResizableSpacer = ( {
 			} }
 			onResizeStop={ ( _event, _direction, elt ) => {
 				const nextVal = Math.min(
-					MAX_SPACER_SIZE,
+					orientation === 'horizontal'
+						? MAX_SPACER_WIDTH
+						: MAX_SPACER_HEIGHT,
 					getCurrentSize( elt )
 				);
 				onResizeStop( `${ nextVal }px` );
@@ -122,8 +126,7 @@ const SpacerEdit = ( {
 		if ( blockOrientation === 'horizontal' ) {
 			return (
 				<ResizableSpacer
-					minWidth={ MIN_SPACER_SIZE }
-					maxWidth={ MAX_SPACER_SIZE }
+					minWidth={ MIN_SPACER_WIDTH }
 					enable={ {
 						top: false,
 						right: true,
@@ -148,8 +151,7 @@ const SpacerEdit = ( {
 		return (
 			<>
 				<ResizableSpacer
-					minHeight={ MIN_SPACER_SIZE }
-					maxHeight={ MAX_SPACER_SIZE }
+					minHeight={ MIN_SPACER_HEIGHT }
 					enable={ {
 						top: false,
 						right: false,