Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spacer Block: Add custom unit support for height control #22956

Closed
iamtakashi opened this issue Jun 5, 2020 · 15 comments
Closed

Spacer Block: Add custom unit support for height control #22956

iamtakashi opened this issue Jun 5, 2020 · 15 comments
Assignees
Labels
[Block] Spacer Affects the Spacer Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.

Comments

@iamtakashi
Copy link

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.

Screenshot 2020-06-06 at 00 08 45

@ocean90 ocean90 added [Block] Spacer Affects the Spacer Block [Type] Enhancement A suggestion for improvement. labels Jun 6, 2020
@mtias mtias added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Jun 9, 2020
@mtias
Copy link
Member

mtias commented Jun 9, 2020

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

@ItsJonQ
Copy link

ItsJonQ commented Jun 9, 2020

@iamtakashi Oo! We can do that 💪

Also, we can add vmin and vmax units :)

@iamtakashi
Copy link
Author

Yay, thank you in advance!

@ItsJonQ
Copy link

ItsJonQ commented Jun 10, 2020

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

#23006

@ItsJonQ
Copy link

ItsJonQ commented Jun 10, 2020

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:

Screen Capture on 2020-06-10 at 13-27-01

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
Copy link

ItsJonQ commented Jul 8, 2020

spacer-units

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
Copy link
Author

@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
Copy link

ItsJonQ commented Jul 27, 2020

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
Copy link
Author

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
Copy link
Member

mtias commented Aug 26, 2020

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

@kjellr
Copy link
Contributor

kjellr commented Oct 9, 2020

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
Copy link
Contributor

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

@kjellr
Copy link
Contributor

kjellr commented Oct 5, 2021

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
Copy link

mghenciu commented Nov 2, 2021

++ 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
image
but not on Mobile:
image

@apeatling
Copy link
Contributor

Fixed in #36186

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Spacer Affects the Spacer Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

No branches or pull requests

9 participants