Recover a Broken Block

Because of the way the Gutenberg Block Editor manages blocks there are times when a block may appear broken. This can happen for various reasons the most common reason is because of editing the block as html, if you edit the html of a block then it will show as broken. If for no reason it’s repeatedly happening to you then you should get in contact with the block creator to determine a long term solution. I’ve seen this happen because of plugins that filter/edit the page content on save which introduces code that isn’t part of the block.

What appears is a warning message “This block contains unexpected or invalid content”. And your block will look like the image below in your admin:

It looks like you only have two options and both usually lead you to either no content or an HTML output of code that can’t be edited. But with the latest versions of Gutenberg, there is a very handy hidden tool in Gutenberg that allows you to attempt a block recovery.

With the latest version or WordPress go back to your page and click on the more options icon button and choose “Attempt Block Recovery”. Will get the block working again.