Buttons alignments break when updating to recent version

[joshm33333]

If you made a site using a version of Gutenberg before the buttons group was added, for a while it was ok. Gutenberg has a policy of not forcefully updating any blocks until you manually approve it. However, buttons no longer wait for approval.

I have buttons, that used the old html of <div class='wp-block-button'><a class='wp-block-button__link'></a></div> and in recent updates the containing div was removed and the classes combined on the 'a' element. I get what's happening, you expect me to use the 'buttons' group in place of the containing div.

The problem is that the buttons block is not automatically inserted, but the button block is forcefully modified to require it. The biggest issue is alignment. Every single button on every site that used to be center aligned is now left aligned. I have thousands of buttons, and I'm supposed to go back and manually fix them all? Which I would do, no problem, except now I'm starting to think why bother when Gutenberg might just screw me again later. That's why I'm reporting this as a bug, because if this is the policy of Gutenberg updates, then I don't think I'm going to keep using it.

To reproduce
Make a button in an old version of Gutenberg, center align, then update to the latest version and see it become left aligned on the front end

Expected behavior
Don't make changes to the front end until I review each instance of the issue

Screenshots

• WordPress: 5.4
• Gutenberg: 7.9.1
• OS: Windows 10
• Browser: Edge BETA

[joshm33333]

I'm using a workaround
a.wp-button-link{ display: table; }
for some reason display table on an A tag make the element tag the size of its content and center in its parent

obviously this is unreliable for browser support, but its better than fixing everything by hand for the time being

[talldan]

@joshm33333, In my testing in a couple of themes (Gutenberg Starter Theme, Twenty Twenty), it does indeed look like alignments aren't working. This wouldn't have been done on purpose, so apologies if this has caused issues.

My steps to reproduce:

1. Add an aligned button block by adding the following to the Code Editor:

<!-- wp:button {"align":"center"} -->
<a class="wp-block-button aligncenter wp-block-button__link">test</a>
<!-- /wp:button -->

2. Preview the post

In my case, this is what I see in the post:

In the starter theme I get a slightly different result, the button is full-width in the post.

[kjellr]

Is this a duplicate of #21685?

[talldan]

Looks like it, lets close this one in favour of that.