-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Comments
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. 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. |
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. |
Additional feedback from #26045, which implemented the block support:
Direct link: #26045 (comment) |
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. |
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.
This can be iterated on to include px or custom percentage support similar to the Search block's width selector:
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.
The text was updated successfully, but these errors were encountered: