Gutenberg: Error loading block: Invalid parameter(s): attributes but it can be used in the code

Question

I managed to get an attribute working in my plugin. Well, sort of. I can read and write the attribute props.attributes.content . But I get the message in the Gutenberg block itself:

Error loading block: Invalid parameter(s): attributes

And in the network inspector I see a 400:

data: {status: 400, params: {attributes: "content is not a valid property of Object."}} params: {attributes: "content is not a valid property of Object."}

Here is the relevant code:

registerBlockType('simpletoc/toc', {
  title: __('SimpleTOC', 'simpletoc'),
  icon: simpletocicon,
  category: 'layout',
  attributes: {
        content: {
            type: 'string',
      source: 'text',
      selector: 'div',
        },
    },
  edit: function(props) {
    props.setAttributes( { content: "newContent" } );
    
    console.info(props.attributes.content);

    const mycontent = props.attributes.content;

    return (
    <div>
    <InspectorControls>
      <ToggleControl
          label={mycontent}
      />
    </InspectorControls>
    <BlockControls>
      <ToolbarGroup>
        <ToolbarButton
          className="components-icon-button components-toolbar__control"
          label={__('Update table of contents', 'simpletoc')}
          onClick={function() {
            sendfakeAttribute(props)
          }}
          icon="update"
        />
      </ToolbarGroup>
  </BlockControls>
  <p className={props.className}>
    <ServerSideRender block={props.name} attributes={props.attributes} />
  </p>
  </div>
    )
  },
  save: props => {
    return null;
  },
});

But I can write the attribute with

props.setAttributes( { content: "newContent" } );

with console.info and my ToggleControl I can actually read the value! What is going on?

Answer 1

The error in question is likely because when you run register_block_type(), you didn't set the block attributes or that it (which is an array in PHP) doesn't have the attribute named content.

So make sure the attributes are defined in both JavaScript (via registerBlockType()) and PHP (via the above-mentioned function), and that the schema is valid. E.g.

• In JS:

  registerBlockType( 'simpletoc/toc', {
      attributes: {
          content: {
              type: 'string',
              // other args
          },
          // other attributes
      },
      // ...
  } );
  

• In PHP:

  register_block_type( 'simpletoc/toc', array(
      'attributes' => array(
          'content' => array(
              'type' => 'string',
              // other args
          ),
          // other attributes
      ),
      // ...
  ) );