“This block contains unexpected or invalid content.”
Don’t panic! This is just a misbehaving block.
You’ve opened your editor, and a scary error message has popped up on your previously pristine page! “This block contains unexpected or invalid content.” can occur during content updates when custom HTML has been added to a block, either via block update or the Code Editor.
Another common cause of block validation errors is non-standard/poorly formatted ASCII content. We recommend not copy & pasting from editors like Microsoft Word. These editors often add sneaky characters that WordPress’ Gutenberg editor hates. If you absolutely must copy and paste– we recommend to do that from things like notepad, and other simple text editors.
Recovering a Block
Have no fear, recovering from most block errors is easy! In most cases, a block error is nothing to worry about and you’ll be able to solve it in a click.
Attempt Block Recovery
In the right hand corner of the affected block, you’ll find a block recovery button. Click it and WordPress will take care of the rest!
Really broken blocks.
In rare instances, a block might be so broken that WordPress doesn’t even give you an option to attempt block recovery. While this is worst-case scenario, remember that as long as you don’t delete this block, WordPress will never remove it from the front end of your site.
So what should I do?
Our recommendation is to use the frontend block as a reference to recreate the block in the backend. Make sure to do this before you delete the block so that you can continue to use it as a guide.
Advanced Recovery Options
There are a couple other options available when you run into a block error. However, these options are only recommended if you’re an advanced HTML and CSS user. With these options you lose much of what makes the Gutenberg editor so great!
Proceed with caution.
Convert to HTML
Block errors occur when Gutenberg is unable to make sense of the HTML that’s in your block. If you’re absolutely sure that what’s in there is supposed to be there, you can try converting the block to HTML. Once you’ve converted a block to HTML you cannot convert it back to it’s previous block type. If things don’t work out you’ll have to recreate the block from scratch!
In the right hand corner of the block, you’ll find the editor options menu hidden behind a ⋮ button.
In the dropdown you’ll find the option to convert your block to HTML.
After conversion you’ll see the raw block HTML.