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

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

Почему стандартное автосохранение Gutenberg не всегда достаточно

По умолчанию Gutenberg сохраняет посты в виде черновиков с интервалом около 10 секунд, а также при каждом изменении. Но при работе с динамическими блоками, сторонними плагинами или подключёнными API-интеграциями могут возникать проблемы:

• Потеря данных из кастомных полей: Gutenberg сохраняет основной контент, но не всегда корректно обновляет пользовательские поля.
• Задержки в сохранении: При медленном соединении автосохранение может срабатывать с задержкой, создавая риск потери данных.
• Отсутствие обратной связи: Пользователь не всегда видит, успешно ли прошло сохранение.

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

Расширение автосохранения Gutenberg с помощью JavaScript

Gutenberg построен на React и использует JavaScript API для управления состоянием редактора. Мы можем добавить слушатель изменений и реализовать дополнительное сохранение.

Пример: создание автосохранения кастомных метаполей

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

function wordpresses_autosave_custom_meta() {
    wp.data.subscribe(() => {
        const meta = wp.data.select('core/editor').getEditedPostAttribute('meta');
        // Проверяем, изменилось ли значение
        if (meta.my_custom_meta !== wordpresses_autosave_custom_meta.lastValue) {
            wordpresses_autosave_custom_meta.lastValue = meta.my_custom_meta;
            // Отправляем AJAX-запрос на сохранение
            wp.apiFetch({
                path: '/wp/v2/posts/' + wp.data.select('core/editor').getCurrentPostId(),
                method: 'POST',
                data: { meta: { my_custom_meta: meta.my_custom_meta } }
            }).then(() => {
                console.log('Кастомное поле сохранено автоматически');
            });
        }
    });
}
wordpresses_autosave_custom_meta.lastValue = null;
wp.domReady(() => {
    wordpresses_autosave_custom_meta();
});

Этот код подключается к состоянию редактора, отслеживает изменения в метаполях и отправляет обновления на сервер без вмешательства пользователя.

Добавление визуальной индикации автосохранения

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

Пример: уведомление с использованием @wordpress/notices

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

import { dispatch } from '@wordpress/data';
import { createNotice } from '@wordpress/notices';

function wordpresses_show_autosave_notice() {
    dispatch('core/notices').createNotice(
        'info',
        'Автосохранение контента...',
        { isDismissible: true }
    );
}

// Вызовем уведомление перед AJAX-запросом

Подобные уведомления помогут пользователю не беспокоиться за сохранность данных.

Автоматическое сохранение при отключении интернета или закрытии вкладки

Иногда пользователь может потерять данные из-за потери соединения или случайного закрытия вкладки браузера. Для таких случаев можно использовать beforeunload и локальное хранилище.

Пример: сохранение в localStorage и восстановление

window.addEventListener('beforeunload', () => {
    const content = wp.data.select('core/editor').getEditedPostContent();
    localStorage.setItem('wordpresses_autosave_draft', content);
});

wp.domReady(() => {
    const savedContent = localStorage.getItem('wordpresses_autosave_draft');
    if (savedContent) {
        wp.data.dispatch('core/editor').editPost({ content: savedContent });
        localStorage.removeItem('wordpresses_autosave_draft');
        alert('Восстановлено автосохранённое содержимое');
    }
});

Такой подход особенно полезен, если серверное автосохранение не успевает сработать.

Рекомендуемые плагины для расширенного автосохранения WordPress

Если вы предпочитаете готовые решения, обратите внимание на следующие плагины с расширенными функциями автосохранения:

• Clearfy Pro – оптимизация и расширенные настройки автосохранения и кеширования.
• WPGPT – расширение для интеграции с GPT, поддерживает автоматическую генерацию и сохранение контента.

Итоги и рекомендации по автосохранению в Gutenberg

Автоматическое сохранение в редакторе Gutenberg – важный элемент безопасности данных и удобства пользователя. Стандартных инструментов может быть недостаточно для сложных проектов с кастомным функционалом. В таких случаях стоит:

• Реализовать собственные механизмы автосохранения через JavaScript и REST API.
• Добавить визуальные уведомления об успешном сохранении.
• Использовать локальное хранилище для резервного копирования при отключении интернета.
• Рассмотреть проверенные плагины с расширенными возможностями.

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