Gutenberg unexpected content

This Block Contains Unexpected or Invalid Content: How to Fix It in Gutenberg?

Let’s get straight to it.

If you’re working in the block-based WordPress Gutenberg editor, you might have experienced this error after updating and saving changes in a previously used block:

“This block contains unexpected or invalid content”

This issue occurs when the current HTML structure of the block doesn’t correspond with the previously saved version in the block editor. You may not realize that the initial block markup or attributes were modified and you are using the old version of the block.

This block contains unexpected or invalid content

No panic, that doesn’t mean that the block is broken forever. Let’s briefly outline the most common reasons for this issue and a couple of solutions.

Possible reasons:

  1. The most common reason is that a block author did not properly update their block when trying to improve its capabilities (mismatch between two block versions.)
  2. A block author didn’t properly test a block before release.
  3. You made errors when editing a block content in the HTML text editor instead of the Gutenberg visual editor.
  4. Global WordPress core updates that somehow influence custom author blocks. Although we believe since WordPress 5.0, there should not be a lot of such issues.

Note: if you don’t need to edit the broken block, you may even leave it as it is – it should render on the frontend properly.

How to solve:

  1. Notify the block author about the error to figure out whether it’s a common issue and whether they’re doing anything in order to resolve it – and then just wait for an update from them. It is recommended that block authors update block markup, attributes and features following the best practices of updating deprecated core blocks:
  • By creating a new block instead of deprecating it.
  • By providing a deprecated block version and enabling users to edit it in the editor.

Check out the Full Deprecated Gutenberg blocks guide.

2. As the broken block prompts suggest, if “Resolve” doesn’t work, try to convert it to HTML and edit a block code.

3. Recreate a block to be able to use it properly again (most likely, you need to do it on every page where the block is used if you are going to edit it).

If you know other solutions, please share them in comments!

Leave a Reply

Your email address will not be published. Required fields are marked *