Patch Current UnitControl

packages/block-editor/src/hooks/margin.js

@@ -19,7 +19,6 @@ const UNITS = [
 	{ value: 'em', label: 'em', default: '' },
 	{ value: 'rem', label: 'rem', default: '' },
 	{ value: 'vw', label: 'vw', default: '' },
-	{ value: 'auto', label: 'auto', default: '' },
 ];
 
 const hasMarginSupport = ( blockName ) => {

packages/components/src/box-control/all-input-control.js

@@ -12,7 +12,6 @@ import {
 	getAllValue,
 	isValuesMixed,
 	isValuesDefined,
-	setAutoValue,
 } from './utils';
 
 export default function AllInputControl( {
@@ -38,12 +37,11 @@ export default function AllInputControl( {
 
 	const handleOnChange = ( next ) => {
 		const nextValues = { ...values };
-		const val = setAutoValue( next );
 
-		nextValues.top = val;
-		nextValues.bottom = val;
-		nextValues.left = val;
-		nextValues.right = val;
+		nextValues.top = next;
+		nextValues.bottom = next;
+		nextValues.left = next;
+		nextValues.right = next;
 
 		onChange( nextValues );
 	};

packages/components/src/box-control/input-controls.js

@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, CUSTOM_VALUES, setAutoValue } from './utils';
+import { LABELS, CUSTOM_VALUES } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
 export default function BoxInputControls( {
@@ -39,8 +39,7 @@ export default function BoxInputControls( {
 	const createHandleOnChange = ( side ) => ( next, { event } ) => {
 		const { altKey } = event;
 		const nextValues = { ...values };
-		const val = setAutoValue( next );
-		nextValues[ side ] = val;
+		nextValues[ side ] = next;
 
 		/**
 		 * Supports changing pair sides. For example, holding the ALT key
@@ -49,23 +48,25 @@ export default function BoxInputControls( {
 		if ( altKey ) {
 			switch ( side ) {
 				case 'top':
-					nextValues.bottom = val;
+					nextValues.bottom = next;
 					break;
 				case 'bottom':
-					nextValues.top = val;
+					nextValues.top = next;
 					break;
 				case 'left':
-					nextValues.right = val;
+					nextValues.right = next;
 					break;
 				case 'right':
-					nextValues.left = val;
+					nextValues.left = next;
 					break;
 			}
 		}
 
 		handleOnChange( nextValues );
 	};
 
+	const isMixed = ( side ) => side === CUSTOM_VALUES.AUTO;
+
 	return (
 		<LayoutContainer className="component-box-control__input-controls-wrapper">
 			<Layout
@@ -82,7 +83,7 @@ export default function BoxInputControls( {
 					onHoverOn={ createHandleOnHoverOn( 'top' ) }
 					onHoverOff={ createHandleOnHoverOff( 'top' ) }
 					label={ LABELS.top }
-					disableValue={ top === CUSTOM_VALUES.AUTO }
+					disableUnits={ isMixed( top ) }
 				/>
 				<UnitControl
 					{ ...props }
@@ -92,7 +93,7 @@ export default function BoxInputControls( {
 					onHoverOn={ createHandleOnHoverOn( 'right' ) }
 					onHoverOff={ createHandleOnHoverOff( 'right' ) }
 					label={ LABELS.right }
-					disableValue={ right === CUSTOM_VALUES.AUTO }
+					disableUnits={ isMixed( right ) }
 				/>
 				<UnitControl
 					{ ...props }
@@ -102,7 +103,7 @@ export default function BoxInputControls( {
 					onHoverOn={ createHandleOnHoverOn( 'bottom' ) }
 					onHoverOff={ createHandleOnHoverOff( 'bottom' ) }
 					label={ LABELS.bottom }
-					disableValue={ bottom === CUSTOM_VALUES.AUTO }
+					disableUnits={ isMixed( bottom ) }
 				/>
 				<UnitControl
 					{ ...props }
@@ -113,7 +114,7 @@ export default function BoxInputControls( {
 					onHoverOn={ createHandleOnHoverOn( 'left' ) }
 					onHoverOff={ createHandleOnHoverOff( 'left' ) }
 					label={ LABELS.left }
-					disableValue={ left === CUSTOM_VALUES.AUTO }
+					disableUnits={ isMixed( left ) }
 				/>
 			</Layout>
 		</LayoutContainer>

packages/components/src/box-control/utils.js

@@ -90,8 +90,9 @@ export function getAllValue( values = {} ) {
 	 * isNumber() is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
-	const allValue = isNumber( value ) ? `${ value }${ unit }` : null;
-
+	const isAutoValue =
+		value === CUSTOM_VALUES.AUTO ? CUSTOM_VALUES.AUTO : null;
+	const allValue = isNumber( value ) ? `${ value }${ unit }` : isAutoValue;
 	return allValue;
 }
 
@@ -103,8 +104,7 @@ export function getAllValue( values = {} ) {
  */
 export function isValuesMixed( values = {} ) {
 	const allValue = getAllValue( values );
-	const autoValues = Object.values( values ).every( ( i ) => i === 'auto' );
-	const isMixed = isNaN( parseFloat( allValue ) ) && ! autoValues;
+	const isMixed = isNaN( parseFloat( allValue ) );
 
 	return isMixed;
 }
@@ -159,15 +159,3 @@ export function extendStyles( type ) {
 		};
 	};
 }
-
-/**
- * Checks to determine if passed param includes auto as value
- * and if so returns only the auto string
- *
- * @param {string} value
- *
- * @return {string} Returns the provided value (value * unit) or only an 'auto' string
- */
-export function setAutoValue( value ) {
-	return value.includes( CUSTOM_VALUES.AUTO ) ? CUSTOM_VALUES.AUTO : value;
-}

packages/components/src/number-control/index.js

@@ -155,7 +155,10 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.COMMIT
 		) {
-			state.value = roundClamp( currentValue, min, max );
+			state.value =
+				currentValue === 'auto'
+					? currentValue
+					: roundClamp( currentValue, min, max );
 		}
 
 		return state;

packages/components/src/unit-control/index.js

@@ -19,7 +19,12 @@ import {
 } from '../input-control/state';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
+import {
+	CSS_UNITS,
+	CUSTOM_VALUES,
+	getParsedValue,
+	getValidParsedUnit,
+} from './utils';
 import { useControlledState } from '../utils/hooks';
 
 function UnitControl(
@@ -29,7 +34,6 @@ function UnitControl(
 		className,
 		disabled = false,
 		disableUnits = false,
-		disableValue = false,
 		isPressEnterToChange = false,
 		isResetValueOnUnitChange = false,
 		isUnitSelectTabbable = true,
@@ -61,6 +65,11 @@ function UnitControl(
 			return;
 		}
 
+		if ( next && next.toString().includes( CUSTOM_VALUES.AUTO ) ) {
+			onChange( CUSTOM_VALUES.AUTO, changeProps );
+			return;
+		}
+
 		/*
 		 * Customizing the onChange callback.
 		 * This allows as to broadcast a combined value+unit to onChange.
@@ -86,6 +95,18 @@ function UnitControl(
 	};
 
 	const mayUpdateUnit = ( event ) => {
+		if ( event.target.value === CUSTOM_VALUES.AUTO ) {
+			refParsedValue.current = CUSTOM_VALUES.AUTO;
+
+			if ( isPressEnterToChange ) {
+				const defaultUnit = { value: '', label: '', default: '' };
+				const changeProps = { event, defaultUnit };
+
+				onChange( CUSTOM_VALUES.AUTO, changeProps );
+			}
+			return;
+		}
+
 		if ( ! isNaN( event.target.value ) ) {
 			refParsedValue.current = null;
 			return;
@@ -165,7 +186,7 @@ function UnitControl(
 				{ ...omit( props, [ 'children' ] ) }
 				autoComplete={ autoComplete }
 				className={ classes }
-				disabled={ disabled || disableValue }
+				disabled={ disabled }
 				disableUnits={ disableUnits }
 				isPressEnterToChange={ isPressEnterToChange }
 				label={ label }

packages/components/src/unit-control/utils.js

@@ -12,6 +12,10 @@ export const CSS_UNITS = [
 	{ value: 'vh', label: 'vh', default: 10 },
 ];
 
+export const CUSTOM_VALUES = {
+	AUTO: 'auto',
+};
+
 export const DEFAULT_UNIT = CSS_UNITS[ 0 ];
 
 /**
@@ -55,6 +59,11 @@ export function parseUnit( initialValue, units = CSS_UNITS ) {
 	let num = parseFloat( value, 10 );
 	num = isNaN( num ) ? '' : num;
 
+	if ( value === CUSTOM_VALUES.AUTO ) {
+		num = value;
+		return [ num, '' ];
+	}
+
 	const unitMatch = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];
 
 	let unit = unitMatch !== undefined ? unitMatch : '';