Input Fields: Unit jumps to px when set to 0

[hanneslsm]

Description

see below

Step-by-step reproduction instructions

1. Add a spacer
2. set unit to vh
3. remove the values, so that you can add a new value
4. a 0 gets automatically added and the unit jumps back to px

Screenshots, screen recording, code snippet

Screen.Recording.2023-06-18.at.09.54.34.mp4

Environment info

• WP 6.2.2
• GB 16

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

[ndiego]

Thanks for reporting @hanneslsm, I am able to confirm as well.

[hanneslsm]

I just saw this happens also in the dimension controls (padding) for a button in the global styles. I guess this is not an issue of the spacer then but of the input field.
I'm going to rename the title. @ndiego Could you please change the label? Thanks! (Maybe even a ticket for the UX & Polish Board? :) )

[Mayank-Tripathi32]

I just saw this happens also in the dimension controls (padding) for a button in the global styles. I guess this is not an issue of the spacer then but of the input field. I'm going to rename the title. @ndiego Could you please change the label? Thanks! (Maybe even a ticket for the UX & Polish Board? :) )

I fixed the spacer block height/width issue in packages/block-editor/src/components/child-layout-control/index.js. It seems the layout styles issue may not be directly related, but I will investigate further. Additionally, I’m opening a draft PR to test the spacer block fix.

I found a better fix for the spacer block height/width issue.

The root cause was in packages/components/src/unit-control/index.tsx, where the unit was dropped when the value was empty.

Before

onChangeProp?.( '', changeProps );

After

onChangeProp?.( `0${unit}`, changeProps );

This change ensures the unit is preserved, preventing it from resetting when the value is empty.

cc: @mikachan @hanneslsm