Button Block: Switching between Gutenberg plugin and Core causes invalid content

[ianbelanger79]

Switching between the Gutenberg plugin and Core causes invalid content in button blocks.

To reproduce

1. Activate the Gutenberg plugin
2. Add a button block
3. Deactivate the Gutenberg plugin
4. Button blocks added while the GB plugin is active now show invalid content.

We need to ensure backwards compatibility, because previously button blocks were wrapped in p tags and now they are not. This causes the color and alignment options to no longer work properly in the editor. I tested this in both Twenty Twenty and Twenty Nineteen.

Screenshots:
Buttons added when GB plugin was active, but is now inactive.

Versions:

• WordPress version: trunk
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? both
• If the Gutenberg plugin is installed, which version is it? master and 7.9.1

Environment:

• OS: Windows 10
• Browser chrome, firefox
• Version latest

Related Issues:

• Button Block: Backwards compatibility floating doesn’t work properly #21685
• Button blocks using outline style in old markup render incorrectly #21747

[youknowriad]

Can you give the exact markup used in the previous version as I'm not able to reproduce with any markup, Thanks

[dreamwhisper]

@youknowriad I also saw this with Gutenberg 7.9.1 doing the following, but saw similar issues

1. Create a button with WordPress 5.4.
2. Install and activate Gutenberg 7.9.1.
3. Edit the page containing the button and click update.
4. Deactivate Gutenberg.
5. Edit the page containing the button - you should see the invalid content warning for buttons.

Diff before/after:

I also saw this happen for some headings and paragraphs.

With the latest changes to master, it appears to occur when a custom color is used.

Test case:

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"customBackgroundColor":"#246f90"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background" href="#" style="background-color:#246f90">This is a Button with a custom Color</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading {"align":"left","level":1,"customTextColor":"#b87474","className":"is-style-xl-text"} -->
<h1 class="has-text-color has-text-align-left is-style-xl-text" style="color:#b87474">Test Heading</h1>
<!-- /wp:heading -->

[youknowriad]

Deactivate Gutenberg.

Oh sorry I misread the issue initially, and yeah the invalidation here is totally expected since an old block (Core) can't know about the updated markup of the same block (Plugin). That's downgrading and it's not supported for blocks.

I'd say there's nothing we can do here and that's expected behavior.