Cover block units get reverted to px if height is modified with ResizableBox

[richtabor]

Description

Whenever a custom unit is set in the Cover block, it is reverted back to px whenever the height is modified with ResizableBox.

I'd expect to be able to set a height of 20vw for example, but still use the ResizableBox handle to drag it taller, or smaller, and maintain the vw units. The same happens for any unit set that isn't px.

Step-by-step reproduction instructions

1. Add the cover block to a page
2. Change the units to anything other than px
3. Use the ResizableBox handle to change the height of the Cover block
4. See the units you've selected in step 2 are now px

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/1813435/155601628-c619475b-e2a4-42f6-9420-2f6135525a97.mp4

Environment info

WP 5.9.1, Gutenberg 12.6.1

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

[akasunil]

Gutenberg uses re-resizable component here, which support only PX unit for element resize. so when you resize it with editor, Gutenberg change size unit to PX.

[richtabor]

Gutenberg uses re-resizable component here, which support only PX unit for element resize.

Can it only support PX?

[cbirdsong]

I imagine the issue is that Javascript natively only understands pixel sizing when querying an element? I've seen attempts at creating a function that will convert pixels to rems and ems, but I haven't used them extensively and I imagine the em one would be very convoluted.

It is very irritating when the editor reverts to pixels, though. I wish I could set it to basically always default to rems.

[Thelmachido]

I can still reproduce this, the editor reverts back to PX if you use the ResizableBox handle. I am going to remove the needs testing & stale label.