Гутенберг - Отправить действие или использовать setAttributes() при сохранении/обновлении записи вместо слушателя onChange.

Гутенберг – Отправить действие или использовать setAttributes() при сохранении/обновлении записи вместо слушателя onChange.

На чтение 3 мин Опубликовано 13.01.2025

Вопрос или проблема

Мне нужно добавить до 8 пользовательских цветов, выбранных пользователем, в список стандартных опций при использовании Палитры цветов.

Я зарегистрировал мета, которая сохраняет пользовательские цвета.

Проблема:

Я хочу сохранять пользовательские цвета, когда нажимается кнопка “Обновить” пост, вместо использования слушателя onChange, потому что слушатель срабатывает несколько раз, когда инструмент выбора цвета перетаскивается.

Что я делаю в данный момент:

const { isSavingPost } = useSelect( select => {
    const { isSavingPost } = select( 'core/editor' );

    return {
        isSavingPost: isSavingPost(),
    }
} );

useEffect( () => {
    if ( isSavingPost ) {
        // Логика сохранения пользовательских цветов.
        setAttributes( { customColors } );
    }
}, [ isSavingPost ] );

Проблема в том, что когда вызывается setAttribute(), когда нажата кнопка “Обновить”, состояние обновляется после сохранения поста, что Gutenberg считает как измененное, и при повторной загрузке страницы после “Обновления” отображается это:

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

Есть ли способ вызвать wp.data.dispatch( 'core/editor' ).editPost() или setAttributes(), когда пост сохраняется вручную нажатием кнопки “Обновить”?

Вы все еще можете использовать слушатель onChange и выполнять setAttributes только тогда, когда значение, переданное в onChange, отличается от значения в attributes.customColors. Это одно if и не должно сильно сказываться на производительности.

Ответ или решение

Для решения задачи управления сохранением пользовательских цветов в палитре Gutenberg, возникает необходимая оптимизация процесса обновления мета-данных, чтобы избежать многократного срабатывания обработчика событий onChange при изменении цвета. Эта проблема требует более точного подхода к сохранению настроек в момент нажатия кнопки "Обновить", а не в процессе изменения значений.

Теория:
В редакторе Gutenberg, обработка событий часто осуществляется через onChange-слушатели, что приводит к множественным срабатываниям при интерактивных изменениях, таких как перемещение ползунка цветовой палитры. Это может создавать избыточную нагрузку и приводит к нежелательным побочным эффектам при сохранении данных. Гораздо более рационально обновлять состояние атрибутов при фактическом сохранении поста.

Пример:
Представим, что требуется сохранить пользовательские цвета, когда пользователь нажимает кнопку "Обновить" пост. Вы уже используете Hook useSelect, чтобы отслеживать состояние сохранения поста через isSavingPost, но при обновлении атрибутов после того, как данные уже сохранены, возникает проблема избыточного срабатывания изменения состояния, что в свою очередь вызывает сообщение об измененной (грязной) странице.

Применение:

Используйте useEffect: Вам нужно отслеживать изменение состояния сохранения. Ваш подход с использованием useEffect верный, но важно убедиться, что данные обновляются до завершения процесса сохранения.
Проверка изменений: Прежде чем обновлять setAttributes, добавьте проверку — сравните текущее состояние customColors с новым значением. Это позволит избежать ненужных изменений.

useEffect(() => {
    if (isSavingPost) {
        if (!_.isEqual(attributes.customColors, customColors)) {
            setAttributes({ customColors });
        }
    }
}, [isSavingPost]);

Конструкция !_.isEqual() из библиотеки lodash поможет избежать изменения состояния, если данные не изменились.

Обработка законченного сохранения: Можно использовать эффект завершенного сохранения вместо срабатывания на каждом изменении, если это поддерживается вашей версией API.

Для реализации этого подхода важно обеспечить точное и чистое управление состояниями атрибутов, избегая ненужных обновлений и тем самым улучшая производительность и пользовательский опыт.