UnitControl: useCustomUnits.defaultValues overwrites defaultValues used in previous UnitControls #70036
Description
Description
When using multiple UnitControls in a block, I expect useCustomUnits.defaultValues to work in isolation for each UnitControl it is used in.
import { InspectorControls } from '@wordpress/block-editor';
import {
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
<>
<InspectorControls>
<UnitControl
__next40pxDefaultSize
isResetValueOnUnitChange
label={ _x('Percent Bar Spacing', 'admin-text', 'site-reviews') }
min={0}
onChange={ (summary_bar_spacing) => setAttributes({ summary_bar_spacing }) }
units={ useCustomUnits({
availableUnits: ['px', 'em', 'rem'],
defaultValues: { px: 8, em: .5, rem: .5 }, // these are default values
}) }
value={ attributes.summary_bar_spacing }
/>
<UnitControl
__next40pxDefaultSize
isResetValueOnUnitChange
label={ _x('Percent Bar Size', 'admin-text', 'site-reviews') }
min={0}
onChange={ (summary_bar_size) => setAttributes({ summary_bar_size }) }
units={ useCustomUnits({
availableUnits: ['px', 'em', 'rem'],
defaultValues: { px: 16, em: 1, rem: 1 }, // these are default values
}) }
value={ attributes.summary_bar_size }
/>
</InspectorControls>
</>In the example above, I expect the default values for the units used in each UnitControl control to be unique to that control when the unit is changed and the isResetValueOnUnitChange prop is set.
Instead, the default values for the units in ALL UnitControl controls are the ones set in the LAST control.
It should be:
// default summary_bar_spacing values
{ px: 8, em: .5, rem: .5 }
// default summary_bar_size values
{ px: 16, em: 1, rem: 1 }Instead it is this:
// default summary_bar_spacing values
{ px: 16, em: 1, rem: 1 }
// default summary_bar_size values
{ px: 16, em: 1, rem: 1 }Step-by-step reproduction instructions
- Add multiple
UnitControlcontrols to a block. - Add the
isResetValueOnUnitChangeprop to each UnitControl. - Use
useCustomUnits.availableUnitsto set units to['px', 'em']for each UnitControl. - Use
useCustomUnits.defaultValuesto set a different default 'px' and 'em' value for each UnitControl. - Build the block and test the Unit controls by changing the unit.
- Observe that the default value of the unit you selected is the same for all UnitControls when instead they should be different for each UnitControl.
Screenshots, screen recording, code snippet
Recording.at.2025-05-01.13.15.55.mp4
Environment info
No response
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure