Как динамически изменить класс Gutenberg блока в WordPress

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

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

Статичные классы блоков ограничивают возможности стилизации и интерактивности. Динамическое изменение классов позволяет:

• Менять внешний вид блока в зависимости от состояния или параметров;
• Подключать разные CSS-стили и скрипты без дублирования блоков;
• Оптимизировать нагрузку, загружая нужные стили только для определённых вариантов блока;
• Обеспечивать гибкость для разработчиков тем и плагинов.

Например, в плагине Clearfy Pro из wpshop.ru используются подобные техники для улучшения кастомизации блоков.

Добавление динамического класса через save-функцию блока

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

Пример создания блока с динамическим классом в save-функции:

const { registerBlockType } = wp.blocks;

registerBlockType('wpblock/dynamic-class', {
  title: 'Динамический класс',
  attributes: {
    isImportant: { type: 'boolean', default: false },
  },
  edit: (props) => {
    const { attributes, setAttributes } = props;
    return (
      wp.element.createElement('div', {
        className: 'wpblock-dynamic-class',
        onClick: () => setAttributes({ isImportant: !attributes.isImportant }),
      }, 'Кликните для переключения класса')
    );
  },
  save: (props) => {
    const { attributes } = props;
    const className = attributes.isImportant ? 'wpblock-dynamic-class important' : 'wpblock-dynamic-class';
    return wp.element.createElement('div', { className }, 'Содержимое блока');
  },
});

При клике переключается атрибут isImportant и соответственно класс блока меняется.

Динамические классы в server-side рендеринге (динамические блоки)

Если блок динамический (server-side), то класс можно менять прямо в PHP-функции рендеринга.

Пример PHP кода для динамического блока с классом:

function wpblock_render_dynamic_class_block( $attributes ) {
  $class = 'wpblock-dynamic-class';

  if ( ! empty( $attributes['isImportant'] ) ) {
    $class .= ' important';
  }

  return sprintf(
    '<div class="%s">Содержимое динамического блока</div>',
    esc_attr( $class )
  );
}

register_block_type( 'wpblock/dynamic-class', [
  'render_callback' => 'wpblock_render_dynamic_class_block',
  'attributes' => [
    'isImportant' => [ 'type' => 'boolean', 'default' => false ],
  ],
]);

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

Использование фильтра render_block для изменения классов любых блоков

Иногда нужно изменить класс уже сгенерированного блока из любого плагина или темы. Для этого есть фильтр render_block, который позволяет модифицировать HTML блока перед выводом.

Пример функции, добавляющей класс wpblock-highlight ко всем блокам core/paragraph:

function wpblock_add_class_to_paragraph_block( $block_content, $block ) {
  if ( $block['blockName'] === 'core/paragraph' ) {
    $block_content = str_replace(
      '<p',
      '<p class="wpblock-highlight"',
      $block_content
    );
  }
  return $block_content;
}
add_filter( 'render_block', 'wpblock_add_class_to_paragraph_block', 10, 2 );

Такой подход полезен для быстрого внедрения стилей без правки исходников блока.

Советы по организации стилей и классов

Для удобства и масштабируемости рекомендуем:

• Использовать префиксы в классах, например, wpblock-important, чтобы избежать конфликтов.
• Включать CSS-модули или scss с переменными для разных состояний блоков.
• Подключать стили через wp_enqueue_style только когда блок используется, чтобы не перегружать страницу.
• Использовать JavaScript для динамической смены классов в редакторе и на фронтенде, если требуется интерактивность.

Пример подключения CSS для динамических классов

function wpblock_enqueue_block_assets() {
  wp_enqueue_style(
    'wpblock-dynamic-class-style',
    plugins_url( 'css/dynamic-class.css', __FILE__ ),
    [],
    '1.0'
  );
}
add_action( 'enqueue_block_assets', 'wpblock_enqueue_block_assets' );

В файле dynamic-class.css описываем стили для классов:

.wpblock-dynamic-class { background: #f0f0f0; padding: 10px; }
.wpblock-dynamic-class.important { background: #ffeb3b; }

Вывод

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

Если хотите проверить работу блоков с динамическими классами, рекомендую использовать плагины с возможностью настройки атрибутов, например, Expert Review из wpshop.ru, чтобы быстро прототипировать и расширять логику.