WordPress Gutenberg: This block contains unexpected or invalid content

Question

I am creating very simple text block. The block works fine when I add this for the first time. If I refresh the page and try to edit the block it show me the message "This block contains unexpected or invalid content.". I have tried to disable htmlvalidation check but that doesn't help. Also, after I click on resolve: the current block and after conversion block contain same code.

http://prntscr.com/lwv18b
http://prntscr.com/lwv1e1

This is my index.js file code

<pre>
/**
 * Block dependencies
 */
import icon from './icon';
import './style.css';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;




/**
 * Register block
 */
export default registerBlockType(
    'jsforwpblocks/richtext',
    {
        title: __('Bizbike Small Description', 'jsforwpblocks'),
        description: __('Default title', 'jsforwpblocks'),
        category: 'common',
        icon: 'text',
        keywords: [
            __('Text', 'jsforwpblocks'),
            __('Call to Action', 'jsforwpblocks'),
            __('Message', 'jsforwpblocks'),
        ],
        attributes: {
            message: {
                type: 'array',
                source: 'children',
                selector: '.message-body',
            }
        },
        supports: {
            // html: false,
            className: false,
            customClassName: false,
            html: false,
            htmlValidation: false,
        },
        edit: props => {
            const { attributes: { message }, className, setAttributes } = props;
            const onChangeMessage = message => { setAttributes({ message }) };
            return (
                <div id="small-text" className={className}>
                    <RichText
                        tagName="div"
                        multiline="p"
                        placeholder={__('Place the title', 'jsforwpblocks')}
                        onChange={onChangeMessage}
                        value={message}
                    />
                </div>
            );
        },
        save: props => {
            const { attributes: { message } } = props;
            return (
                <div>
                    <div class="commute text-center">
                        {message}
                    </div>
                </div>
            );
        },
    },
);

</pre>

Answer 1

I have a similar problem and it was due to I was setting wrongly the attributes definition.

In this case you should define the message attribute type as a string, it source should be html as you are using the RichText component and use #small-text as selector:

    ...
    attributes: {
        message: {
            type: 'string',
            source: 'html',
            selector: '#small-text',
        }
    },

In general be careful defining attributes setting properly the type, source and the selector. Check the official docs for more information.

Answer 2

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.

Answer 3

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>