Button Block: Backwards compatibility floating doesn’t work properly

[allancole]

The recent changes to Button Block markup in 7.9.1 has caused a backward compatibility issue for buttons created well before 7.9. I have a testing post that lists the Button Block with all of its possible options. I created this post many months ago and I’m not sure which version of Gutenberg I had at the time.

After updating to 7.9.1 the .wp-block-button wrapper gets removed on those older buttons leaving the alignment class a direct child of the content wrapper in the markup like this:

.entry-content > wp-block-button.alignleft.wp-block-button__link.

I expected to get something like this which is what new buttons created after 7.9.1 give you:

.entry-content > .wp-block-buttons.alignleft > .wp-block-button__link.

Steps to reproduce the behavior:

1. Update to Gutenberg version 7.9.1
2. Start a new post. Using the code view, copy the sample content at the bottom of this issue and paste it into your new post.
3. Switch back to the visual view and you should see something similar to this:

Expected behavior
Before 7.9.1, Button blocks came with a .wp-block-button wrapper in the markup. After 7.9.1, newly created buttons get a .wp-block-buttons (with an “s”) wrapper but both of them are missing from these “legacy” button blocks I created a while ago.

I can fix this with some very specific CSS but ideally, “legacy“ Buttons should also get wrapped in .wp-block-button or .wp-block-buttons markup to prevent disruption on sites that have older Gutenberg content.

Lastly, this issue effects both the frontend and in the editor backend the same way. I’m wondering if its possible to have Gutenberg re-render those “legacy” buttons to include the wrappers like it did before.

Editor version (please complete the following information):

• WordPress version: 5.4
• Gutenberg plugin
• Gutenberg 7.9.1

Desktop (please complete the following information):

• Mac OS
• Chrome
• Version 80.0.3987.163

Sample content

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<a class="wp-block-button wp-block-button__link">Singular</a>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading {"level":3} -->
<h3>After 7.9.1 👆 — Before 7.9.1 👇</h3>
<!-- /wp:heading -->

<!-- wp:button -->
<a class="wp-block-button wp-block-button__link" href="#">Default</a>
<!-- /wp:button -->

<!-- wp:button {"align":"left"} -->
<a class="wp-block-button alignleft wp-block-button__link" href="#">Left</a>
<!-- /wp:button -->

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

<!-- wp:button {"align":"right"} -->
<a class="wp-block-button alignright wp-block-button__link" href="#">Right</a>
<!-- /wp:button -->

[youknowriad]

I've been doing some tests here, and it seems to me that this is more related to the usage of "lightBlockWrapper" on the button block than the markup change itself.

It seems to me that "lightBlockWrapper" on a button doesn't work with alignments. I believe it was missed that the button block could have alignment for old content.

cc @ellatrix

[youknowriad]

That said, on frontend, it seems good for me maybe aside the "center" alignment.

[allancole]

Gotcha. Will wait to see what the path forward is regarding the editor :-)

And good point about the frontend working with the default Gutenberg frontend styles. The theme im testing with overrides the default frontend floating rules that comes with Gutenberg, so it might not be as much of a disruption on the frontend for every site.

[andrewserong]

This isn't specifically related to floating, however I think I've encountered another styling regression in a particular theme (in this case Barnsbury, logged in Automattic/themes#1929) where there is now an additional grey outline around a button container (legacy markup). The issue is that the block container is being rendered with a grey border, which seems consistent with the change in #21642, so I thought I'd mention it here, too.

Sample content

<!-- wp:button {"className":"is-style-outline","textColor":"background"} -->
<a class="wp-block-button wp-block-button__link is-style-outline has-background-color has-text-color" href="/contact">Get in touch</a>
<!-- /wp:button -->

[ellatrix]

Hm, strange that the light wrapper was added to the button block, but not to the buttons blocks. I recall looking at implementing the light block wrapper for these, but not going through with it because of some color and alignment issues.

[GlennMartin1]

Related: woocommerce/storefront#1335