Gutenberg: Legacy center-aligned buttons are no longer center aligned on the front end.

[kjellr]

Describe the bug

Individual buttons created before the "Buttons" block existed are no longer center-aligned by default in the front end.

Gutenberg loads front-end code to ensure that center-aligned buttons appear centered within their container:

https://github.com/WordPress/gutenberg/blob/cbef07223613a6f1d59f4035dbfc6dd1598129ba/packages/block-library/src/buttons/style.scss#L13-L15

It looks like Gutenberg does _not_ provide this code for legacy button blocks however, which means they do not properly center-align themselves on the front end.

To reproduce
Steps to reproduce the behavior:

Using (just about) any theme:

1. Use the old button block, center align it. (here's the sample markup I used in the screenshots if that's helpful)
2. View on the front end.
3. See that the button is not center-aligned.
   

   Screenshots

Editor:

_Using the Gutenberg Starter Theme_

_Using Twenty Twenty_

Front end:

_Using the Gutenberg Starter Theme_

_Using Twenty Twenty_

Editor version:

• WordPress v5.4.1
• Gutenberg v8.3.0

[youknowriad]

Is this a regression? I feel alignments were always left to the theme?

[kjellr]

I _think_ so? Maybe @jasmussen can gut check that too.

It looked like buttons that used to be center-aligned all of a sudden stopped being center aligned, even when the theme had not been updated.

[jasmussen]

Question before I dive deeper: is the off-centering in the editor only when the block is selected? Because then it's the same issue with the appender taking up space and therefore changing the centering.

And other question: it looks like the frontend styles were broken before, but fixed now, am I interpreting that correctly?

[kjellr]

Question before I dive deeper: is the off-centering in the editor only when the block is selected? Because then it's the same issue with the appender taking up space and therefore changing the centering.

No, this is different. The editor looks great, it's just the front end that's the problem.

And other question: it looks like the frontend styles were broken before, but fixed now, am I interpreting that correctly?

The opposite actually. Center-aligned buttons using the old markup worked before, but now appear to be uncentered in the front end.

I just dug into this a little more thoroughly, and I'm more sure that it's a regression. You can test this pretty easily by making a new post that includes the old button markup:

<!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://balasanademo.wordpress.com/classes/">Center-Aligned Button</a></div>
<!-- /wp:button -->

With the Gutenberg plugin active, the button will not be center-aligned on the front end using most themes. Here's Twenty Twenty for example:

When you deactivate the Gutenberg plugin, the button will center itself:

The difference is that when the plugin is inactive, a .wp-block-button.aligncenter { text-align: center; } rule is provided in /block-library/style.css.

It looks like this style style stopped working right when #21642 was merged, and the .wp-button selector was changed to .wp-block-button__link (thus taking the .aligncenter rule along with it).

[jasmussen]

Yep. I see it. Sorry, you meant the old markup. Apologies.

We output this for the new Buttons (plural) block:

.wp-block-buttons.aligncenter {
    text-align: center;
}

We output nothing at all for the button. Let me push a fix.

[jasmussen]

Fixed in #23381.