Opening Edit HTML on container blocks shows error "This block contains unexpected or invalid content"

[alvarotrigo]

Description

I add two buttons.
I click on "Edit HTML"
And when I click back to "Edit visually" it shows the error "This block contains unexpected or invalid content" even though I didn't change anything at all.

Something's not right there?

Step-by-step reproduction instructions

1. Add a "buttons" block.
2. Add 1 or 2 buttons
3. click on "Edit HTML"
4. Now click on "Edit visually"
5. it shows the error "This block contains unexpected or invalid content" even though I didn't change anything at all.

Screenshots, screen recording, code snippet

Video attached:

buttons-error.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

Thanks for contributing, @alvarotrigo!

I can confirm the issue, labeling it as a bug.

Side note: The "Convert to Blocks" action doesn't work when viewing the resolution modal.

Screenshot

[courtneyr-dev]

I confirmed as well in WP 6.2 Beta 2. I expanded testing slightly @Mamaduka

• Toggle a single block to view html and back worked
• Toggle Buttons block group to html and back did not work
• Toggle entire post to html and back did work.

[alvarotrigo]

Any workaround to be able to paste the HTML code to make it recognisable for Gutenberg as buttons?

Trying to convert this to buttons but Gutenberg won't recognise it and instead show it as HTML:

<div class="is-layout-flex wp-block-buttons">
    <div class="wp-block-button">
        <a class="wp-block-button__link wp-element-button" href="https://google.com">Demo1</a>
    </div>
    <div class="wp-block-button">
        <a class="wp-block-button__link wp-element-button" href="https://google.com">Demo2</a>
    </div>
</div>

What I'm doing:

• Opening the code editor (top right > three bullets > code editor)
• Pasting the HTML
• Clicking on "Exit code editor" at the top
• Clicking on "Convert to blocks"
  
• It shows as HTML instead of as a editable button
  

[alvarotrigo]

Ok, got it!

I just had to add HTML comments <!-- wp:buttons --><!-- /wp:buttons --> and <!-- wp:button --><!-- /wp:button --> wrapping their respective HTML elements.
Now Gutenberg can recognise them.

[gziolo]

It must be some bug with how the parent block gets saved when returning from the code editing mode. I don't see any issues when entering the Code Editor and returning to the Visual Editor from Post Editor. I believe removing these blocks' menu items only hides the problem that will also exist for custom blocks.

[Mamaduka]

@gziolo, the issue has been around for a while. See #11785.

I agree that disabling the option for the container blocks doesn't solve to underline issue, but at least it makes it harder to break block markup.

[gziolo]

I agree that disabling the option for the container blocks doesn't solve to underline issue, but at least it makes it harder to break block markup.

Let's reopen it with a revised title so we can figure out a general solution for the underlying problem.