Gutenberg block “This block appears to have been modified externally” on save

by

Just starting to play with Gutenberg block development, and I am building a very simple button (yes I know buttons are already included, but this block will have lots of settings and classes not included in the core block).

Seem’s pretty strait forward, but when I save the block and reload, I get a validation error and the “This block appears to have been modified externally” message.

registerBlockType('franklin/button', {
    title: 'Button',
    keywords: ['button' ],
    icon: 'admin-links',
    category: 'layout',
    attributes: {
        text: {
            source: 'text',
            selector: '.button-text'
        },
    },

    edit({attributes, setAttributes }) {

        return (
            <div class="guttenberg-usa-button">
                <button class="usa-button">
                    <PlainText
                      onChange={ content => setAttributes({ text: content }) }
                      value={ attributes.text }
                      placeholder="Your button text"
                      className="button-text"
                    /> 
                </button>
            </div>
        );
    },

    save({attributes}) {
        return (
            <button class="usa-button">
                { attributes.text }
            </button>
        );
    } 

});

So in the editor, I’ll add my block, modify the (button) text, save, and reload where I get the This block appears to have been modified externally” message.

Console shows the following error

Expected:

<button class="usa-button" class="wp-block-franklin-button"></button>

Actual:

<button class="usa-button" class="wp-block-franklin-button">testest</button>

I must be missing some fundamental concept or something, but I thought the save() function determines what gets displayed on the frontend which btw, looks as expected.

2 Answers
2

You are getting this error because your edit and save function output doesn’t match. 

 save({attributes}) {
    return (
        <button class="usa-button">
            { attributes.text }
        </button>
    );
}

precisely, { attributes.text } is the save function is not being called or used in edit function. Either add attributes.text in edit function or remove that from save function. Something like this should work – 

 <button class="usa-button">
                    <PlainText
                      onChange={ content => setAttributes({ text: content }) }
                      value={ attributes.text }
                      placeholder="Your button text"
                      className="button-text"
                    /> { attributes.text }
                </button>

Notice attributes.text is also outputting same text in the edit function just like save function.

Leave a Comment