Редактор Gutenberg в WordPress стал стандартом для создания контента, позволяя добавлять разнообразные блоки. Часто возникает необходимость создавать собственные блоки, которые будут не только функциональными, но и адаптивными — корректно отображаться на разных устройствах. В этой статье мы подробно разберём, как создать адаптивный блок для Gutenberg с учётом современных требований к вёрстке и мобильной оптимизации.
Почему важно создавать адаптивные блоки в Gutenberg
Адаптивность — это ключевой критерий качества сайта в 2024 году. Большинство пользователей заходят с мобильных устройств, и если блоки не адаптированы, контент будет неудобен для восприятия. Встроенные стандартные блоки WordPress уже имеют базовую адаптивность, но при создании кастомных блоков нам нужно самостоятельно позаботиться о корректной вёрстке и стилях.
Кроме того, адаптивные блоки обеспечивают:
- Гибкость в дизайне — блок подстраивается под ширину экрана.
- Оптимальное юзабилити — читаемость и удобство взаимодействия.
- Повышение скорости загрузки — за счёт правильного использования CSS и минимизации медиа-запросов.
Основные техники создания адаптивных блоков в WordPress Gutenberg
Для создания адаптивных блоков нужно объединить навыки JavaScript (React), PHP и CSS. Основой будет создание блока через registerBlockType, а адаптивность обеспечивается через CSS-медиа-запросы и динамическое управление классами.
Регистрация блока с базовой структурой
Для начала создадим базовый блок с названием "wpdeveloper/adaptive-block".
const { registerBlockType } = wp.blocks;const { useBlockProps, RichText } = wp.blockEditor;registerBlockType('wpdeveloper/adaptive-block', { title: 'Адаптивный блок', icon: 'layout', category: 'layout', attributes: { content: { type: 'string', source: 'html', selector: 'p', }, }, edit({ attributes, setAttributes }) { const blockProps = useBlockProps({ className: 'wpdeveloper-adaptive-block' }); return ( <div {...blockProps}> <RichText tagName="p" value={attributes.content} onChange={(content) => setAttributes({ content })} placeholder="Введите текст..." /> </div> ); }, save({ attributes }) { const blockProps = useBlockProps.save({ className: 'wpdeveloper-adaptive-block' }); return <RichText.Content {...blockProps} tagName="p" value={attributes.content} />; },});Этот простой блок выводит редактируемый параграф с классом для стилизации.
Добавление адаптивных стилей
Чтобы блок корректно отображался на разных экранах, применим CSS с медиа-запросами. В файле стилей (например, style.css) добавим:
.wpdeveloper-adaptive-block { padding: 20px; background-color: #f0f0f0; font-size: 18px; line-height: 1.5; max-width: 700px; margin: 0 auto;}@media (max-width: 768px) { .wpdeveloper-adaptive-block { padding: 15px; font-size: 16px; max-width: 90%; }}Здесь мы уменьшаем отступы и шрифт для планшетов и мобильных устройств, а также ограничиваем ширину блока, чтобы избежать слишком широкого текста на больших экранах.
Динамическое управление адаптивностью через атрибуты блока
Иногда нужно дать пользователю возможность самому выбирать, как блок будет вести себя на разных устройствах. Для этого можно добавить атрибуты и контролы в редакторе.
Добавление переключателя для включения/выключения адаптивности
Добавим в блок атрибут isResponsive и переключатель в панели настроек.
const { InspectorControls } = wp.blockEditor;const { PanelBody, ToggleControl } = wp.components;registerBlockType('wpdeveloper/adaptive-block', { attributes: { content: { type: 'string', source: 'html', selector: 'p' }, isResponsive: { type: 'boolean', default: true }, }, edit({ attributes, setAttributes }) { const blockProps = useBlockProps({ className: attributes.isResponsive ? 'wpdeveloper-adaptive-block responsive' : 'wpdeveloper-adaptive-block', }); return ( <> <InspectorControls> <PanelBody title="Настройки адаптивности" initialOpen={true}> <ToggleControl label="Включить адаптивность" checked={attributes.isResponsive} onChange={(value) => setAttributes({ isResponsive: value })} /> </PanelBody> </InspectorControls> <div {...blockProps}> <RichText tagName="p" value={attributes.content} onChange={(content) => setAttributes({ content })} placeholder="Введите текст..." /> </div> </> ); }, save({ attributes }) { const className = attributes.isResponsive ? 'wpdeveloper-adaptive-block responsive' : 'wpdeveloper-adaptive-block'; const blockProps = useBlockProps.save({ className }); return <RichText.Content {...blockProps} tagName="p" value={attributes.content} />; },});Теперь пользователь может отключить адаптивность, если это необходимо.
CSS с условием на класс
В стилях добавим условие на класс responsive:
.wpdeveloper-adaptive-block.responsive { padding: 20px; font-size: 18px; max-width: 700px; margin: 0 auto;}@media (max-width: 768px) { .wpdeveloper-adaptive-block.responsive { padding: 15px; font-size: 16px; max-width: 90%; }}Использование готовых плагинов для расширения адаптивности блоков
Если хочется не создавать блоки с нуля, можно использовать плагины, которые расширяют возможности стандартных блоков и добавляют адаптивные настройки.
Примеры полезных плагинов
- Stackable – Gutenberg Blocks: предоставляет множество адаптивных блоков с настройками для мобильных и десктопных устройств.
- Advanced Gutenberg: расширяет редактор дополнительными блоками и управлением видимостью на разных устройствах.
- Kadence Blocks: мощный набор блоков с адаптивными настройками, включая управление отступами, шрифтами и отображением.
Эти плагины помогут быстро получить адаптивный контент без глубокого программирования.
Тестирование и отладка адаптивных блоков
После создания блока важно тщательно протестировать его на разных устройствах и разрешениях экрана. Для этого можно:
- Использовать встроенные инструменты браузера (DevTools) для переключения мобильных устройств.
- Проверять скорость загрузки и корректность отображения с помощью сервисов вроде Google PageSpeed Insights.
- Протестировать на реальных устройствах — смартфонах, планшетах, ноутбуках.
Особое внимание уделяйте взаимодействию элементов: шрифты должны быть читабельны, кнопки — легко нажимаемы, а изображения — корректно масштабироваться.
Выводы и рекомендации для разработчиков
Создание адаптивных блоков в Gutenberg — это не только возможность расширить функциональность сайта, но и залог удобства пользователей на всех устройствах. Важно соблюдать несколько правил:
- Используйте flexbox и grid для гибкой вёрстки.
- Добавляйте медиа-запросы для стилизации под разные размеры экрана.
- Давайте пользователю возможность настраивать адаптивность, если это оправдано.
- Тестируйте блоки на разных устройствах и в разных браузерах.
- Оптимизируйте CSS и JS, чтобы не замедлять загрузку страниц.
Следуя этим рекомендациям, вы сможете создавать удобные, современные и качественные блоки для WordPress, которые улучшат UX вашего сайта.