Back to Documentation

How to recover a broken block

See our explanation on how to recover a broken block when receiving this message – “This block contains unexpected or invalid content”.

Don’t worry !.. It’s not that bad seeing this warning 🙂

This warning occurs when the current HTML structure in the edit section of the block does not correspond with the previously saved version of the block on the front-end.

You may not easily see that the block markup or attributes were modified in the latest update just by looking at the block, but the block has most likely been updated and all you need to do is to click “Attempt Block Recovery.

Blockons - This block contains unexpected or invalid content - Attempt Block Recovery
This block contains unexpected or invalid content – Attempt Block Recovery

Possible reasons for seeing this:

  • With a new update, the html in the editor is different to what’s saved on the front-end and so the blocks shows this issue… Attempt Block Recovery should fix the issue.
  • Code or Syntax errors were made when editing the HTML text editor instead of the Gutenberg visual editor.
  • The block author made an error when updating the block and so the block editor is not matching the front-end and causing this invalid content error.

If the block is displaying this error, it should still be working fine on the front-end of the website so you may leave this as is if the Attempt Block Recovery button does not fix the problem.

Solutions to fix the ‘unexpected or invalid content block’ error:

1) The most obvious and easy fix is to simply click the blue “Attempt Block Recovery” button… That should update the blocks html to have the latest changes made by the plugin developer, and making any changes or just clicking update should then update the front-end and then the block should not display any errors anymore.

2) Try deleting the block and re-create it as a new block to see if that fixes the issue.

3) Some pages will say you can look at converting it to html and then editing the html to fix it, but we don’t recommend this method as the block should work by editing it visually.

If you still see the error after trying any of these solutions, then we recommend contacting the plugin developers and asking them to assist you with a proper fix.

Broken block error:

The error shown below if a more serious issue… This will break the block and it will not work on the site front-end.

Broken block error
Broken block error

This is most likely from another plugin causing an issue on the website front-end or an issue with the block somehow.

You can try changing themes temporarily to see if that fixes it, or de-activate all plugins and quickly check if it works after that… If it does, we recommend activating the plugins one by one and testing after each one to see if the issue returns. That is a good way for finding out which plugin is causing any issues on the website.