WordPress Gutenberg: This block contains unexpected or invalid content
To diagnose these errors, open up a browser console (cmd+opt+i in Chrome on Mac, then select Console tab) and look for a "Block validation" error, which should look something like this:
blocks.js?ver=6.2.5:8545 Block validation: Block validation failed for
avorg/block-rss
({name: "avorg/block-rss", title: "RSS Link", icon: {…}, category: "widgets", attributes: {…}, …}).
Content generated by
save
function:
<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank"><svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"></path></svg></a></div>
Content retrieved from post body:
<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank" rel="noopener noreferrer"><svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"></path></svg></a></div>
The error occurs because the retrieved HTML and the HTML generated by the save
function don't match. This can be caused when WordPress injects a property (rel
in the above screenshot) or when a block's definition has changed since the block was used.
To resolve the issue, you may need to do one of the following things:
- Click Resolve in the editor interface to update the block instance to match the modified definition of the block.
- If you built the block, you may need to edit the
save
function such that the HTML it returns is identical to the HTML that ends up being persisted to the database.
In my case, I had to ensure that my save
function included rel="noopener noreferrer"
in the generated <a>
tag so that WordPress' injection of this property wouldn't result in a mismatch between the block instance's HTML and the HTML being generated by my save
function.