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

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

Почему важно автоматическое обновление Gutenberg блоков

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

Автоматическое обновление позволяет блокам реагировать на изменения данных в реальном времени, например, при обновлении информации на сервере или изменении пользовательских настроек.

Это особенно актуально для блоков, которые выводят динамический контент: новости, курсы валют, отзывы, статистику и т.д.

Общая идея реализации автоматического обновления

Основная концепция — использовать JavaScript внутри блока для периодического опроса сервера (через REST API) или подписки на события изменения данных и обновления состояния блока без полной перезагрузки.

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

Использование React хуков для управления состоянием

Gutenberg блоки построены на React, поэтому для обновления данных удобно использовать хуки useState и useEffect. В useEffect мы можем настроить таймер, который будет регулярно запрашивать новые данные.

Пример кода: динамический Gutenberg блок с автообновлением

Ниже пример простого блока, который каждые 10 секунд запрашивает текущую дату и время с REST API и обновляет свой внутренний текст.

const { registerBlockType } = wp.blocks;
const { useState, useEffect } = wp.element;

registerBlockType('wpblock/auto-update-block', {
  title: 'Автообновляемый блок времени',
  icon: 'clock',
  category: 'widgets',
  edit: () => {
    const [currentTime, setCurrentTime] = useState('Загрузка...');

    useEffect(() => {
      function fetchTime() {
        fetch('/wp-json/wpblock/v1/current-time')
          .then(response => response.json())
          .then(data => setCurrentTime(data.time))
          .catch(() => setCurrentTime('Ошибка загрузки'));
      }

      fetchTime();
      const interval = setInterval(fetchTime, 10000); // обновлять каждые 10 секунд

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

    return <p>Текущее время: {currentTime}</p>;
  },
  save: () => {
    // Этот блок динамический, контент рендерится на сервере
    return null;
  },
});

Для этого примера нужно зарегистрировать REST endpoint в PHP, который возвращает текущее время:

add_action('rest_api_init', function () {
  register_rest_route('wpblock/v1', '/current-time', array(
    'methods' => 'GET',
    'callback' => function () {
      return array('time' => current_time('H:i:s'));
    },
    'permission_callback' => '__return_true',
  ));
});

Оптимизация автообновления и безопасность

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

• Устанавливайте разумный интервал обновления (например, не чаще 10 секунд).
• Кешируйте данные на сервере, если они не меняются мгновенно.
• Используйте nonce для безопасности REST API, если данные чувствительные.

Если данные очень динамичные и важна мгновенная реакция, рассмотрите использование WebSocket или технологии push, но для большинства задач REST API с таймером подходит отлично.

Пример интеграции с плагином Clearfy Pro для оптимизации

Плагин Clearfy Pro помогает оптимизировать работу WordPress, в том числе управлять скриптами и REST API. С его помощью вы можете отключать неиспользуемые endpoint'ы, уменьшая нагрузку, и контролировать частоту запросов.

Рекомендуется использовать Clearfy Pro для комплексной оптимизации при внедрении динамических блоков с автообновлением.

Как сделать блок с автообновлением редактируемым и на фронтенде

В редакторе блок будет обновляться автоматически, как мы показали в примере. Для фронтенда можно реализовать динамический рендеринг в PHP с подключением JavaScript для обновления без перезагрузки.

Пример рендера на фронтенде в PHP:

function wpblock_render_auto_update_block() {
  return '<div id="wpblock-auto-update-frontend">Загрузка...</div>'
    . '<script>'
    . '(function(){
          function update() {
            fetch("' . esc_url_raw(rest_url('wpblock/v1/current-time')) . '")
              .then(res => res.json())
              .then(data => {
                document.getElementById("wpblock-auto-update-frontend").innerText = "Текущее время: " + data.time;
              });
          }
          update();
          setInterval(update, 10000);
        })();'
    . '</script>';
}
register_block_type('wpblock/auto-update-block', array(
  'render_callback' => 'wpblock_render_auto_update_block',
));

Таким образом, и в редакторе, и на фронтенде блок будет автоматически обновлять данные без перезагрузки страницы.

Заключение и рекомендации

Автоматическое обновление Gutenberg блоков — отличный способ сделать контент более интерактивным и динамичным. Основной инструмент — использование React хуков в блоке и REST API для получения актуальных данных.

Не забывайте про оптимизацию, чтобы не перегружать сервер и не ухудшать производительность сайта. Используйте проверенные плагины, например, Clearfy Pro, для управления скриптами и API.

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