Using 2 HTML blocks in Gutenberg to wrap content with div

admin管理员组

文章数量:1296899

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?

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?

• block-editor

Share Improve this question asked Apr 5, 2021 at 17:59 Eric MitjansEric Mitjans 18722 silver badges1010 bronze badges 2

• 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! – Eric Mitjans Commented Apr 6, 2021 at 20:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： Using 2 HTML blocks in Gutenberg to wrap content with div