Spacer block: use same min value resizable box and controls, remove…

… `max` limit (#39577) * Spacer block: update min size from 1 to 10 * Spacer: apply min/max sizes to ResizableSpacer * Spacer block: apply min/max sizes to controls * Separate width/height constraints for horizontal or vertical configurations * Set `min` to `0` * Remove `max` value * Unify vertical/horizontal min sizes back into one variable
WordPress · Mar 22, 2022 · c67d146 · c67d146
1 parent 04265cc
commit c67d146
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
@@ -15,7 +15,7 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { MAX_SPACER_SIZE } from './edit';
+import { MIN_SPACER_SIZE } from './edit';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
@@ -56,8 +56,7 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 			<UnitControl
 				id={ inputId }
 				isResetValueOnUnitChange
-				min={ 0 }
-				max={ MAX_SPACER_SIZE }
+				min={ MIN_SPACER_SIZE }
 				onChange={ handleOnChange }
 				style={ { maxWidth: 80 } }
 				value={ computedValue }

diff --git a/packages/block-library/src/spacer/controls.native.js b/packages/block-library/src/spacer/controls.native.js
@@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { MIN_SPACER_SIZE } from './edit';
 import styles from './style.scss';
 
 const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
@@ -66,7 +67,7 @@ function Controls( { attributes, context, setAttributes } ) {
 			<PanelBody title={ __( 'Dimensions' ) }>
 				<UnitControl
 					label={ label }
-					min={ 1 }
+					min={ MIN_SPACER_SIZE }
 					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,7 @@ import { View } from '@wordpress/primitives';
  */
 import SpacerControls from './controls';
 
-export const MIN_SPACER_SIZE = 1;
-export const MAX_SPACER_SIZE = 500;
+export const MIN_SPACER_SIZE = 0;
 
 const ResizableSpacer = ( {
 	orientation,
@@ -58,10 +57,7 @@ const ResizableSpacer = ( {
 				}
 			} }
 			onResizeStop={ ( _event, _direction, elt ) => {
-				const nextVal = Math.min(
-					MAX_SPACER_SIZE,
-					getCurrentSize( elt )
-				);
+				const nextVal = getCurrentSize( elt );
 				onResizeStop( `${ nextVal }px` );
 				setIsResizing( false );
 			} }
@@ -147,6 +143,7 @@ const SpacerEdit = ( {
 		return (
 			<>
 				<ResizableSpacer
+					minHeight={ MIN_SPACER_SIZE }
 					enable={ {
 						top: false,
 						right: false,