Skip to content

Add a block support for dimension settings #26368

@stacimc

Description

@stacimc

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.[Block] ButtonsAffects the Buttons Block[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] New APINew API to be used by plugin developers or package users.

    Type

    No type

    Projects

    Status

    ⏱ Not Started

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions