Gutenberg: Left/Right aligned buttons do not align with text due to margin

Created on 31 Mar 2020  Â·  3Comments  Â·  Source: WordPress/gutenberg

Describe the bug
Margin is applied to the buttons inside the buttons block here: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/buttons/style.scss#L3

A left aligned Buttons block will not align with text due to the 4px margin.

Screen Shot 2020-03-31 at 10 19 53 AM

Related to https://github.com/WordPress/gutenberg/issues/21272

To reproduce
Steps to reproduce the behavior:

  1. Add a Paragraph block then add Buttons block below it.
  2. Set the Buttons block to be left aligned and configure the button.
  3. View the button on the front end.
  4. Note the 4px margin shifts the button inward so it isn't aligned with the text.

WP 5.4 RC4
WP 5.3.2 / Gutenberg 7.8.1

Expected behavior
Button will be aligned with the text when left alignment is selected.

Screenshots
If applicable, add screenshots to help explain your problem.
Screen Shot 2020-03-31 at 10 19 53 AM

Screen Shot 2020-03-31 at 11 10 50 AM

Good First Issue [Block] Buttons [Status] In Progress [Type] Bug

Most helpful comment

I suspect the margin is there so that multiple buttons …

image

… works neatly.

Might need to update the margin on the first button with a first of type selector?

All 3 comments

I suspect the margin is there so that multiple buttons …

image

… works neatly.

Might need to update the margin on the first button with a first of type selector?

Might need to update the margin on the first button with a first of type selector?

I considered that. However, since it is possible that buttons can wrap to the next line if you ad more than one, the buttons wouldn't align.

The buttons are inline-block so there's naturally a narrow space between them. It might be enough to add only a bottom margin to ensure buttons don't touch when they wrap to the next line.

I feel like spacing between buttons should be block settings, as opposed hard-coded into a CSS stylesheet. The margin between buttons is a design choice, and so I feel like that belongs with block settings.

Was this page helpful?
0 / 5 - 0 ratings