Button Block: Allow custom width

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.

https://wordpress.org/gutenberg/

Other

10.56k stars 4.22k forks source link

Button Block: Allow custom width #62247

Open bhubbard opened 6 months ago

bhubbard commented 6 months ago

What problem does this address?

Currently with the button block, I can choose several popular widths, 25%, 50%, 75%, 100%. However I want to create a pattern with 3 buttons together in a row, and need to provide a more specific pattern. Example of the pattern:

Screenshot 2024-06-03 at 9 14 45 AM

What is your proposed solution?

Keep the popular widths, but have an advanced option to provide a specifics widths, px, %, rem, etc.

prasadkarmalkar commented 5 months ago

I would like to work on this issue, I was thinking of using the FontSizePicker for choosing the size of button, So that we can use the custom widths like px, % and rem. In current implementation the size is added via CSS class that are by default, So to make it dynamic I was thinking of removing the default CSS classes given and use direct style attribute inside the block for custom sizes. Here are some of the screenshots

mirka commented 3 months ago

When I look at all the blocks that had this "25%, 50%, 75%, 100%" control, they have now mostly been standardized to use the DimensionTool (see for example #52223). Can we use that here, too?