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:

gutenberg/packages/block-library/src/buttons/style.scss

Lines 13 to 15 in cbef072

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

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.

[florianbrinkmann]

@jasmussen I think this is an issue again, because of the modifications in a03ea51. With that, the styling for .wp-block-button.aligncenter that is not inside a .wp-block-buttons was removed again.

[cryptocurls]

@jasmussen Also experiencing this issue now - all buttons on Twenty Twenty child theme that were centered are now not on the frontend

[jasmussen]

@florianbrinkmann @mvbdigital I'm having a bit of a hard time reproducing:

Can you provide me with some problematic example markup, plus theme and plugin information? I'd be happy to take a look again.

[florianbrinkmann]

@jasmussen sure, here is an example:

<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="#">Not centered</a></div>

This is from a site with a custom theme, created before the buttons block was introduced. And so it has the old button markup in various places (without the wrapper wp-block-buttons).

[jasmussen]

Thanks for the example. I did manage to reproduce, however it's an issue with both new and old button markup, as far as I can tell:

Here's a small debugging session:

If the issue is what I think it is, then it's a recent change that introduces a higher specificity default left/right margin on blocks. There are more details in this PR where I tried to fix it, however I'm closing that one in favor of #30375 which, if I'm not mistaken, should fix the issue for both new and old buttons.

If you are able to test that PR, perhaps using Gutenberg Run (here: http://gutenberg.run/30375) — and comment with your findings on that PR, it would help us land it. Thank you!

[florianbrinkmann]

Hi @jasmussen, thanks for looking into this. Maybe my description was misleading: the issue is the frontend CSS. When I paste the button markup in a HTML block in the gutenberg.run instance, it is centered in the frontend, but only because Twenty Twenty-One comes with a text-align: center for the .aligncenter class. After removing that, the button is left aligned again. The Gutenberg styles had a .wp-block-button.aligncenter { text-align: center; } rule until a03ea51, where the following change breaks it:

a03ea51#diff-ba5e352fd98cd49d679e248a86f7d04077ed547c26ca9482d002d015cf93c9b4L34

After that, it became a .wp-block-buttons.aligncenter rule, which, of course, does not work for buttons inserted before the buttons block was introduced.

[jasmussen]

Thanks for the clarification @florianbrinkmann. Can you try this one and see if that addresses your issue? #30525

That would be http://gutenberg.run/30525.

If yes, then we need to test that PR against all sorts of combinations of the new Buttons block, to see that the code doesn't regress anything there. It shouldn't as far as I can imagine, but important to still test.

[florianbrinkmann]

Yes, that seems to fix it @jasmussen!

[jasmussen]

Cool, thanks for testing. I'll request some reviews on that PR!