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?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0