С развитием редактора Gutenberg в WordPress появляется всё больше возможностей для гибкой верстки контента с помощью блоков. Однако, чтобы контент смотрелся красиво на всех устройствах, необходимо создавать адаптивные контейнеры, которые автоматически подстраиваются под размер экрана. В этой статье мы подробно разберём, как создать такой адаптивный контейнер для Gutenberg, используя плагины и собственный код.
Почему важна адаптивность в Gutenberg: ключевые аспекты
Адаптивность — это основа современного веб-дизайна. Без неё страницы будут плохо выглядеть на мобильных устройствах и планшетах, что негативно скажется на удобстве пользователей и SEO. В Gutenberg каждый блок по умолчанию имеет свои стили, но для сложных макетов часто требуется оборачивать блоки в кастомные контейнеры с адаптивным поведением.
Адаптивный контейнер позволяет:
- Управлять шириной и отступами в зависимости от ширины экрана.
- Сохранять читаемость и эстетичность контента на любых устройствах.
- Облегчать стилизацию и поддержку блоков.
Без адаптивного контейнера блоки могут выходить за пределы экрана или сжиматься до нечитабельного размера.
Примеры проблем без адаптивного контейнера
Если вы вставляете в контент блок с фиксированной шириной, на маленьком экране он может не поместиться. Например, таблицы или изображения с заданной шириной часто требуют обёртки с возможностью прокрутки или сжатием. Создание собственного адаптивного контейнера решает эти проблемы.
Создание адаптивного контейнера с помощью плагина
Для начала рассмотрим, как можно реализовать адаптивный контейнер с помощью существующих плагинов:
Плагин Advanced Gutenberg
Этот плагин расширяет возможности редактора, добавляя дополнительные блоки и настройки. В частности, есть блок "Контейнер", который поддерживает настройку адаптивных отступов и ширины.
Чтобы использовать его:
- Установите и активируйте плагин Advanced Gutenberg.
- В редакторе выберите блок "Контейнер".
- Настройте параметры ширины, отступов и адаптивности в панели справа.
Плагин автоматически добавит необходимые CSS-классы и медиа-запросы.
Плагин Kadence Blocks
Kadence Blocks — популярный набор блоков с расширенными функциями адаптивности. Контейнеры в Kadence можно настраивать по ширине, внутренним отступам и отображению на разных устройствах.
Основные возможности:
- Настройка максимальной ширины в пикселях или процентах.
- Управление отступами и маргинами с учётом экранов.
- Возможность скрывать блоки на десктопах, планшетах или телефонах.
Такой подход позволяет быстро создавать адаптивные макеты без написания кода.
Создание собственного адаптивного контейнера для Gutenberg: пошагово
Если вы хотите полный контроль и минимальный вес, лучше создать свой адаптивный контейнер с помощью PHP и CSS. Ниже представлен пример, как это сделать.
1. Регистрация блока контейнера в WordPress
Для этого добавим функцию в файл вашего плагина или темы (functions.php):
function wpplugins_register_adaptive_container_block() {
wp_register_script(
'wpplugins-adaptive-container-block',
plugins_url('block.js', __FILE__),
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(plugin_dir_path(__FILE__) . 'block.js')
);
register_block_type('wpplugins/adaptive-container', array(
'editor_script' => 'wpplugins-adaptive-container-block',
'render_callback' => 'wpplugins_render_adaptive_container'
));
}
add_action('init', 'wpplugins_register_adaptive_container_block');Здесь мы регистрируем блок с именем wpplugins/adaptive-container и указываем callback для рендеринга на фронтенде.
2. Создание JS-файла блока block.js
В этом файле мы определяем, как блок будет отображаться в редакторе:
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
registerBlockType('wpplugins/adaptive-container', {
title: 'Адаптивный контейнер',
icon: 'screenoptions',
category: 'layout',
edit() {
return (
wp.element.createElement('div', { className: 'wpplugins-adaptive-container' },
wp.element.createElement(InnerBlocks)
)
);
},
save() {
return (
wp.element.createElement('div', { className: 'wpplugins-adaptive-container' },
wp.element.createElement(InnerBlocks.Content)
)
);
}
});Блок просто выводит div с классом wpplugins-adaptive-container, внутри которого располагаются вложенные блоки.
3. Добавление адаптивных стилей CSS
Чтобы контейнер был адаптивным, добавим стили. Например, в файл style.css темы или плагина:
.wpplugins-adaptive-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
@media (max-width: 1024px) {
.wpplugins-adaptive-container {
padding: 15px;
max-width: 90%;
}
}
@media (max-width: 768px) {
.wpplugins-adaptive-container {
padding: 10px;
max-width: 95%;
}
}Эти простые стили ограничивают максимальную ширину контейнера, центрируют его и уменьшают отступы на меньших экранах.
Дополнительные возможности: кастомные атрибуты и управление стилями
Чтобы сделать блок более гибким, можно добавить в него атрибуты, например, для выбора ширины или цветов.
Добавление атрибутов в блок
В block.js расширим регистрацию:
attributes: {
maxWidth: {
type: 'string',
default: '1200px'
},
padding: {
type: 'string',
default: '20px'
}
},И в функции edit добавить контролы для выбора значений с помощью компонента @wordpress/components.
Рендеринг с учётом атрибутов
В PHP-функции wpplugins_render_adaptive_container можно динамически вставлять инлайн-стили:
function wpplugins_render_adaptive_container($attributes, $content) {
$max_width = isset($attributes['maxWidth']) ? esc_attr($attributes['maxWidth']) : '1200px';
$padding = isset($attributes['padding']) ? esc_attr($attributes['padding']) : '20px';
return sprintf(
'<div class="wpplugins-adaptive-container" style="max-width:%s; padding:%s; margin:0 auto; box-sizing:border-box;">%s</div>',
$max_width,
$padding,
$content
);
}Таким образом, пользователь сможет управлять параметрами контейнера прямо из редактора.
Тестирование и отладка адаптивного контейнера
После создания блока обязательно тестируйте его на разных устройствах и браузерах. Для этого пригодятся инструменты разработчика в Chrome, Firefox или Edge, где можно переключаться между эмуляцией разных экранов.
Обратите внимание на следующие моменты:
- Корректное масштабирование и отступы.
- Отсутствие горизонтального скролла без необходимости.
- Правильное отображение вложенных блоков, особенно изображений, таблиц и списков.
Если возникнут проблемы, используйте CSS-свойства overflow, word-wrap и медиазапросы для точной настройки.
Заключение: преимущества собственного адаптивного контейнера для Gutenberg
Создание собственного адаптивного контейнера позволяет максимально гибко управлять версткой контента на сайте WordPress. Вы получаете контроль над стилями, возможность расширять функциональность и оптимизировать пользовательский опыт на любых устройствах.
Используйте предложенные примеры и расширяйте их под ваши задачи, чтобы создавать современные и удобные сайты на базе WordPress с редактором Gutenberg.