Deleting value of dimensions resets to px

[annezazu]

Description

This came up as part of the FSE Outreach Program's All Things Media exploration:

When adjusting certain dimensions, say you set the variable as ’em’ or ‘rem’ or ‘vh’ or ‘vw’. Deleting/ removing the value associated with that variable, it automatically changes to ‘px’. For example: ‘Min height of cover’, ‘Border radius’ for image block:

Want to note that I found this to be similar to this issue: #37856

Step-by-step reproduction instructions

1. Add a cover block.
2. Open the block settings.
3. Under ‘Min height of cover’ change the dimensions to ’em’ or ‘rem’ or ‘vh’ or ‘vw’ and add in a number.
4. Delete the number and notice it reverts back to px.

Screenshots, screen recording, code snippet

revert.mov

Environment info

• WordPress 5.9
• Gutenberg 12.6
• Chrome
• MacOS

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

[ntsekouras]

I can reproduce and by looking the code of the cover block... 🤷 So many things going on there with a lot of complexity. I'll try to see if I can find the problem and also simplify things a bit..

[richtabor]

Came here to report this as well 🎯

[annezazu]

@andrewserong in case you might have some insights based on this recent effort #39109

[andrewserong]

@annezazu thanks for the ping, I think this one is now resolved as of #39145?

[andrewserong]

I'll just ping @ntsekouras since that PR says that it's part of resolving this issue, so there might have been intended follow-ups before we close out this one?

[annezazu]

Wow! Totally missed that somehow 🙈 . This is what GitHub rabbit holes do to me. Will see if more follow up is needed - neat to see so much work happening to improve all of these tools either way.

[ntsekouras]

I'll just ping @ntsekouras since that PR says that it's part of resolving this issue, so there might have been intended follow-ups before we close out this one?

Yes, my fix was about min height of Cover. block, but this issue's description also mentions this:

For example: ‘Min height of cover’, ‘Border radius’ for image block:

It seems that at least for border radius control this is still a thing..

Screen.Recording.2022-03-08.at.4.59.40.PM.mov

[andrewserong]

Just adding the UI Components label, as it might be something for us to look at in the UnitControl component directly to see if there's a way to solve it across all instances of the component 🤔 (not sure if it's possible but just an idea).