Компонент ServerSideRender в WordPress предназначен для серверного рендеринга предварительного просмотра динамических блоков в редакторе. Его использование актуально для блоков, зависящих от серверной логики, особенно когда блоки требуют тесной интеграции с данными и поддерживают обратную совместимость с устаревшим кодом.
Использование ServerSideRender должно рассматриваться как резервный метод для блоков с PHP-логикой. Для новых блоков рекомендуется использовать REST API, чтобы рендеринг в редакторе был реализован на стороне клиента, предоставляя пользователю более качественный опыт.
Установка
Для установки компонента используйте следующую команду:
npm install @wordpress/server-side-render --save
Компонент работает в среде ES2015+, при необходимости можно подключить полифил
@wordpress/babel-preset-defaultдля поддержки устаревших браузеров.
Использование ServerSideRender
Простой пример рендеринга блока core/archives в редакторе:
import ServerSideRender from '@wordpress/server-side-render';
const MyServerSideRender = () => (
<ServerSideRender
block="core/archives"
attributes={{
showPostCounts: true,
displayAsDropdown: false,
}}
/>
);
Свойства компонента ServerSideRender
1. attributes
- Тип:
Object - Описание: Набор атрибутов блока, которые передаются на сервер для рендеринга. Например,
{ displayAsDropdown: true }. - Обязательный параметр: Нет
- Пример использования:
<ServerSideRender
block="core/archives"
attributes={{
displayAsDropdown: true,
showHierarchy: false,
}}
/>
2. block
- Тип:
String - Описание: Идентификатор блока, который нужно отрендерить на сервере (например,
"core/archives"). - Обязательный параметр: Да
- Пример использования:
<ServerSideRender block="core/latest-comments" />
3. className
- Тип:
String - Описание: CSS-класс для оборачивающего элемента блока.
- Обязательный параметр: Нет
- Пример использования:
<ServerSideRender block="core/archives" className="my-custom-class" />
4. httpMethod
- Тип:
String - Описание: Метод HTTP-запроса:
GETилиPOST.POSTпозволяет передавать большие объекты атрибутов, но требует WordPress 5.5 или выше. - По умолчанию:
GET - Пример использования:
<ServerSideRender block="core/archives" httpMethod="POST" />
5. skipBlockSupportAttributes
- Тип:
Boolean - Описание: Убирает атрибуты и стили, добавленные поддержкой блока, чтобы избежать дублирования стилей.
- По умолчанию:
false - Пример использования:
<ServerSideRender block="core/archives" skipBlockSupportAttributes={true} />
6. urlQueryArgs
- Тип:
Object - Описание: Дополнительные аргументы для запроса, например,
{ post_id: 42 }. - Обязательный параметр: Нет
- Пример использования:
<ServerSideRender
block="core/archives"
urlQueryArgs={{ post_id: 15 }}
/>
7. EmptyResponsePlaceholder
- Тип:
Component - Описание: Компонент, который отображается, если API вернул пустой ответ. Получает все переданные пропсы.
- Обязательный параметр: Нет
- Пример использования:
const EmptyPlaceholder = () => <div>Нет данных для отображения</div>;
<ServerSideRender
block="core/archives"
EmptyResponsePlaceholder={EmptyPlaceholder}
/>
8. ErrorResponsePlaceholder
- Тип:
Component - Описание: Компонент, который отображается, если API вернул ошибку. Получает все переданные пропсы.
- Обязательный параметр: Нет
- Пример использования:
const ErrorPlaceholder = ({ response }) => (
<div>Ошибка загрузки: {response.message}</div>
);
<ServerSideRender
block="core/archives"
ErrorResponsePlaceholder={ErrorPlaceholder}
/>
9. LoadingResponsePlaceholder
- Тип:
Component - Описание: Компонент, который отображается, пока API-запрос находится в состоянии загрузки. Получает все переданные пропсы.
- Обязательный параметр: Нет
- Пример использования:
const LoadingPlaceholder = () => <div>Загрузка данных...</div>;
<ServerSideRender
block="core/archives"
LoadingResponsePlaceholder={LoadingPlaceholder}
/>
Пример с настройками и компонентами-заполнителями
import ServerSideRender from '@wordpress/server-side-render';
const MyServerSideRenderExample = () => {
const attributes = {
showPostCounts: true,
displayAsDropdown: true,
};
const EmptyPlaceholder = () => <div>Ничего не найдено</div>;
const ErrorPlaceholder = ({ response }) => (
<div>Произошла ошибка: {response.message}</div>
);
const LoadingPlaceholder = () => <div>Загрузка...</div>;
return (
<ServerSideRender
block="core/archives"
attributes={attributes}
httpMethod="POST"
className="archive-server-side-render"
EmptyResponsePlaceholder={EmptyPlaceholder}
ErrorResponsePlaceholder={ErrorPlaceholder}
LoadingResponsePlaceholder={LoadingPlaceholder}
/>
);
};
Регистрация блока в PHP с использованием render_callback
Когда вы используете ServerSideRender для отображения блока, необходимо зарегистрировать блок на стороне сервера с определенными атрибутами и функцией render_callback. Этот метод PHP используется для генерации HTML содержимого, которое будет отрендерено в редакторе.
Пример регистрации блока в PHP
Пример ниже показывает, как зарегистрировать блок, используя register_block_type и определяя функцию render_callback для генерации HTML. Также здесь указываются атрибуты, которые будут передаваться в блок.
register_block_type(
'core/archives', // Уникальный идентификатор блока.
array(
'api_version' => 3, // Использование актуальной версии API блоков.
'attributes' => array(
'showPostCounts' => array(
'type' => 'boolean',
'default' => false,
),
'displayAsDropdown' => array(
'type' => 'boolean',
'default' => false,
),
),
'render_callback' => 'render_block_core_archives', // Функция для серверного рендеринга.
)
);
Пояснение к параметрам:
- api_version: Устанавливает версию API для блока. Важно использовать актуальную версию (например,
3) для совместимости с новыми функциями. - attributes: Массив атрибутов блока, с типами и значениями по умолчанию, такими как
showPostCountsиdisplayAsDropdown. - render_callback: Указывает на функцию, выполняемую для генерации HTML, который будет отрендерен в редакторе.
Пример функции render_callback
Функция render_callback может выглядеть так:
function render_block_core_archives( $attributes ) {
$show_post_counts = ! empty( $attributes['showPostCounts'] );
$display_as_dropdown = ! empty( $attributes['displayAsDropdown'] );
// Логика генерации HTML содержимого на основе переданных атрибутов
$html = '<div class="my-archive-block">';
if ( $display_as_dropdown ) {
$html .= '<select><option>Option 1</option><option>Option 2</option></select>';
} else {
$html .= '<ul><li>Post 1</li><li>Post 2</li></ul>';
}
$html .= '</div>';
return $html;
}
Функция render_block_core_archives принимает $attributes — атрибуты, переданные из ServerSideRender, и на основе их значений генерирует HTML.
Заключение
Компонент ServerSideRender в WordPress предоставляет гибкость и мощность серверного рендеринга для динамических блоков, сохраняя обратную совместимость и облегчая работу с логикой на стороне сервера.