WordPress Gutenberg — мощный редактор, который позволяет создавать блоки контента для удобного редактирования. В этой статье мы рассмотрим, как создавать динамические блоки, которые отображают данные, получаемые через REST API. Это особенно полезно, если нужно выводить актуальную информацию, например, последние записи, данные с внешних сервисов или результаты вычислений в реальном времени.
Что такое динамические блоки в Gutenberg и зачем они нужны
Динамические блоки — это блоки, отображение которых формируется не в редакторе, а на этапе рендера страницы. В отличие от статических, они позволяют выводить актуальные данные, которые могут меняться со временем или зависеть от внешних источников.
Например, блок с последними отзывами, которые обновляются автоматически, или блок с курсами валют, получаемыми через REST API. Такой подход улучшает взаимодействие с пользователем и расширяет функциональность сайта.
Для создания динамического блока применяется PHP-функция render_callback, которая отвечает за вывод HTML на фронтенде, и клиентский код на JavaScript для редактора.
Создание простого динамического блока: базовый пример
Начнем с простого примера. Допустим, нужно вывести блок, показывающий количество опубликованных записей.
В файле плагина или темы регистрируем блок так:
function wpapp_register_dynamic_block() {
register_block_type('wpapp/dynamic-post-count', [
'render_callback' => 'wpapp_render_dynamic_post_count'
]);
}
add_action('init', 'wpapp_register_dynamic_block');
function wpapp_render_dynamic_post_count() {
$count = wp_count_posts()->publish;
return '<div class="wpapp-post-count">Опубликовано записей: ' . esc_html($count) . '</div>';
}Затем создаем JavaScript-файл, который зарегистрирует блок в редакторе с названием и иконкой. В редакторе блок просто отображает заголовок, так как реальный контент формируется сервером.
Интеграция с REST API: получение данных для блока
Для более сложных сценариев нам понадобится получать данные из REST API. Можно использовать стандартный WordPress REST API или внешний сервис.
Например, сделаем блок, который выводит последние 3 записи с заголовками и ссылками, получая данные через REST API.
PHP часть — рендеринг блока, который просто выводит контейнер:
function wpapp_register_latest_posts_block() {
register_block_type('wpapp/latest-posts', [
'render_callback' => 'wpapp_render_latest_posts_block'
]);
}
add_action('init', 'wpapp_register_latest_posts_block');
function wpapp_render_latest_posts_block() {
return '<div class="wpapp-latest-posts"></div>';
}JavaScript часть для редактора и фронтенда, которая через fetch получит данные из REST API и выведет список:
const { registerBlockType } = wp.blocks;
const { useState, useEffect } = wp.element;
registerBlockType('wpapp/latest-posts', {
title: 'Последние записи',
icon: 'list-view',
category: 'widgets',
edit: () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('/wp-json/wp/v2/posts?per_page=3')
.then(res => res.json())
.then(data => setPosts(data))
.catch(() => setPosts([]));
}, []);
return (
<div>
<h3>Последние записи</h3>
<ul>
{posts.map(post => (
<li key={post.id}>
<a href={post.link}>{post.title.rendered}</a>
</li>
))}
</ul>
</div>
);
},
save: () => {
return null; // Динамический блок, рендерится сервером
}
});Так блок в редакторе и на сайте будет показывать последние публикации, получаемые через REST API.
Обработка пользовательских параметров в динамическом блоке
Динамические блоки могут иметь настройки, которые пользователь задает в редакторе. Например, количество выводимых записей или категория.
Добавим атрибут postsToShow с дефолтным значением 3:
registerBlockType('wpapp/latest-posts', {
attributes: {
postsToShow: {
type: 'number',
default: 3
}
},
edit: (props) => {
const { attributes: { postsToShow }, setAttributes } = props;
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch(`/wp-json/wp/v2/posts?per_page=${postsToShow}`)
.then(res => res.json())
.then(data => setPosts(data))
.catch(() => setPosts([]));
}, [postsToShow]);
return (
<div>
<label>Количество записей:</label>
<input
type="number"
value={postsToShow}
onChange={e => setAttributes({ postsToShow: +e.target.value })}
min={1}
max={10}
/>
<ul>
{posts.map(post => (
<li key={post.id}>
<a href={post.link}>{post.title.rendered}</a>
</li>
))}
</ul>
</div>
);
},
save: () => null
});В PHP-функции рендеринга можно получить эти атрибуты и при необходимости использовать для вывода. В нашем случае по умолчанию выводим контейнер — контент формируется на фронтенде.
Плагины для работы с REST API и динамическими блоками
Для упрощения разработки можно использовать готовые плагины и библиотеки:
- WP REST API Controller — позволяет настраивать доступ и поля REST API без кода.
- ACF to REST API — расширяет стандартный API для работы с полями Advanced Custom Fields.
- Lazy Blocks — визуальный конструктор Gutenberg-блоков с поддержкой динамических блоков.
Используя эти инструменты, вы можете быстро создавать сложные блоки с динамическим содержимым.
Советы по безопасности и производительности
При работе с динамическими блоками и REST API важно учитывать несколько аспектов:
- Используйте
esc_htmlи другие функции экранирования для защиты от XSS. - Кешируйте результаты, если данные редко меняются, чтобы снизить нагрузку на сервер.
- Ограничивайте количество возвращаемых записей и используйте пагинацию при необходимости.
- Проверяйте права доступа пользователя, если выводите приватные данные через API.
Заключение
Динамические блоки с использованием REST API позволяют создавать гибкий и актуальный контент в Gutenberg. Они расширяют возможности редактора и повышают интерактивность сайта. В статье мы рассмотрели базовые приемы, примеры кода на PHP и JavaScript, а также дали рекомендации по безопасности и производительности.
Используйте эти знания для улучшения своих проектов на WordPress, создавая удобные и функциональные блоки, которые будут радовать пользователей и упрощать работу редакторов.