Как добавить автоматическое сохранение в редактор Gutenberg WordPress

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

Почему стандартного автосохранения Gutenberg может быть недостаточно

Стандартное автосохранение в Gutenberg срабатывает с определённым интервалом и сохраняет изменения в черновике. Однако у него есть ряд ограничений:

• Автосохранение не всегда срабатывает при изменении определённых блоков или полей.
• При работе с кастомными блоками или сложными мета-полями данные могут не сохраняться корректно.
• В некоторых случаях требуется более частое или моментальное сохранение без вмешательства пользователя.

Поэтому разработчикам часто нужно реализовать собственные механизмы автосохранения или расширять стандартные возможности.

Как настроить частоту автосохранения в Gutenberg

Первый и простой шаг — изменить интервал автосохранения, который по умолчанию составляет 15 секунд. Для этого можно использовать фильтр wp.data в JavaScript или фильтры PHP, чтобы изменить настройки редактора.

Например, добавим скрипт, который изменит интервал автосохранения на 5 секунд:

function wptemplates_enqueue_custom_script() {
    wp_enqueue_script('wptemplates-gutenberg-autosave', get_template_directory_uri() . '/js/gutenberg-autosave.js', array('wp-data','wp-edit-post'), '1.0', true);
}
add_action('enqueue_block_editor_assets', 'wptemplates_enqueue_custom_script');

В файле gutenberg-autosave.js поместим:

wp.data.dispatch('core/editor').setAutosaveInterval(5000); // интервал в миллисекундах

Это позволит чаще сохранять данные и снизит риск их потери.

Добавление автоматического сохранения для кастомных мета-полей

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

Пример для кастомного блока с мета-полем:

const { useEffect } = wp.element;
const { useSelect, useDispatch } = wp.data;

function wptemplates_useAutoSaveMeta( metaKey ) {
    const metaValue = useSelect( ( select ) => select( 'core/editor' ).getEditedPostAttribute('meta')[metaKey], [metaKey] );
    const { savePost } = useDispatch( 'core/editor' );

    useEffect( () => {
        if ( metaValue !== undefined ) {
            // Сохраняем пост при изменении мета-поля
            savePost();
        }
    }, [metaValue] );
}

// Использование в компоненте блока
function MyCustomBlock() {
    wptemplates_useAutoSaveMeta('my_custom_meta_key');
    return <div>Мой блок с автосохранением мета-поля</div>;
}

Этот подход инициирует сохранение поста каждый раз, когда изменяется указанное мета-поле.

Использование плагинов для расширенного автосохранения

Если не хочется писать код самостоятельно, можно обратить внимание на плагины, которые расширяют возможности автосохранения в Gutenberg:

• Clearfy Pro — оптимизирует работу WordPress и может помочь с расширением функционала редактора.
• WPGPT — добавляет интеллектуальные функции, которые можно адаптировать для работы с редактором.

Однако для точечного контроля автосохранения чаще всего удобнее использовать собственные решения.

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

Автоматическое сохранение — это только одна сторона защиты. Чтобы дополнительно обезопасить контент, можно внедрить проверку незаписанных изменений при попытке закрыть вкладку или перейти на другую страницу.

Пример простого решения с использованием JavaScript:

window.addEventListener('beforeunload', function (e) {
    const isSaving = wp.data.select('core/editor').isSavingPost();
    const isEdited = wp.data.select('core/editor').isEditedPostDirty();
    if (isEdited && !isSaving) {
        const confirmationMessage = 'Есть несохранённые изменения. Вы действительно хотите покинуть страницу?';
        e.returnValue = confirmationMessage; // Для современных браузеров
        return confirmationMessage; // Для старых браузеров
    }
});

Этот код показывает предупреждение, если есть несохранённые изменения, предотвращая случайную потерю данных.

Оптимизация автосохранения: советы и рекомендации

Хотя частое автосохранение повышает надёжность, оно может создавать нагрузку на сервер и влиять на производительность. Вот несколько советов:

• Настраивайте интервал сохранения с учётом специфики сайта и объёма данных.
• Для крупных сайтов с большим количеством одновременных редакторов лучше избегать слишком частых сохранений.
• Используйте кеширование и CDN для снижения нагрузки при сохранении.
• Отключайте автосохранение для пользователй с низкими правами, если это допустимо.

Эти меры помогут сделать процесс автосохранения комфортным и эффективным.

Заключение

Автоматическое сохранение — важный инструмент для повышения надёжности работы с контентом в WordPress. Используя описанные методы, вы сможете настроить автосохранение под свои задачи, добавить поддержку кастомных полей и блоков, а также защитить пользователей от потери данных при случайном закрытии вкладки. При необходимости интегрируйте готовые решения из плагинов, например, Clearfy Pro, чтобы получить дополнительный функционал и оптимизацию.