Spacer Block: Add custom unit support for height control

[iamtakashi]

Just like the Cover block, it'd be nice to add custom unit support for Spacer height control.

Especially, the viewport relative units would be useful to accommodate different viewport sizes. In addition to vw and vh, it would be really nice if it also supports vmin and vmax as well.

[mtias]

@ItsJonQ looks like we could just apply the work from the Cover block height resize here.

[ItsJonQ]

@iamtakashi Oo! We can do that 💪

Also, we can add vmin and vmax units :)

[iamtakashi]

Yay, thank you in advance!

[ItsJonQ]

Just a heads up, updates from this PR will make adding unit support for spacer (much) easier 👍

#23006

[ItsJonQ]

Fun update! While tinkering with Spacer... I felt like there should be some visual feedback on drag changes.

After a couple of experiments, I have something that looks like this:

It's a tooltip that floats on top of your mouse cursor :)
This interaction was inspired by Sketch

Bonus: This visual feedback component works independently of the ResizableBox component. In theory, it can be added to anything 😊 - instant resize visual feedback!

[ItsJonQ]

Oh boy! cc'ing @iamtakashi. How's this? :)
I have to flip the unit back to px the moment the user drags the Spacer height.

Note: I had to do some funky stuff with the re-resizable library for it to support em and rem units.

Double note: Noticing the inconsistencies between the Spacer resize experience and the Cover resize experience (which is a bit hairy, code wise). Would be nice to consolidate those.

[iamtakashi]

@ItsJonQ Sorry for missing the ping. (I read the last update in the email notification that came before the ping was added :) )

I have to flip the unit back to px the moment the user drags the Spacer height.

I've noticed the issue (the persistent unit with resizing handle) in Cover block the other day. Flipping back to px unit is definitely progress as at least it's accurate. Ideally, the user should be able to change the height using the handle without worrying the unit, but I was wondering if that can be tackled in a separate enhancement issue so that we can push this out. What do you think?

[ItsJonQ]

Flipping back to px unit is definitely progress as at least it's accurate

I don't think there's a way to accurately accommodate non px units when dragging with the handle 🤔 .

For example, if the unit is set to vh. Let's say the current value is 20vh.

Dragging the handle down 1px, would bump it to 21vh, causing the height to jump considerably more than what was dragged.

If that experience is okay, then that may be something we could try.

The other tricky thing is rem and em. These values will almost certainly be accurate when rendering on the front-end. This is based purely on how the WP-Admin + Theme styles are rendered. Unfortunately, I don't think there's a way to predictably calculate this (unless we do some really really funky stuff)

[iamtakashi]

Makes sense. I don't want that to hold this up, and flipping back to px unit when we use the handle makes sense to me 👍

[mtias]

Is there anything pending here @iamtakashi @ItsJonQ? :)

[kjellr]

Any chance we can pick this back up? I think this would be helpful for block patterns in Twenty Twenty-One (WordPress/twentytwentyone#370)

[jasmussen]

Just ran into needing this one. It would really benefit responsive design as well.

[kjellr]

Does someone have a little time to pick this up again? Now that we use custom units for just about all other spacing tools, it seems really weird to disallow them for the spacer block.

[mghenciu]

++ for this.

Would be really helpful, especially in a Mobile context. Because most of the time a spacer used for Desktop view, is too large for the Mobile view.
For example a Page Heading with 150px Spacer before & after, would look good on Desktop

but not on Mobile:

[apeatling]

Fixed in #36186