Современный редактор Gutenberg в WordPress позволяет создавать контент с помощью блоков, которые можно настраивать по-разному. В ряде случаев требуется не просто стандартный вид блока, а несколько вариантов верстки, которые пользователь сможет выбирать при вставке блока. В этой статье мы подробно рассмотрим, как реализовать разные варианты верстки (layout) для пользовательских блоков Gutenberg, а также как подключить их к стандартным блокам WordPress.
Почему нужны разные варианты верстки блоков Gutenberg
Часто, когда вы создаёте сложный контент, хочется, чтобы один и тот же блок можно было выводить с разными стилями: например, с картинкой слева или справа, с разными отступами, цветами фона или расположением элементов. Такой подход позволяет сделать редактор более гибким и удобным для пользователей. Кроме того, это снижает количество дублирующихся блоков с похожим функционалом.
В стандартном редакторе WordPress для некоторых блоков в версиях 13.0+ уже реализованы вариации верстки, например, для блока «Галерея» можно выбрать разные шаблоны отображения.
Создание кастомных вариантов верстки даёт разработчику полный контроль над внешним видом и функционалом блоков.
Как создать варианты верстки для пользовательского блока Gutenberg
При регистрации пользовательского блока через registerBlockType можно добавить поддержку вариаций (variations). Каждая вариация — это собственный вариант блока с уникальным названием, атрибутами и версткой.
Пример регистрации вариаций блока:
wpclass_registerBlockType('wpclass/custom-layout-block', {
title: 'Кастомный блок с вариантами',
category: 'widgets',
variations: [
{
name: 'layout-left',
title: 'С картинкой слева',
attributes: { layout: 'left' },
isDefault: true
},
{
name: 'layout-right',
title: 'С картинкой справа',
attributes: { layout: 'right' }
}
],
edit: function(props) {
const { attributes, setAttributes } = props;
return (
<div className={'wpclass-block layout-' + attributes.layout}>
<p>Это блок с версткой: {attributes.layout}</p>
</div>
);
},
save: function(props) {
return (
<div className={'wpclass-block layout-' + props.attributes.layout}>
<p>Это блок с версткой: {props.attributes.layout}</p>
</div>
);
}
});В этом примере мы создали два варианта: layout-left и layout-right, у каждого свой атрибут layout. При вставке блока пользователь сможет выбрать, какой вариант использовать.
Как переключать верстку внутри блока
Чтобы пользователь мог менять вариант верстки в уже добавленном блоке, можно добавить панель настроек с переключателем:
import { PanelBody, RadioControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
function wpclass_Edit(props) {
const { attributes, setAttributes } = props;
return (
<>
<InspectorControls>
<PanelBody title="Выбор верстки" initialOpen={ true }>
<RadioControl
label="Верстка"
selected={ attributes.layout }
options={ [
{ label: 'Слева', value: 'left' },
{ label: 'Справа', value: 'right' },
{ label: 'Центр', value: 'center' },
] }
onChange={ ( layout ) => setAttributes( { layout } ) }
/>
</PanelBody>
</InspectorControls>
<div className={'wpclass-block layout-' + attributes.layout}>
<p>Текущая верстка: {attributes.layout}</p>
</div>
</>
);
}Таким образом, в редакторе будет появляться панель с выбором верстки, а в отображении и сохранении блока мы будем использовать класс, зависящий от выбранного варианта.
Подключение стилей для разных версток
Для корректного отображения нужно прописать CSS, который будет учитывать класс варианта.
Пример стилей:
.wpclass-block.layout-left {
display: flex;
flex-direction: row;
align-items: center;
}
.wpclass-block.layout-left img {
order: 0;
margin-right: 20px;
}
.wpclass-block.layout-right {
display: flex;
flex-direction: row;
align-items: center;
}
.wpclass-block.layout-right img {
order: 1;
margin-left: 20px;
}
.wpclass-block.layout-center {
text-align: center;
}Стили можно подключить как часть вашего плагина или темы, чтобы в публичной части и в редакторе блок выглядел одинаково.
Примеры плагинов с поддержкой вариаций блоков
В каталоге WordPress и у разработчиков встречаются плагины, которые расширяют возможности блоков с помощью вариаций:
- Clearfy Pro — улучшает производительность и оптимизацию, позволяет кастомизировать блоки и их поведение.
- WPClass Cron — помогает создавать автоматические задачи, которые могут влиять на вывод контента блоков.
- Expert Review — плагин для отзывов, где разные варианты верстки блока отзывов очень востребованы.
Использование таких плагинов в связке с собственными вариациями блоков позволяет создавать мощные и гибкие решения.
Как добавить варианты верстки для стандартных блоков WordPress
Если вы хотите расширить стандартные блоки WordPress, например, блок «Обложка» или «Галерея», можно зарегистрировать вариации через JavaScript:
wp.blocks.registerBlockVariation('core/cover', {
name: 'wpclass-cover-dark',
title: 'Темный стиль обложки',
attributes: { className: 'wpclass-cover-dark' },
isDefault: false
});После этого в редакторе появится новый вариант блока с нужной версткой. Для стилизации добавьте CSS по классу wpclass-cover-dark.
Советы по разработке и отладке вариантов верстки
При создании вариаций блоков рекомендуется:
- Использовать уникальные имена вариаций, чтобы избежать конфликтов.
- Хранить стили в отдельных CSS-файлах и подключать их через
wp_enqueue_styleдля фронтенда и редактора. - Тестировать блоки в разных устройствах и браузерах, чтобы верстка была адаптивной.
- Использовать React-функции, предоставляемые Gutenberg, для удобства разработки.
- При необходимости добавлять поддержку переводов для названий вариаций.
Заключение по теме вариантов верстки Gutenberg
Вариации верстки блоков Gutenberg — мощный инструмент, который позволяет создавать более гибкие и удобные для пользователя методы создания контента. Используя описанные методы, вы сможете создавать свои собственные блоки с несколькими вариантами отображения, а также расширять стандартные блоки WordPress.
Для удобства разработки и расширения возможностей редактора рекомендуем обратить внимание на плагины, которые упрощают работу с блоками и вариациями, например, Clearfy Pro и Expert Review.