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

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

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

По умолчанию Gutenberg сохраняет черновик примерно каждые 10 секунд, но есть ситуации, когда этого недостаточно:

• Не все изменения сохраняются мгновенно, например, при работе с нестандартными блоками или плагинами.
• Хотите добавить пользовательские проверки перед сохранением, например, валидацию данных.
• Нужно интегрировать автосохранение с внешними сервисами или собственными базами данных.

Поэтому мы рассмотрим, как при помощи JavaScript и PHP добавить дополнительные хуки и расширить автосохранение.

Как работает стандартное автосохранение Gutenberg

Gutenberg использует Redux для управления состоянием редактора, а также REST API для сохранения данных на сервер. Автосохранение происходит при изменении состояния редактора и выполняется асинхронно.

Основные точки входа для автосохранения — это действия в @wordpress/data и @wordpress/editor. Чтобы добавить кастомное поведение, нужно подписаться на события изменения состояния редактора.

Пример подписки на изменение содержимого поста

Для этого можно использовать следующий код JavaScript, который нужно добавить в собственный скрипт в админке WordPress:

const { subscribe, select } = wp.data;

let previousContent = select('core/editor').getCurrentPost().content;

wp.domReady(() => {
  subscribe(() => {
    const currentContent = select('core/editor').getCurrentPost().content;
    if (currentContent !== previousContent) {
      previousContent = currentContent;
      console.log('Содержимое изменилось, можно запускать автосохранение');
      // Здесь можно добавить вызов своей функции автосохранения
    }
  });
});

Этот пример отслеживает изменение контента поста и выводит сообщение в консоль, когда происходит изменение. В реальном сценарии вместо console.log вы можете запустить функцию сохранения.

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

Для запуска своего автосохранения можно использовать REST API WordPress. Вот пример функции на PHP, которая регистрирует свой REST endpoint для сохранения данных:

add_action('rest_api_init', function() {
  register_rest_route('wpcat/v1', '/autosave', array(
    'methods' => 'POST',
    'callback' => 'wpcat_autosave_save_post',
    'permission_callback' => function() {
      return current_user_can('edit_posts');
    }
  ));
});

function wpcat_autosave_save_post(WP_REST_Request $request) {
  $post_id = $request->get_param('post_id');
  $content = $request->get_param('content');
  if (!$post_id || !$content) {
    return new WP_Error('missing_data', 'Отсутствуют необходимые параметры', array('status' => 400));
  }

  $post = array(
    'ID' => $post_id,
    'post_content' => $content,
  );
  $result = wp_update_post($post, true);
  if (is_wp_error($result)) {
    return $result;
  }
  return array('success' => true);
}

Теперь из JavaScript можно вызывать этот endpoint для сохранения данных:

function wpcatSavePost(postId, content) {
  return fetch('/wp-json/wpcat/v1/autosave', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ post_id: postId, content: content })
  })
  .then(response => response.json());
}

Интеграция с wpGutenberg для улучшенного UX автосохранения

Если вы хотите сделать автосохранение более заметным для пользователя, можно добавить индикатор состояния сохранения. Например, с помощью React-компонента, который будет отображать статус:

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

function WPCATAutoSaveIndicator() {
  const [status, setStatus] = useState('Сохранено');
  const isSaving = useSelect((select) => select('core/editor').isSavingPost(), []);

  useEffect(() => {
    if (isSaving) {
      setStatus('Сохраняется...');
    } else {
      setStatus('Сохранено');
    }
  }, [isSaving]);

  return <div className="wpcat-autosave-indicator">{status}</div>;
}

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

Рекомендации по оптимизации автосохранения в Gutenberg

Чтобы не перегружать сервер и редактор постоянными запросами, стоит соблюдать следующие рекомендации:

• Не запускать автосохранение при каждом изменении, а использовать дебаунс (задержку). Например, запускать автосохранение, если с момента последнего изменения прошло более 5 секунд.
• Отслеживать только значимые изменения (например, изменение текста, а не смену курсора).
• Обрабатывать ошибки сохранения и уведомлять пользователя.

Для дебаунса можно использовать функцию wpcatDebounce:

function wpcatDebounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

Использование плагина Clearfy Pro для оптимизации Gutenberg

Если вы хотите упростить работу с автосохранением и другими функциями оптимизации, обратите внимание на плагин Clearfy Pro. Он содержит множество настроек для управления поведением редактора и может помочь в оптимизации автосохранения и других процессов.

Выводы

Автоматическое сохранение в Gutenberg — важный механизм, который можно расширять и адаптировать под свои задачи. Используя JavaScript для отслеживания изменений и REST API для сохранения, вы можете сделать автосохранение более надежным и удобным для пользователей. В дополнение полезно добавить визуальные индикаторы и оптимизировать частоту сохранений.