Этот блок, похоже, был изменен извне

Я только начинаю разрабатывать блоки для Gutenberg и создаю очень простую кнопку (да, я знаю, что кнопки уже включены, но этот блок будет иметь множество настроек и классов, которые не включены в основной блок).

Похоже, это довольно просто, но когда я сохраняю блок и перезагружаю, я получаю ошибку валидации и сообщение “Этот блок, похоже, был изменен извне”.

registerBlockType('franklin/button', {
    title: 'Кнопка',
    keywords: ['кнопка'],
    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="Текст вашей кнопки"
                      className="button-text"
                    /> 
                </button>
            </div>
        );
    },

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

});

Итак, в редакторе я добавлю свой блок, изменю текст (кнопки), сохраню и перезагружу, где получу сообщение “Этот блок, похоже, был изменен извне”.

Консоль показывает следующую ошибку

Ожидалось:

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

Фактически:

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

Я, вероятно, упускаю какой-то фундаментальный концепт или что-то еще, но я думал, что функция save() определяет, что отображается на фронте, который, кстати, выглядит так, как и ожидалось.

Вы получаете эту ошибку, потому что вывод функции редактирования и сохранения не совпадает.

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

Точно, { attributes.text } функция save не вызывается и не используется в функции редактирования. Либо добавьте attributes.text в функцию редактирования, либо удалите это из функции сохранения. Что-то вроде этого должно сработать –

 <button class="usa-button">
                    <PlainText
                      onChange={ content => setAttributes({ text: content }) }
                      value={ attributes.text }
                      placeholder="Текст вашей кнопки"
                      className="button-text"
                    /> { attributes.text }
                </button>

Обратите внимание, что attributes.text также выводит тот же текст в функции редактирования, как и в функции сохранения.

Это происходит потому, что ваш атрибут использует HTML для получения своего значения, а селектор – .button-text, но ничего, что соответствовало бы этому селектору, нет в сохраненном выводе.

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

Обратите внимание, что button-text нигде не находится, поэтому его значение пустое. Это противоречит компоненту редактирования, который действительно содержит такой класс.

Либо измените атрибут, чтобы не использовать HTML/текст в качестве источника, либо убедитесь, что селектор соответствует чему-то, что содержит текст в сохраненном выводе.