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

Add a block support for dimension settings #26368

Open
Tracked by #33447
stacimc opened this issue Oct 21, 2020 · 4 comments
Open
Tracked by #33447

Add a block support for dimension settings #26368

stacimc opened this issue Oct 21, 2020 · 4 comments
Labels
[Block] Buttons Affects the Buttons Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Design Feedback Needs general design feedback. [Type] New API New API to be used by plugin developers or package users.

Comments

@stacimc
Copy link
Contributor

stacimc commented Oct 21, 2020

Is your feature request related to a problem? Please describe.
I'd like a way to customize the width of the Button block; for example, a way to set the button to 100% the width of its parent container. PR #25999 adds the selector directly to the block, but this could be a good opportunity to create a block support that can be leveraged by other blocks.

Describe the solution you'd like
My suggestion is to add a new block support for dimensions settings that can be extended to include height options as well as width.

PR #26045 was an initial pass at implementing this, based on a simpified version of the Search block's settings support. It provides four default width presets at 25%, 50%, 75%, and 100% and uses CSS variables to allow themes to configure their own alternative width options.

Screen Shot 2020-10-21 at 10 46 29 AM

This can be iterated on to include px or custom percentage support similar to the Search block's width selector:

Screen Shot 2020-10-21 at 10 53 22 AM

Describe alternatives you've considered

An alternative suggestion for the block support's UI from feedback on #26045 is to more closely mirror the width selection from the Columns block, which has an input for custom width as a percentage and does not have any presets.

Screen Shot 2020-10-21 at 10 49 39 AM

@talldan talldan added [Block] Buttons Affects the Buttons Block [Type] New API New API to be used by plugin developers or package users. Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement. and removed [Type] New API New API to be used by plugin developers or package users. [Type] Enhancement A suggestion for improvement. labels Oct 22, 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 Oct 22, 2020
@paaljoachim
Copy link
Contributor

Here is the columns setting mentioned. A direct link to my comment in the PR: #26045 (comment)

Even though it is used in the Search block (which needs improving). This feels like a new UI pattern.
Which means it will need some design discussion. @ItsJonQ @jasmussen

An example of this setting could be something like this mockup that uses a drop down to select measuring unit such as %, Px etc. Or one could click the 25%, 50%, 75% or 100%. I believe these would need to be toggle boxes to activate/deactivate. Selecting example pixels in the drop down should also change the percentage boxes to reflect the change in the drop down.

Width-control

@stacimc
Copy link
Contributor Author

stacimc commented Oct 23, 2020

There is feedback that adding width as a block support may be premature: #26045 (comment), and that it is preferable to add width directly to the Button block for now (and create a block support when more use cases become apparent).

PR #25999 implements the width selector ad-hoc on the Button block using the same presets. These are toggle boxes allowing activation/deactivation.

I like the suggestion of adding the drop down in addition to the toggle boxes.

@stacimc
Copy link
Contributor Author

stacimc commented Oct 26, 2020

Additional feedback from #26045, which implemented the block support:

the typography tools in the examples above have a better defined shape (the typography object). Width and other dimension controls don't yet, and it's not clear how it might be apply to different blocks, which makes it a bit trickier. We should be using the same components for sure but we can wait a bit until theme.json gives us proper structure to absorb the support. It's fine to add this one just to buttons initially as we collect more use cases.

Direct link: #26045 (comment)

@jasmussen
Copy link
Contributor

I wonder if there's an opportunity here to leverage some of the flex behaviors suggested in #44467 as a replacement for this particular width control. The shortcuts to 25/50/75 wouldn't be as useful as the flex behaviors, and with a fixed width as an option, and a unit selector in the dropdown, you'd still be able to set a percentage width.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Design Feedback Needs general design feedback. [Type] New API New API to be used by plugin developers or package users.
Projects
Status: Not Started
Development

No branches or pull requests

5 participants