Using 2 HTML blocks in Gutenberg to wrap content with div

Question

I'm trying to wrap a Gutenberg block with a div with class x.

The structure I'm using looks like this:

• HTML Block (<div class="x">)
• Other Block(s)
• HTML Block (</div>)

In the frontend, all works as expected, but in the Editor, when saving and reloading, it will popup the "This block contains unexpected or invalid content" error in both HTML blocks.

I assume the editor considers the code is wrong, cause the first one is not closed, and the second one is not open. Is there another cleaner/better way of doing this? Shouldn't I be able to write HTML in the blocks that are not necesserely self-contained?

Answer 1

You can achieve the same thing by wrapping multiplle blocks in groups blocks, and adding HTML classes to them, or to individual blocks. Modifying their HTML with the code editor isn't necessary