Как создать адаптивный Gutenberg блок с поддержкой разных размеров экрана

В современном веб-разработке адаптивность — это один из ключевых факторов успешного сайта. WordPress Gutenberg блоки не исключение: пользователи работают на разных устройствах, и блоки должны корректно отображаться на мобильных, планшетах и десктопах. В этой статье подробно разберем, как создать адаптивный Gutenberg блок с поддержкой различных размеров экрана, используя современные подходы CSS и JavaScript, а также рассмотрим примеры реализации.

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

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

Создание адаптивного блока требует не только правильного CSS, но и продуманной логики рендеринга в редакторе Gutenberg и на фронтенде сайта.

Основы создания адаптивного Gutenberg блока

1. Структура блока и CSS-подходы

Для адаптивности обычно используют медиа-запросы CSS (@media), а также современные CSS модули, такие как Flexbox и Grid. В Gutenberg-блоке нужно добавить стили, которые будут подстраиваться под ширину экрана.

Например, для блока с изображением и текстом можно использовать Flexbox и менять направление элементов в зависимости от ширины:

/* wpblock-responsive-block-style.css */
.wpblock-responsive-block {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 768px) {
  .wpblock-responsive-block {
    flex-direction: column;
  }
}

Эти стили можно подключить как в редакторе, так и на фронтенде.

2. Подключение стилей в Gutenberg

Для подключения CSS используйте функцию wpblock_register_block_type, которая регистрирует блок и прикрепляет стили:

function wpblock_register_responsive_block() {
    wp_register_script(
        'wpblock-responsive-block-script',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'block.js')
    );

    wp_register_style(
        'wpblock-responsive-block-style',
        plugins_url('wpblock-responsive-block-style.css', __FILE__),
        array(),
        filemtime(plugin_dir_path(__FILE__) . 'wpblock-responsive-block-style.css')
    );

    register_block_type('wpblock/responsive-block', array(
        'editor_script' => 'wpblock-responsive-block-script',
        'style' => 'wpblock-responsive-block-style',
    ));
}
add_action('init', 'wpblock_register_responsive_block');

Так стили будут загружаться и в редакторе, и на сайте.

Динамическая адаптивность с помощью JavaScript

Иногда CSS недостаточно, и нужно более гибкое управление, например, менять структуру блока или контент в зависимости от размера экрана. Для этого в JavaScript React-компоненте блока можно использовать хук useEffect и слушать событие изменения окна.

import { useState, useEffect } from '@wordpress/element';

const { __ } = wp.i18n;

const Edit = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const onResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <div className={isMobile ? 'wpblock-responsive-block mobile' : 'wpblock-responsive-block desktop'}>
      {isMobile ? <p>Мобильный вид блока</p> : <p>Десктопный вид блока</p>}
    </div>
  );
};

export default Edit;

Так вы можете менять разметку и логику блока в зависимости от устройства в редакторе.

Пример создания адаптивного блока с изображением и текстом

Рассмотрим простой блок, где слева — картинка, справа — текст, а на мобильных — картинка над текстом.

CSS (wpblock-responsive-block-style.css):

.wpblock-responsive-block {
  display: flex;
  gap: 15px;
}
.wpblock-responsive-block img {
  max-width: 50%;
  height: auto;
}
.wpblock-responsive-block .content {
  flex: 1;
}
@media (max-width: 768px) {
  .wpblock-responsive-block {
    flex-direction: column;
  }
  .wpblock-responsive-block img {
    max-width: 100%;
  }
}

JS (block.js):

import { registerBlockType } from '@wordpress/blocks';
import { MediaUpload, RichText, BlockControls } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';

registerBlockType('wpblock/responsive-block', {
  title: 'Адаптивный блок с изображением и текстом',
  icon: 'format-image',
  category: 'common',
  attributes: {
    imageUrl: { type: 'string' },
    content: { type: 'string', source: 'html', selector: '.content' },
  },
  edit: ({ attributes, setAttributes }) => {
    const { imageUrl, content } = attributes;

    const onSelectImage = (media) => {
      setAttributes({ imageUrl: media.url });
    };

    return (
      <div className="wpblock-responsive-block">
        <MediaUpload
          onSelect={onSelectImage}
          allowedTypes={[ 'image' ]}
          value={imageUrl}
          render={({ open }) => (
            <Button onClick={open} className="button button-large">
              {imageUrl ? <img src={imageUrl} alt="" style={{ maxWidth: '100%' }} /> : 'Выбрать изображение'}
            </Button>
          )}
        />
        <RichText
          tagName="div"
          className="content"
          value={content}
          onChange={(value) => setAttributes({ content: value })}
          placeholder="Введите текст..."
        />
      </div>
    );
  },
  save: ({ attributes }) => {
    const { imageUrl, content } = attributes;
    return (
      <div className="wpblock-responsive-block">
        {imageUrl && <img src={imageUrl} alt="" />}
        <div className="content">{content}</div>
      </div>
    );
  },
});

Оптимизация и подключение стилей

Чтобы не грузить стили на все страницы, если блок используется редко, можно подключать стили динамически. Для этого подойдет библиотека Clearfy Pro от WPSHOP, которая помогает управлять загрузкой скриптов и стилей, отключая их там, где они не нужны. Это ускоряет загрузку сайта и улучшает производительность.

Полезные плагины для работы с адаптивными блоками

Для упрощения создания и настройки адаптивных блоков можно использовать плагины:

• Advanced Custom Fields (ACF) — позволяет создавать блоки с гибкими полями, включая адаптивные настройки.
• Block Lab — удобный конструктор блоков без глубокого программирования.
• Editor Plus — расширяет возможности визуального редактора Gutenberg, включая адаптивные настройки.

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

Рекомендации по тестированию адаптивных блоков

После создания блока обязательно тестируйте его на разных устройствах и браузерах. Используйте инструменты разработчика в Chrome или Firefox, переключаясь между мобильными и десктопными режимами. Следите, чтобы:

• Изображения не выходили за границы блока.
• Текст не становился слишком мелким.
• Интерактивные элементы были доступны и удобны для нажатия на мобильных.

Также полезно проверять скорость загрузки и корректность работы блока при отключенном JavaScript, если это важно.

Выводы

Создание адаптивных Gutenberg блоков — важный навык для современных разработчиков WordPress. Используя CSS медиа-запросы, современные flexbox или grid, а также динамику через React, вы можете создавать блоки, которые отлично смотрятся и работают на любых устройствах.

Подключайте стили правильно, оптимизируйте загрузку с помощью инструментов, например, Clearfy Pro, и тестируйте блоки тщательно.

Такой подход поможет улучшить UX вашего сайта и повысить его эффективность.