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

Автор: Степан Панин | Опубликовано: 10.04.2026

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

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

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

Gutenberg по умолчанию предлагает гибкую сетку и базовые настройки, но часто требуется создавать блоки с уникальным поведением на разных экранах. Для этого нужно учитывать CSS медиа-запросы, динамическое изменение стилей и иногда логику в JS.

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

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

Создание базового кастомного блока Gutenberg

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

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

wp.blocks.registerBlockType('wordpressa/adaptive-block', {
  title: 'Адаптивный блок',
  icon: 'layout',
  category: 'layout',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },
  edit: function(props) {
    function onChangeContent(newContent) {
      props.setAttributes({ content: newContent });
    }
    return (
      wp.element.createElement(
        'p',
        { className: props.className },
        wp.element.createElement(wp.blockEditor.RichText, {
          tagName: 'p',
          onChange: onChangeContent,
          value: props.attributes.content,
          placeholder: 'Введите текст...'
        })
      )
    );
  },
  save: function(props) {
    return wp.element.createElement(wp.blockEditor.RichText.Content, {
      tagName: 'p',
      value: props.attributes.content
    });
  },
});

Этот блок создаёт простой параграф с возможностью редактирования текста.

Добавление адаптивных стилей

Чтобы блок корректно отображался на разных устройствах, нужно добавить CSS с медиа-запросами. Хорошей практикой будет загрузка стилей отдельным CSS-файлом, подключаемым через enqueue_block_assets в PHP.

Создайте файл adaptive-block-style.css с таким содержимым:

.wp-block-wordpressa-adaptive-block p {
  font-size: 18px;
  margin: 20px 0;
}
@media (max-width: 768px) {
  .wp-block-wordpressa-adaptive-block p {
    font-size: 16px;
    margin: 15px 0;
  }
}
@media (max-width: 480px) {
  .wp-block-wordpressa-adaptive-block p {
    font-size: 14px;
    margin: 10px 0;
  }
}

Далее добавьте подключение этого файла в функции темы или плагина:

function wordpressa_enqueue_block_assets() {
  wp_enqueue_style(
    'wordpressa-adaptive-block-style',
    plugins_url('adaptive-block-style.css', __FILE__) . '?ver=1.0',
    array(),
    '1.0'
  );
}
add_action('enqueue_block_assets', 'wordpressa_enqueue_block_assets');

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

Добавление адаптивных настроек блока в редакторе

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

В edit-функции добавим контролы для этих параметров:

const { InspectorControls } = wp.blockEditor;
const { PanelBody, RangeControl } = wp.components;

edit: function(props) {
  const { attributes, setAttributes, className } = props;

  return (
    <>
      <InspectorControls>
        <PanelBody title="Настройки мобильного отображения">
          <RangeControl
            label="Размер шрифта (мобайл)"
            value={attributes.fontSizeMobile}
            onChange={(value) => setAttributes({ fontSizeMobile: value })}
            min={10}
            max={30}
          />
          <RangeControl
            label="Отступы сверху и снизу (мобайл)"
            value={attributes.marginMobile}
            onChange={(value) => setAttributes({ marginMobile: value })}
            min={0}
            max={50}
          />
        </PanelBody>
      </InspectorControls>
      <wp.blockEditor.RichText
        tagName="p"
        className={className}
        onChange={(content) => setAttributes({ content })}
        value={attributes.content}
        placeholder="Введите текст..."
        style={{
          fontSize: attributes.fontSizeMobile ? attributes.fontSizeMobile + 'px' : undefined,
          marginTop: attributes.marginMobile ? attributes.marginMobile + 'px' : undefined,
          marginBottom: attributes.marginMobile ? attributes.marginMobile + 'px' : undefined,
        }}
      />
    </>
  );
},

В save-функции нужно сохранить атрибуты и вывести inline-стили:

save: function(props) {
  const { content, fontSizeMobile, marginMobile } = props.attributes;
  const style = {
    fontSize: fontSizeMobile ? fontSizeMobile + 'px' : undefined,
    marginTop: marginMobile ? marginMobile + 'px' : undefined,
    marginBottom: marginMobile ? marginMobile + 'px' : undefined,
  };
  return wp.element.createElement(
    'p',
    { style },
    content
  );
},

Оптимизация загрузки стилей и скриптов блока

Не всегда нужно грузить стили и скрипты для блока на всех страницах. Если ваш блок используется редко, разумно подключать ресурсы только там, где он есть. Для этого можно использовать условие с has_block() в PHP:

function wordpressa_enqueue_block_assets_conditional() {
  if (is_singular() && has_block('wordpressa/adaptive-block')) {
    wp_enqueue_style('wordpressa-adaptive-block-style', plugins_url('adaptive-block-style.css', __FILE__));
  }
}
add_action('wp_enqueue_scripts', 'wordpressa_enqueue_block_assets_conditional');

Так вы снизите нагрузку и ускорите загрузку страниц без блока.

Пример использования плагина Clearfy Pro для оптимизации блоков

Если вы используете плагин Clearfy Pro от WPSHOP, он поможет отключать ненужные скрипты и стили на страницах без блоков, а также оптимизировать работу редактора.

Clearfy Pro позволяет управлять загрузкой ресурсов и оптимизировать работу Gutenberg, что особенно полезно при использовании кастомных блоков с адаптивными настройками.

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

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

Также рекомендуется проверять производительность и корректность работы блока с помощью плагинов отладки, например Query Monitor или Log Deprecated Notices.

Для комплексного тестирования можно использовать WPCommunity — плагин для организации сообщества на сайте, где пользователи могут оставлять отзывы и замечания по блокам.

Итог

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

Если хотите расширить возможности редактора, обратите внимание на плагины от WPSHOP, такие как Clearfy Pro или WPRemark, которые помогут сделать работу с контентом ещё удобнее и эффективнее.