刚开始使用Gutenberg block开发，我正在构建一个非常简单的按钮（是的，我知道按钮已经包含在内，但这个块将有许多设置和类未包含在核心块中）。

看起来很简单，但当我保存块并重新加载时，会出现一个验证错误，并显示“此块似乎已被外部修改”消息。

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

});

因此，在编辑器中，我将添加我的块，修改（按钮）文本，保存并重新加载我得到的“此块似乎已被外部修改”消息。

控制台显示以下错误

Expected:

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

Actual:

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

我肯定缺少一些基本的概念或东西，但我认为save（）函数决定了前端显示的内容，顺便说一句，它看起来和预期的一样。

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

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

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