I’m trying to make a Gutenberg Block that has 3 text inputs on the editor.
Then on the front end it shows some paragraphs/sentences on the front end.
If I try to put 2 paragraphs -> update -> then reload the page I get this error.
I’m assuming because its not saving that 2 value for the paragraph text input
I’ve done a lot of googling but haven’t found anything that works. I was trying to use the source/selector but i’m pretty sure I have that wrong in the first place.
Block validation: Block validation failed for `cgb/block-test` ({name: "cgb/block-test", icon: {…}, attributes: {…}, keywords: Array(3), save: ƒ, …}).
Content generated by `save` function:
<div paragraphs="1" class="wp-block-cgb-block-test">1</div>
Content retrieved from post body:
<div paragraphs="2" class="wp-block-cgb-block-test">2</div>
.
attributes: {
paragraphs: {
type: 'integer',
default: 1,
source: 'paragraphs',
selector: 'paragraphs',
}
},
edit: ( props ) => {
console.log(props);
const { attributes, setAttributes } = props;
return (
el( 'div', { className: props.className },
el( TextControl, {
label: 'How many paragraphs?',
value: props.attributes.paragraphs,
onChange: ( value ) => {
setAttributes( { paragraphs: value } );
}
})
)
);
},
save: ( props ) => {
const { attributes } = props;
return el('div', {'paragraphs': attributes.paragraphs}, attributes.paragraphs);
},
} );