Block: attributes not saving

by

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);
    },
} );

1 Answer
1

I figured it out.
For anyone else this is how i did it.

my save function ends with

return el('div', {},
                el( 'p', {className: 'paragraphs'}, attributes.paragraphs ), 

        )

and i changed my attribute to this.

paragraphs: {
        type: 'string',
        default: 1,
        source: 'html',
        selector: '.paragraphs',
    },

Then in my style.scss i just have a display:none. As the editor options shouldn’t be displayed on the front end for me.

Leave a Comment