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: Update UI to support editing complex height & width #37303

Open
Tracked by #33447
stacimc opened this issue Dec 11, 2021 · 1 comment
Open
Tracked by #33447

Spacer Block: Update UI to support editing complex height & width #37303

stacimc opened this issue Dec 11, 2021 · 1 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 Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.

Comments

@stacimc
Copy link
Contributor

stacimc commented Dec 11, 2021

What problem does this address?

#36186 adds custom units to the Spacer block. Because the height and width attributes are now strings, it is also possible to set complex values for these attributes, for example:

<!-- wp:spacer {"height":"max(1.25rem, 5vw)"} -->
<div style="height:max(1.25rem, 5vw)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

This is only possible in the block editor by editing the values in the Code Editor, as the UI is a simple UnitControl that doesn't support complex values. If a block has a complex val for height for example, the input appears empty.
Screen Shot 2021-12-10 at 4 16 38 PM

It would be useful to have a way to see the value and edit it through the UI.

What is your proposed solution?

I'd love to get some design feedback on this. The simplest example would be to update the UnitControl with an edit toggle that can open a text field for entering custom values.

@stacimc stacimc added Needs Design Needs design efforts. [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 labels Dec 11, 2021
@stacimc
Copy link
Contributor Author

stacimc commented Dec 13, 2021

Linking #35558 which discusses the design for supporting custom values in form fields. I'll leave this open to track the issue for the Spacer, since its height/width fields are implemented ad-hoc and not coming from a shared block support.

@mtias mtias mentioned this issue Aug 2, 2023
65 tasks
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 18, 2023
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 Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

2 participants