Add width selector for button block #25999

stacimc · 2020-10-09T20:58:42Z

Description

Adds a width selector to the sidebar for the Button block, allowing the user to set their button to 25%, 50%, 75%, or 100% of the parent container.

By default, no percentage width is selected and the button width is determined as normal by the size of its content.

Notes

This is an alternative approach to #26045, which implements a width selector on the Button block using a new block support._ This is related to issue #26368.

How has this been tested?

Manually with the button block, using left, right, and center alignments.

Add a Buttons block to a post with one or more Buttons
Select a Button
You should see a Width Settings section under the Inspector Controls, with options for 25, 50, 75, 100%.
Toggle a width option and verify that the correct inline style is applied to the block.
Save the post and view on the frontend.
Verify that the button is resized correctly in the saved post.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

glendaviesnz · 2020-10-11T22:43:15Z

This tested well for me. As mentioned in discussions when using right align things can end up slightly odd, but I think this is because of the use of float:right. When adding width settings to a button block in another project we removed the default right float. @apeatling, I am thinking that it wouldn't be as easy to do that here are existing content may be relying on the existing float:right behaviour?

aaronrobertshaw · 2020-10-12T03:39:39Z

Code looks good ✨

Apart from the align left/right issues, this tests well for me as well. I do wonder though if this is another opportunity for adding block support for custom widths so other blocks can opt-in and leverage this? This would also allow width options to be configured via themes.

Regarding the alignment issues, I'd vote for them to be addressed in a separate PR. There might be a few things we could do to smooth some of the more common rough edges created by the floated block losing the parent width to calculate the percentage widths from.

stacimc · 2020-10-12T17:25:30Z

As mentioned in discussions when using right align things can end up slightly odd, but I think this is because of the use of float:right.

This is something I had a lot of difficulty with -- I have a version which I can push up for testing where right-aligning the Buttons block causes the individual Buttons to line up flush to the right side of the container when the post is saved:

This seems better to me because it is more accurate to what you see in the editor and it's what I would assume should happen when you right-align the parent. The CSS for that removes the float:right like you said and adds display: flex to the Buttons when saved.

here are existing content may be relying on the existing float:right behaviour

I think that's accurate. The reason I had trouble with this is because I couldn't figure out how to best emulate the right-align behavior in production, which does not necessarily keep the buttons flush to the right side of the container. For example, this happens on production when I right-align a group of buttons within a column (column highlighted in blue, sorry it's hard to see):

apeatling · 2020-10-26T23:51:54Z

@mcsf Pinging you to see if this PR looks better since it's adding width specific to the button block. 👍

talldan · 2020-10-27T08:54:59Z

There's another PR that changes how alignment works on the buttons block, so it'd probably worth testing against that as well - #23168

mcsf

Looks good overall (I left some questions on the attribute schema to make sure we've given this a bit of thought), but I'd have someone else test and review the style changes.

packages/block-library/src/button/edit.js

mcsf · 2020-10-27T12:01:19Z

packages/block-library/src/button/block.json

@@ -52,6 +52,9 @@
 		},
 		"gradient": {
 			"type": "string"
+		},
+		"width": {
+			"type": "number"


Thinking about possible futures for this block, is this the best data representation? How would we express custom width values without introducing compatibility issues with the current schema? That is, this new width attribute is not any number but actually a percentage represented as 0 <= n <= 100. Would it be better if it were a real number x 0 <= x <= 1 to distinguish from full pixel values like width: 200? Would it be better if termed widthPercentage?

All of these are open questions — I don't have a formed opinion on this.

Another possibility here would be to add an additional widthUnit attribute if we decide to introduce custom width as pixel values. The search block takes that approach.

This is the approach the search and cover blocks take, so this should be futureproof for adding a unit in the future.

stacimc · 2020-10-27T20:30:49Z

Thanks for the heads up about PR #23168, @talldan. I pushed up a small change to allow for the larger percentage selections in the new full-width Buttons container.

Initial commit adding a width option for the Button block with options at 25, 50, 75, 100% widths. By default none are applied and the button is sized by its content.

A width selection can now be toggled off by clicking the already selected option.

Co-authored-by: Miguel Fonseca <[email protected]>

PR WordPress#23168 overhauls alignment controls on the Buttons container and allows for full width. For a Button inside a very large container, in order to be set correctly to 100% it must be able to exceed any configured max-width. This commit does not remove the max-width for any button that does NOT have a custom width percentage selected. This is so that default buttons continue to be sized as they normally would.

apeatling

This looks good and tests well. I think this is a great start to width support that could be extended in the future to support custom widths and different units.

Fixes a bug where the inner button was not being set correctly to 100% width on the frontend, due to the missing classname.`

glendaviesnz

This tested well for me.

apeatling · 2020-10-30T17:16:16Z

@mcsf Would you be able to give this one a sign off?

apeatling · 2020-11-03T19:12:45Z

Going to move ahead with this once since it has approval already. If we need to make further changes the we can open follow up PRs.

github-actions · 2020-11-03T19:15:23Z

Congratulations on your first merged pull request, @stacimc! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

kebbet · 2021-02-17T08:55:18Z

Is there a way to disable this feature?

stacimc force-pushed the add/width-selector-for-button-block branch from b3853a1 to 9ffdfd5 Compare October 9, 2020 21:18

stacimc mentioned this pull request Oct 21, 2020

Add a block support for dimension settings #26368

Open

stacimc force-pushed the add/width-selector-for-button-block branch from 1fd11f6 to 5e57245 Compare October 23, 2020 19:31

stacimc marked this pull request as ready for review October 23, 2020 21:05

stacimc requested review from ajitbohra, Soean and talldan as code owners October 23, 2020 21:05

stacimc mentioned this pull request Oct 23, 2020

Add initial block support for width #26045

Closed

7 tasks

mcsf reviewed Oct 27, 2020

View reviewed changes

Staci Cooper and others added 7 commits October 28, 2020 10:07

Add sidebar width selector for Button block

f2291e6

Initial commit adding a width option for the Button block with options at 25, 50, 75, 100% widths. By default none are applied and the button is sized by its content.

Persist width changes

7812b54

Apply styling through class name rather than inline

891caac

Clean up CSS

0920456

Allow toggling a custom width off

28f3238

A width selection can now be toggled off by clicking the already selected option.

Update InspectorControls to use sentence case

99e243c

Co-authored-by: Miguel Fonseca <[email protected]>

apeatling requested review from apeatling and glendaviesnz October 29, 2020 17:06

apeatling approved these changes Oct 29, 2020

View reviewed changes

Apply has-custom-width class on frontend

eb894de

Fixes a bug where the inner button was not being set correctly to 100% width on the frontend, due to the missing classname.`

stacimc force-pushed the add/width-selector-for-button-block branch from e7100b2 to eb894de Compare October 29, 2020 21:34

glendaviesnz approved these changes Oct 29, 2020

View reviewed changes

apeatling merged commit fb1cc0e into WordPress:master Nov 3, 2020

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 3, 2020

github-actions bot added this to the Gutenberg 9.4 milestone Nov 3, 2020

iamtakashi mentioned this pull request Nov 4, 2020

Buttons Block: Horizontal margin issue #26702

Closed

stacimc mentioned this pull request Nov 6, 2020

Include button margins in width calculations #26781

Merged

10 tasks

apeatling assigned stacimc Nov 9, 2020

jasmussen mentioned this pull request Jan 26, 2021

Try: Fix buttons faux space-between. #28485

Merged

zzap mentioned this pull request Jan 27, 2022

[HelpHub] Buttons Block WordPress/Documentation-Issue-Tracker#122

Closed

9 tasks

roseg43 mentioned this pull request Aug 16, 2022

Button: Add theme.json support for toggling Width settings panel #42079

Open

vic322 mentioned this pull request Sep 20, 2023

Cocoonボタンの設定に幅を追加 xserver-inc/cocoon#141

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add width selector for button block #25999

Add width selector for button block #25999

stacimc commented Oct 9, 2020 •

edited by apeatling

Loading

glendaviesnz commented Oct 11, 2020 •

edited

Loading

aaronrobertshaw commented Oct 12, 2020

stacimc commented Oct 12, 2020

apeatling commented Oct 26, 2020

talldan commented Oct 27, 2020

mcsf left a comment

mcsf Oct 27, 2020

stacimc Oct 27, 2020

apeatling Oct 29, 2020 •

edited

Loading

stacimc commented Oct 27, 2020

apeatling left a comment

glendaviesnz left a comment

apeatling commented Oct 30, 2020

apeatling commented Nov 3, 2020

github-actions bot commented Nov 3, 2020

kebbet commented Feb 17, 2021

Add width selector for button block #25999

Add width selector for button block #25999

Conversation

stacimc commented Oct 9, 2020 • edited by apeatling Loading

Description

Notes

How has this been tested?

Screenshots

Types of changes

Checklist:

glendaviesnz commented Oct 11, 2020 • edited Loading

aaronrobertshaw commented Oct 12, 2020

stacimc commented Oct 12, 2020

apeatling commented Oct 26, 2020

talldan commented Oct 27, 2020

mcsf left a comment

Choose a reason for hiding this comment

mcsf Oct 27, 2020

Choose a reason for hiding this comment

stacimc Oct 27, 2020

Choose a reason for hiding this comment

apeatling Oct 29, 2020 • edited Loading

Choose a reason for hiding this comment

stacimc commented Oct 27, 2020

apeatling left a comment

Choose a reason for hiding this comment

glendaviesnz left a comment

Choose a reason for hiding this comment

apeatling commented Oct 30, 2020

apeatling commented Nov 3, 2020

github-actions bot commented Nov 3, 2020

kebbet commented Feb 17, 2021

stacimc commented Oct 9, 2020 •

edited by apeatling

Loading

glendaviesnz commented Oct 11, 2020 •

edited

Loading

apeatling Oct 29, 2020 •

edited

Loading