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

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

Что такое динамические блоки Gutenberg и зачем они нужны

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

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

Как зарегистрировать динамический блок с помощью register_block_type

Для создания динамического блока в WordPress нужно зарегистрировать блок на стороне PHP с указанием callback-функции, которая будет генерировать HTML для фронтенда.

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

function wpmart_register_dynamic_block() {
    register_block_type('wpmart/dynamic-latest-posts', [
        'render_callback' => 'wpmart_render_dynamic_latest_posts',
        'attributes'      => [
            'postsToShow' => [
                'type' => 'number',
                'default' => 5
            ]
        ]
    ]);
}
add_action('init', 'wpmart_register_dynamic_block');

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

Функция рендера динамического контента

Функция wpmart_render_dynamic_latest_posts получает атрибуты блока и формирует HTML, который будет выведен на сайте:

function wpmart_render_dynamic_latest_posts($attributes) {
    $posts_to_show = !empty($attributes['postsToShow']) ? intval($attributes['postsToShow']) : 5;
    $query = new WP_Query([
        'posts_per_page' => $posts_to_show,
        'post_status' => 'publish'
    ]);
    
    if (!$query->have_posts()) {
        return '<p>Записей не найдено.</p>';
    }
    
    $output = '<ul class="wpmart-latest-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= sprintf('<li><a href="%s">%s</a></li>', esc_url(get_permalink()), esc_html(get_the_title()));
    }
    wp_reset_postdata();
    $output .= '</ul>';
    return $output;
}

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

Как добавить поддержку динамического блока в JavaScript

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

Пример простого файла block.js:

const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, RangeControl } = wp.components;

registerBlockType('wpmart/dynamic-latest-posts', {
    title: 'Динамические последние записи',
    icon: 'admin-post',
    category: 'widgets',
    attributes: {
        postsToShow: {
            type: 'number',
            default: 5
        }
    },
    edit: ({ attributes, setAttributes }) => {
        return (
            wp.element.createElement('div', null,
                wp.element.createElement(InspectorControls, null,
                    wp.element.createElement(PanelBody, { title: 'Настройки блока' },
                        wp.element.createElement(RangeControl, {
                            label: 'Количество записей',
                            value: attributes.postsToShow,
                            onChange: (value) => setAttributes({ postsToShow: value }),
                            min: 1,
                            max: 10
                        })
                    )
                ),
                wp.element.createElement('p', null, `Будет отображено последних записей: ${attributes.postsToShow}`)
            )
        );
    },
    save: () => {
        // Поскольку блок динамический, сохраненный контент пустой
        return null;
    }
});

Этот код добавляет в боковую панель редактора контрол для выбора числа отображаемых записей. Фронтенд-отображение формируется на PHP.

Использование плагинов для динамического контента в Gutenberg

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

• Block Options — позволяет добавлять дополнительные настройки и динамический вывод к блокам.
• Clearfy Pro — оптимизационный плагин, который также содержит расширения для управления блоками.

Для более сложных сценариев можно комбинировать собственные блоки с плагинами, такими как WPGPT, чтобы генерировать контент с помощью ИИ прямо в блоках.

Советы и рекомендации по работе с динамическими блоками

Кэширование динамического контента

Поскольку динамические блоки формируются на сервере, при большом количестве посетителей нагрузка на сайт может возрасти. Рекомендуется реализовать кэширование HTML результата, например, с помощью Transient API или внешних кэш-плагинов.

Безопасность и экранирование

Всегда используйте функции WordPress для экранирования вывода: esc_html(), esc_url(), чтобы избежать XSS-уязвимостей.

Тестирование в редакторе и на фронтенде

Обязательно проверяйте, как блок выглядит в редакторе и на сайте. Можно добавить в редактор превью с помощью edit и обеспечить пустой save, если контент полностью динамический.

Пример: динамический блок с произвольным типом записей

Если нужно выводить не только посты, а, например, отзывы (тип записи review), достаточно изменить запрос в PHP:

function wpmart_render_dynamic_reviews($attributes) {
    $posts_to_show = !empty($attributes['postsToShow']) ? intval($attributes['postsToShow']) : 3;
    $query = new WP_Query([
        'post_type' => 'review',
        'posts_per_page' => $posts_to_show,
        'post_status' => 'publish'
    ]);
    
    if (!$query->have_posts()) {
        return '<p>Отзывы отсутствуют.</p>';
    }
    
    $output = '<div class="wpmart-reviews">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<blockquote>' . esc_html(get_the_content()) . '</blockquote>';
        $output .= '<p>— ' . esc_html(get_the_title()) . '</p>';
    }
    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}

Зарегистрируйте такой блок с аналогичной логикой JavaScript для выбора количества отзывов.

Заключение

Динамические блоки Gutenberg — мощный инструмент для создания гибких и актуальных интерфейсов в WordPress. Их реализация требует базовых знаний PHP и JavaScript, но результат стоит усилий: контент автоматически обновляется, а пользователи получают свежую информацию без дополнительных действий.

Если вы предпочитаете готовые решения, рассмотрите плагины с расширенными возможностями динамического контента, такие как Clearfy Pro или интеграции с AI через WPGPT.