Как создать адаптивные блоки в WordPress с помощью Gutenberg

Современный редактор Gutenberg в WordPress открывает отличные возможности для создания уникальных и адаптивных блоков контента. Однако, чтобы блоки правильно отображались на всех устройствах, необходимо учитывать адаптивность и гибкость верстки. В этой статье мы рассмотрим, как создать собственный адаптивный блок для Gutenberg с поддержкой различных экранов, а также приведём примеры кода и рекомендации по оптимизации.

Что такое адаптивные блоки в Gutenberg и зачем они нужны

Адаптивные блоки — это блоки, которые корректно подстраиваются под размер экрана пользователя. Например, на большом экране они могут отображать контент в несколько колонок, а на мобильных устройствах — в одну колонку с изменёнными размерами и отступами. Это важно для удобства чтения и взаимодействия с сайтом.

Без адаптивности блоки могут выглядеть плохо: текст будет слишком мелким или слишком крупным, элементы будут выходить за пределы экрана, что ухудшает UX и может негативно сказаться на SEO.

В Gutenberg адаптивность достигается с помощью CSS-медиа-запросов, динамического добавления классов и использования настроек блока.

Создание базового адаптивного блока для Gutenberg

Начнём с создания простого блока, который будет показывать карточки с изображением и текстом и автоматически переключаться между одноколоночным и двухколоночным режимом в зависимости от ширины экрана.

Для разработки блока используем стандартный JavaScript с React, который лежит в основе Gutenberg.

Структура блока и JavaScript код

const { registerBlockType } = wp.blocks;
const { MediaUpload, RichText, InspectorControls } = wp.blockEditor;
const { Button, PanelBody, RangeControl } = wp.components;

registerBlockType('wpmagazin/adaptive-card', {
    title: 'Адаптивная карточка',
    icon: 'id',
    category: 'layout',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: 'h3',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
        imageUrl: {
            type: 'string',
            default: '',
        },
        columns: {
            type: 'number',
            default: 2,
        },
    },
    edit({ attributes, setAttributes }) {
        const { title, content, imageUrl, columns } = attributes;

        function onSelectImage(media) {
            setAttributes({ imageUrl: media.url });
        }

        return (
            <>
                <InspectorControls>
                    <PanelBody title="Настройки блока">
                        <RangeControl
                            label="Количество колонок"
                            value={columns}
                            onChange={(value) => setAttributes({ columns: value })}
                            min={1}
                            max={3}
                        />
                    </PanelBody>
                </InspectorControls>
                <div className={`wpmagazin-adaptive-card columns-${columns}`}>
                    <MediaUpload
                        onSelect={onSelectImage}
                        allowedTypes={[ 'image' ]}
                        render={({ open }) => (
                            <Button onClick={open} className={!imageUrl ? 'button button-large' : 'image-button'}>
                                { !imageUrl ? 'Загрузить изображение' : <img src={imageUrl} alt="" /> }
                            </Button>
                        )}
                    />
                    <RichText
                        tagName="h3"
                        placeholder="Заголовок"
                        value={title}
                        onChange={(value) => setAttributes({ title: value })}
                    />
                    <RichText
                        tagName="p"
                        placeholder="Описание"
                        value={content}
                        onChange={(value) => setAttributes({ content: value })}
                    />
                </div>
            </>
        );
    },
    save({ attributes }) {
        const { title, content, imageUrl, columns } = attributes;
        return (
            <div className={`wpmagazin-adaptive-card columns-${columns}`}>
                {imageUrl && <img src={imageUrl} alt="" />}
                <h3>{title}</h3>
                <p>{content}</p>
            </div>
        );
    },
});

В этом коде мы создаём блок с настраиваемым количеством колонок, загружаемым изображением и редактируемым текстом.

Добавление CSS для адаптивности

Чтобы блок корректно менял вид на разных устройствах, добавим стили с медиа-запросами.

.wpmagazin-adaptive-card {
    display: grid;
    grid-gap: 20px;
    margin-bottom: 30px;
}

.wpmagazin-adaptive-card.columns-1 {
    grid-template-columns: 1fr;
}

.wpmagazin-adaptive-card.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.wpmagazin-adaptive-card.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.wpmagazin-adaptive-card img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .wpmagazin-adaptive-card.columns-2,
    .wpmagazin-adaptive-card.columns-3 {
        grid-template-columns: 1fr;
    }
}

Эти стили переводят блок из нескольких колонок в одну на узких экранах, что улучшает читаемость и адаптивность.

Дополнительные возможности: динамическая смена стилей через настройки

Вы можете расширить функциональность блока, добавив в настройки выбор цвета фона, отступов или размера шрифта. Это позволит пользователям гибко настраивать внешний вид без кода.

Например, добавим возможность выбрать цвет фона:

attributes: {
    ...
    backgroundColor: {
        type: 'string',
        default: '#ffffff',
    },
},

// В edit
<InspectorControls>
    <PanelBody title="Настройки фона">
        <ColorPalette
            value={backgroundColor}
            onChange={(color) => setAttributes({ backgroundColor: color })}
        />
    </PanelBody>
</InspectorControls>

// В render
<div className={`wpmagazin-adaptive-card columns-${columns}`} style={{ backgroundColor: backgroundColor }}>
    ...
</div>

Для этого понадобятся дополнительные зависимости из пакета wp.components, например, ColorPalette.

Практическое применение и интеграция с плагинами

Если вы используете на сайте плагин Clearfy Pro, он поможет оптимизировать загрузку CSS и JS вашего блока, а также ускорит работу редактора.

Плагин WPStories можно использовать для создания адаптивных историй, которые отлично смотрятся на мобильных устройствах, расширяя возможности взаимодействия с пользователями.

Заключение

Создание адаптивных блоков в Gutenberg — отличный способ улучшить UX вашего сайта на WordPress. Используя встроенные возможности редактора, React и CSS, вы можете создавать гибкие и удобные элементы контента. Важно всегда тестировать блоки на разных устройствах и оптимизировать код для скорости и совместимости.

Если хотите быстро начать с готового решения, обратите внимание на тему JournalX, которая уже включает адаптивные блоки и отлично подходит для информационных сайтов.