diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7b294f3663ef0..07abcbec0926b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
### Internal
- Delete the `composeStateReducers` utility function ([#39262](https://github.com/WordPress/gutenberg/pull/39262)).
+- `BoxControl`: stop using `UnitControl`'s deprecated `unit` prop ([#39511](https://github.com/WordPress/gutenberg/pull/39511)).
## 19.6.0 (2022-03-11)
diff --git a/packages/components/src/box-control/all-input-control.js b/packages/components/src/box-control/all-input-control.js
index 27ba5be0d1a44..98b828603df1c 100644
--- a/packages/components/src/box-control/all-input-control.js
+++ b/packages/components/src/box-control/all-input-control.js
@@ -10,7 +10,6 @@ import {
ALL_SIDES,
LABELS,
getAllValue,
- getAllUnitFallback,
isValuesMixed,
isValuesDefined,
} from './utils';
@@ -26,17 +25,11 @@ export default function AllInputControl( {
setSelectedUnits,
...props
} ) {
- const allValue = getAllValue( values, sides );
+ const allValue = getAllValue( values, selectedUnits, sides );
const hasValues = isValuesDefined( values );
- const isMixed = hasValues && isValuesMixed( values, sides );
+ const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
const allPlaceholder = isMixed ? LABELS.mixed : null;
- // Set meaningful unit selection if no allValue and user has previously
- // selected units without assigning values while controls were unlinked.
- const allUnitFallback = ! allValue
- ? getAllUnitFallback( selectedUnits )
- : undefined;
-
const handleOnFocus = ( event ) => {
onFocus( event, { side: 'all' } );
};
@@ -104,7 +97,6 @@ export default function AllInputControl( {
disableUnits={ isMixed }
isOnly
value={ allValue }
- unit={ allUnitFallback }
onChange={ handleOnChange }
onUnitChange={ handleOnUnitChange }
onFocus={ handleOnFocus }
diff --git a/packages/components/src/box-control/axial-input-controls.js b/packages/components/src/box-control/axial-input-controls.js
index 848e00794641b..4223e6d69ce49 100644
--- a/packages/components/src/box-control/axial-input-controls.js
+++ b/packages/components/src/box-control/axial-input-controls.js
@@ -1,6 +1,7 @@
/**
* Internal dependencies
*/
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
import UnitControl from './unit-control';
import { LABELS } from './utils';
import { Layout } from './styles/box-control-styles';
@@ -113,27 +114,37 @@ export default function AxialInputControls( {
align="top"
className="component-box-control__vertical-horizontal-input-controls"
>
- { filteredSides.map( ( side ) => (
-
- ) ) }
+ { filteredSides.map( ( side ) => {
+ const [
+ parsedQuantity,
+ parsedUnit,
+ ] = parseQuantityAndUnitFromRawValue(
+ side === 'vertical' ? values.top : values.left
+ );
+ const selectedUnit =
+ side === 'vertical'
+ ? selectedUnits.top
+ : selectedUnits.left;
+ return (
+
+ );
+ } ) }
);
}
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 116c002d93797..ac8f58f7b58a6 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -7,6 +7,7 @@ import { noop } from 'lodash';
* Internal dependencies
*/
import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
import { ALL_SIDES, LABELS } from './utils';
import { LayoutContainer, Layout } from './styles/box-control-styles';
@@ -91,25 +92,35 @@ export default function BoxInputControls( {
align="top"
className="component-box-control__input-controls"
>
- { filteredSides.map( ( side ) => (
-
- ) ) }
+ { filteredSides.map( ( side ) => {
+ const [
+ parsedQuantity,
+ parsedUnit,
+ ] = parseQuantityAndUnitFromRawValue( values[ side ] );
+
+ const computedUnit = values[ side ]
+ ? parsedUnit
+ : selectedUnits[ side ];
+
+ return (
+
+ );
+ } ) }
);
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 9cadf7700484e..2b039a127f051 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -61,24 +61,32 @@ function mode( arr ) {
* Gets the 'all' input value and unit from values data.
*
* @param {Object} values Box values.
+ * @param {Object} selectedUnits Box units.
* @param {Array} availableSides Available box sides to evaluate.
*
* @return {string} A value + unit for the 'all' input.
*/
-export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
+export function getAllValue(
+ values = {},
+ selectedUnits,
+ availableSides = ALL_SIDES
+) {
const sides = normalizeSides( availableSides );
const parsedQuantitiesAndUnits = sides.map( ( side ) =>
parseQuantityAndUnitFromRawValue( values[ side ] )
);
- const allValues = parsedQuantitiesAndUnits.map(
+ const allParsedQuantities = parsedQuantitiesAndUnits.map(
( value ) => value[ 0 ] ?? ''
);
- const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
+ const allParsedUnits = parsedQuantitiesAndUnits.map(
+ ( value ) => value[ 1 ]
+ );
- const value = allValues.every( ( v ) => v === allValues[ 0 ] )
- ? allValues[ 0 ]
+ const commonQuantity = allParsedQuantities.every(
+ ( v ) => v === allParsedQuantities[ 0 ]
+ )
+ ? allParsedQuantities[ 0 ]
: '';
- const unit = mode( allUnits );
/**
* The isNumber check is important. On reset actions, the incoming value
@@ -89,9 +97,17 @@ export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
* isNumber() is more specific for these cases, rather than relying on a
* simple truthy check.
*/
- const allValue = isNumber( value ) ? `${ value }${ unit }` : undefined;
+ let commonUnit;
+ if ( isNumber( commonQuantity ) ) {
+ commonUnit = mode( allParsedUnits );
+ } else {
+ // Set meaningful unit selection if no commonQuantity and user has previously
+ // selected units without assigning values while controls were unlinked.
+ commonUnit =
+ getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+ }
- return allValue;
+ return [ commonQuantity, commonUnit ].join( '' );
}
/**
@@ -113,13 +129,14 @@ export function getAllUnitFallback( selectedUnits ) {
/**
* Checks to determine if values are mixed.
*
- * @param {Object} values Box values.
- * @param {Array} sides Available box sides to evaluate.
+ * @param {Object} values Box values.
+ * @param {Object} selectedUnits Box units.
+ * @param {Array} sides Available box sides to evaluate.
*
* @return {boolean} Whether values are mixed.
*/
-export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
- const allValue = getAllValue( values, sides );
+export function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {
+ const allValue = getAllValue( values, selectedUnits, sides );
const isMixed = isNaN( parseFloat( allValue ) );
return isMixed;