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

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.

tech