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?

  • 3
    Have you tried wrapping in a group block with custom class? I'm assuming you're creating a block then editing its HTML inside the editor?
    – Tom J Nowell
    Commented Apr 5, 2021 at 19:50
  • @TomJNowell if u add this as an answer, ill mark it as accepted! Commented Apr 6, 2021 at 20:38

1 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.