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?