Button (singular) block can't be centered

[cecilearkay]

Unlike the buttons (plural) block, the button block can't be centered. It can be aligned to the right, but will remain on the left if you choose to center it. It only happens on WordPress.com, whether the site is Simple or Atomic. It doesn't happen on .org as far as I could see.

Steps to reproduce

Although it can't be added by looking it up in the list of available blocks, the button block can be added manually with the code editor or by choosing a layout,

1. Create a new page and choose a layout, like one of the About layouts, which comes with the single button block,
2. Center the button using the alignment option,
3. Preview/publish and notice it's still aligned to the left.

What I expected

The button to be centered.

What happened instead

The button remains on the left.

Screenshot / Video

Workaround

Add the following CSS to My Site > Design > Customize > Additional CSS:

.wp-block-button.btn-centered {
	display: block;
	text-align: center;
}

Add the following class to the Advanced module of the button: btn-centered

[xpurichan]

Getting lots of reports about this in HC and ZD which we can see in Slack. I got another report in 21276293-hc.

Another solution is to convert the "button" block to the new "buttons" block, center-align works there.

[khristiansnyder]

Had this in 12287038-hc

• Gutenberg: 8.1.0-wpcom
• CoBlocks: 1.23.0
• wpcom-FSE: 110334318

Used this CSS to center user's blocks as they wanted all blocks on their site centered:

.wp-block-button {
    text-align: center;
}

[davoraltman]

Another case in 21821402-hc

[davipontesblog]

This block (Button) has been deprecated in favor of the new block "Buttons", for a few months now, but some sites still have the old block and it's causing this issue. @lsl mentioned this is being tracked here in the Gutenberg repo: WordPress/gutenberg#21509

Solution: Convert the block to "Buttons", and alignment works.

[zdenys]

Just wanted to link the conversation where I first reported the above issue too p1591724116387100-slack-CRNF6A9DX

[LauraSWP]

I am having the same issue with 2 users.

And this one is using the Buttons block, which should work but it doesn't:

[zdenys]

@LauraSWP, for the second case:

And this one is using the Buttons block, which should work but it doesn't:

Make sure to do this:

To change a button’s alignment, select the entire Buttons block first and then align left, center, or right from the toolbar.

as mentioned and illustrated in https://wordpress.com/support/wordpress-editor/blocks/buttons-block/#aligning-buttons

[lsl]

And this one is using the Buttons block, which should work but it doesn't:

This looks like it has nested buttons blocks, iirc the inner buttons should not have an alignment option.

Are you able to get a hold of the raw gutenberg html/markup from the code editor?

[TeniCola]

Hi all! My team encountered this same issue with centering the Button block during our team's virtual meetup, where we were using Gutenberg for our DIFM project. Context in team master thread: p6knfs-29V-p2

The CSS solution is good to know in the future, as well as converting the Button block to Buttons instead, so we'll be mindful of this moving forward. Just adding a note here that the issue came up for some new sites we had created during our team project.

[lsl]

Just adding a note here that the issue came up for some new sites we had created during our team project.

@ramonjd maybe headstart content needs updating?

[ramonjd]

Just adding a note here that the issue came up for some new sites we had created during our team project.

Thanks for the ping.

@TeniCola Were those sites created via wordpress.com/start or wordpress.com/new?

If wordpress.com/new, which "design" did you select?

If it's something to do with the initial code we use to create pages in onboarding it's definitely something we can look into further. 👍

[liviopv]

@ramonjd I made some testings and found out that the old version of the Button Block is present on some themes starter content, like Exford. While it still keeps the alignment while Exform is active, the alignment breaks as soon as the user switches themes.

Reported the issue in Exford here: Automattic/themes#2888

[arunsathiya]

I see that there are two things here.

Old Button block

One way to find this block is by activating Exford and editing the demo homepage that it generates. It shows the old Button block throughout that page. It's not clear if we have plans to change that to the newer Buttons block, and if we would do that for all affected sites. I asked about it here.

In the meantime, I see that the old Button block's alignment works fine now. This is how things look when left-aligned:

And when centered:

Newer Buttons block

I can see that the center alignment option is available only on the inner Button block. The parent block does not. The inner block's setting works fine:

Conclusion

I'll close this report for now, as it has been nearly two years and the Gutenberg and themes experience has evolved a lot since. The newer Buttons block should be the only available option these days.

If affected customers reach out, we should help them move to the newer Buttons block.