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

Автор: Тимур Васильев | Опубликовано: 10.11.2025

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

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

WordPress автоматически сохраняет черновики примерно каждые 60 секунд, используя механизм REST API и локальное хранилище браузера. Это очень удобно, но в некоторых случаях:

Автосохранение может конфликтовать с кастомными блоками, которые хранят дополнительные данные вне стандартного контента.
При нестабильном интернет-соединении автосохранение может не сработать вовремя.
Отсутствует визуальное уведомление о сохранении для пользователя.

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

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

Редактор Gutenberg построен на React и использует JavaScript API. Для добавления собственного автосохранения нам потребуется использовать хуки WordPress и JavaScript таймеры.

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

Напишем простой скрипт, который будет каждые 30 секунд вызывать сохранение поста и показывать уведомление.

function wpsystemAutoSave() {
  const { useEffect } = wp.element;
  const { useDispatch, useSelect } = wp.data;

  return function AutoSaveComponent() {
    const { savePost } = useDispatch('core/editor');
    const isSavingPost = useSelect((select) => select('core/editor').isSavingPost(), []);

    useEffect(() => {
      const interval = setInterval(() => {
        if (!isSavingPost) {
          savePost().then(() => {
            console.log('wpsystem: Пост успешно сохранён автоматически.');
          });
        }
      }, 30000); // автосохранение каждые 30 секунд

      return () => clearInterval(interval);
    }, [isSavingPost]);

    return null;
  };
}

wp.plugins.registerPlugin('wpsystem-autosave', {
  render: wpsystemAutoSave(),
});

В этом примере мы использовали хуки useEffect, useDispatch и useSelect из API Gutenberg для запуска функции сохранения поста каждые 30 секунд, если в данный момент не выполняется другое сохранение.

Подключение скрипта

Чтобы подключить этот скрипт, добавьте следующий код в файл плагина или темы functions.php:

function wpsystem_enqueue_autosave_script() {
  wp_enqueue_script(
    'wpsystem-autosave',
    get_template_directory_uri() . '/js/wpsystem-autosave.js',
    array('wp-plugins', 'wp-edit-post', 'wp-element', 'wp-data'),
    '1.0',
    true
  );
}
add_action('enqueue_block_editor_assets', 'wpsystem_enqueue_autosave_script');

Не забудьте создать файл wpsystem-autosave.js в папке js вашей темы и вставить туда JavaScript-код из примера.

Хранение и восстановление данных кастомных блоков при автосохранении

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

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

Добавим метаполе wpsystem_custom_data и настроим его сохранение:

function wpsystem_register_meta() {
  register_post_meta('post', 'wpsystem_custom_data', array(
    'show_in_rest' => true,
    'single' => true,
    'type' => 'string',
    'auth_callback' => function() {
      return current_user_can('edit_posts');
    },
  ));
}
add_action('init', 'wpsystem_register_meta');

В блоке JavaScript нужно использовать useEntityProp для чтения и записи этого метаполя:

const { useEntityProp } = wp.data;

function CustomBlockEdit() {
  const [customData, setCustomData] = useEntityProp('postType', 'post', 'wpsystem_custom_data');

  return (
    <input
      type="text"
      value={customData || ''}
      onChange={(event) => setCustomData(event.target.value)}
      placeholder="Введите пользовательские данные"
    /
  );
}

Таким образом, при автосохранении поста данные из поля wpsystem_custom_data будут сохраняться вместе с основным содержимым.

Плагины для улучшения автосохранения в WordPress

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

Better Autosave — позволяет настроить интервал автосохранения и добавляет уведомления о процессе сохранения.
WP Autosave Alert — показывает предупреждения о незасохранённых изменениях при попытке покинуть страницу.
Autosave Custom Fields — расширяет автосохранение на произвольные поля и метаданные.

Эти решения помогут повысить надёжность работы с контентом и минимизировать риски потери данных.