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:

1. Click Resolve in the editor interface to update the block instance to match the modified definition of the block.
2. 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.

You are getting error because your HTML nodes of edit function doesn't match up with save function HTML nodes.

on edit function you have -

<div id="small-text" className={className}>  <div>    <p></p>  </div></div>

on save function you have one extra div-

<div>  <div class="commute text-center">    <div>      <p></p>    </div>  </div></div>