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

Почему нужен динамический контейнер в Gutenberg

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

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

В этой статье мы рассмотрим, как создать такой контейнер, используя WordPress REST API, React хуки, и продемонстрируем интеграцию с плагином Clearfy Pro для оптимизации загрузки скриптов.

Основы создания динамического контейнера для Gutenberg блоков

Регистрация блока с динамическим рендером

Для начала необходимо зарегистрировать блок в PHP, задав для него динамическую функцию рендеринга. Это позволит серверу формировать HTML блоков при загрузке страницы.

function wpblock_register_dynamic_container_block() {
    register_block_type('wpblock/dynamic-container', array(
        'render_callback' => 'wpblock_render_dynamic_container_block',
        'attributes' => array(
            'endpoint' => array('type' => 'string'),
            'refreshInterval' => array('type' => 'number', 'default' => 60),
        ),
    ));
}
add_action('init', 'wpblock_register_dynamic_container_block');

function wpblock_render_dynamic_container_block($attributes) {
    $endpoint = isset($attributes['endpoint']) ? esc_url($attributes['endpoint']) : '';
    $refreshInterval = isset($attributes['refreshInterval']) ? intval($attributes['refreshInterval']) : 60;

    ob_start();
    ?>
    <div class="wpblock-dynamic-container" data-endpoint="<?php echo $endpoint; ?>" data-refresh-interval="<?php echo $refreshInterval; ?>">
        <p>Загрузка данных...</p>
    </div>
    <?php
    return ob_get_clean();
}

Здесь мы создаем блок с двумя атрибутами: endpoint — URL для получения данных, и refreshInterval — интервал обновления в секундах.

JavaScript часть: загрузка и обновление данных

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

import { useEffect, useState } from '@wordpress/element';

const { registerBlockType } = wp.blocks;

registerBlockType('wpblock/dynamic-container', {
    edit: (props) => {
        const { attributes, setAttributes } = props;
        const { endpoint, refreshInterval } = attributes;
        const [data, setData] = useState(null);

        useEffect(() => {
            if (!endpoint) return;

            function fetchData() {
                fetch(endpoint)
                    .then(res => res.json())
                    .then(json => setData(json))
                    .catch(() => setData(null));
            }

            fetchData();
            const interval = setInterval(fetchData, refreshInterval * 1000);

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

        return (
            <div className="wpblock-dynamic-container-editor">
                <input
                    type="text"
                    value={endpoint}
                    placeholder="Введите URL для данных"
                    onChange={(e) => setAttributes({ endpoint: e.target.value })}
                    style={{ width: '100%' }}
                />
                <input
                    type="number"
                    value={refreshInterval}
                    min={10}
                    onChange={(e) => setAttributes({ refreshInterval: parseInt(e.target.value) || 60 })}
                    style={{ width: '100%', marginTop: '10px' }}
                />
                <pre style={{ marginTop: '10px', background: '#f4f4f4', padding: '10px' }}>
                    {data ? JSON.stringify(data, null, 2) : 'Данные не загружены или ошибка.'}
                </pre>
            </div>
        );
    },
    save: () => {
        // Разметка рендерится динамически на сервере
        return null;
    }
});

В редакторе пользователь вводит URL и интервал обновления. В блоке показывается JSON ответ с внешнего API, обновляющийся автоматически.

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

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

Для этого добавим в PHP функцию, которая проверит наличие блока на странице и подключит скрипты только при необходимости:

function wpblock_conditional_enqueue_scripts() {
    if ( has_block('wpblock/dynamic-container') ) {
        wp_enqueue_script('wpblock-dynamic-container-script', plugins_url('dynamic-container.js', __FILE__), array('wp-element'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'wpblock_conditional_enqueue_scripts');

Clearfy Pro автоматически помогает контролировать подобные загрузки, но ручная проверка через has_block() гарантирует, что скрипты не будут грузиться зря.

Расширение функционала: кэширование и обработка ошибок

Кэширование данных на стороне клиента

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

function wpblock_useCachedFetch(url, cacheKey, cacheTimeSec, setData) {
    useEffect(() => {
        const cached = localStorage.getItem(cacheKey);
        const cachedTime = localStorage.getItem(cacheKey + '_time');
        const now = Date.now();

        if (cached && cachedTime && now - cachedTime < cacheTimeSec * 1000) {
            setData(JSON.parse(cached));
            return;
        }

        fetch(url)
            .then(res => res.json())
            .then(json => {
                setData(json);
                localStorage.setItem(cacheKey, JSON.stringify(json));
                localStorage.setItem(cacheKey + '_time', now);
            })
            .catch(() => setData(null));
    }, [url]);
}

Эту функцию можно применить внутри useEffect для оптимизации запросов.

Обработка ошибок и fallback UI

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

В редакторе и на фронтенде можно вывести блок с сообщением и кнопку обновления данных вручную.

Это значительно улучшит UX, особенно при нестабильном соединении или проблемах с API.

Заключение по теме

Создание динамического контейнера для Gutenberg блоков с поддержкой внешних данных — мощный инструмент для разработчиков WordPress. Такой подход позволяет создавать более интерактивные и актуальные блоки, улучшая пользовательский опыт и при этом сохраняя производительность.

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