disparity between Button block in editor vs. frontend

[GlennMartin1]

Describe the bug

The Button block incorrectly displays the button full-width in the frontend. It displays correctly in the editor.

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
• I can reproduce this bug consistently using the steps below.

To Reproduce

• intall Storefront theme Storefront 2.5.6-rc.1
• install Homestore childtheme 2.0.32 (current version)
• install Gutenberg plugin 7.9.1 (current version)
• create a single button in the Buttons block
• save and view in front end.

Screenshots

EDITOR:

FRONT-END:

Expected behavior

The front-end should display the button as it's shown in the editor.

[Aljullu]

I wasn't able to replicate this issue. @GlennMartin1 could you help me answering some questions?

• Was this happening with Storefront 2.5.5?
• Does it happen if you deactivate Homestore and use Storefront?
• Something that might help us is to get the same page contents as you.
  • Create a new page with the Buttons block, so you can replicate the issue.
  • In the editor, press Ctrl+A (select all blocks) and then Ctrl+C (copy).
  • Now, paste the page code here.

Thank you in advance!

[GlennMartin1]

Ok - I've got the solution - or at least a workaround - keep reading.

Yes, this happens with Storefront 2.5.5.
It began after Gutenberg 7.9.0 was installed.

Yes, it happens even with Storefront (without Homestore).

The is only an issue for buttons that were created prior to Gutenberg 7.9.0.
If I create a new button, the issue no longer appears.

The OLD code (before Gutenberg 7.9.0) is this:
<a class="wp-block-button aligncenter wp-block-button__link no-border-radius" href="https://www.hometowntrailers.com/dump-trailers/">Check out our inventory</a>

The NEW code (after Gutenber 7.9.0) is this:
<a class="wp-block-button wp-block-button__link no-border-radius" href="https://www.hometowntrailers.com/dump-trailers/">Check out our inventory</a>

You will note that the OLD code had aligncenter. If it's left-aligned, it had alignleft. The new code doesnt' use that.

My workaround is that I'm just creating new blocks.

[GlennMartin1]

Related: WordPress/gutenberg#21685

Appears to be a Gutenberg bug.

[GlennMartin1]

To be resolved with WordPress/gutenberg#21822

[Aljullu]

Awesome, thanks for investigating this @GlennMartin1. 👍