How can I permanently disable Wordpress Gutenburg's "This block contains invalid content" messages?

user_5296877 0
Viewed 373

When I create custom HTML blocks in Wordpress Gutenburg, it keeps transforming my code into annoying "this block contains invalid content" messages. Wordpress thinks it's invalid because I'm using these blocks to open and close div's, but it's not, it's perfectly legit code. And Wordpress displaying these messages everywhere really gets in the way of my work and looks bad on the customer-end.

Is there any way, for example a snippet of code I can add into my functions.php, to permanently disable these messages?

wordpress-gutenberg wordpress
2 Answers

The message appears, when gutenberg is getting different block attributes from the save function than it expects in the edit function. It is an issue related to you blocks attributes. Check the attributes and check, if the are all defined.

Another workaround is to create a dynamic block

Dynamic blocks are blocks that can change their content even if the post is not saved. One example from WordPress itself is the latest posts block. This block will update everywhere it is used when a new post is published.

Dynamic block will not check the transformability from save to edit.

If you post your block's save and edit functions as well as attributes, I can further investigate the error.

user_9470400

I am not sure if I understand you correctly but if you’re trying to make a custom block that outputs an opening <div> tag and another block that outputs a closing </div> tag – i.e. to be used as a wrapper element for one or many other blocks – this will not be legit code in terms of the Block Editor. You need to provide a valid html element (which in your case is both tags <div></div>) for your save method – to be rendered correctly as valid html on the frontend and to be parseable again as a React component / Block in the editor (this might be especially why it throws an error in your case, you need a wrapping element for a React component / Gutenberg block – just a single html tag will not work). Therefore you would need to have the opening and closing tag in one block.

Still assuming sort of a wrapper block is what you want to achieve, you can either:

a) Add the wrapper divs dynamically to the block when rendering the block on the frontend via PHP – then the <div></div> will not be part of your saved string in the database (this will only work for single blocks you want to wrap).

b) Make a custom wrapper block, can be super simple, just outputting your <div></div>and allowing other blocks to be inserted as inner blocks in the editor (you could wrap as many blocks as you want...if it still stays manageable in the editor).

Custom classnames could be added for both solutions.

user_114712420
Related