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

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

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

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

• Сделать контент визуально гармоничным с темой сайта.
• Улучшить читаемость и UX для посетителей.
• Оптимизировать отображение на разных устройствах.
• Добавить уникальные эффекты и анимации.

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

Как правильно подключать кастомные стили для Gutenberg блоков

Стили для блоков нужно подключать отдельно для фронтенда и редактора, чтобы визуализация была консистентной. Для этого в functions.php вашей темы или плагина используйте две функции:

function wpskins_enqueue_block_styles() {
    wp_enqueue_style('wpskins-block-styles', get_template_directory_uri() . '/css/block-styles.css', array('wp-block-library'), '1.0');
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_block_styles');

function wpskins_enqueue_block_editor_styles() {
    wp_enqueue_style('wpskins-block-editor-styles', get_template_directory_uri() . '/css/block-editor-styles.css', array('wp-edit-blocks'), '1.0');
}
add_action('enqueue_block_editor_assets', 'wpskins_enqueue_block_editor_styles');

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

Особенности CSS селекторов для Gutenberg блоков

Каждый блок Gutenberg имеет уникальные CSS-классы, по которым можно таргетировать стили. Например, блок абзаца имеет класс wp-block-paragraph, заголовок — wp-block-heading, а пользовательские блоки — свои классы.

Чтобы изменить стиль, нужно использовать селекторы с префиксом .wp-block-. Например, чтобы изменить цвет текста в абзацах:

.wp-block-paragraph {
    color: #333333;
    font-size: 18px;
}

Если нужно изменить стили внутри конкретного блока, например, добавить отступы у блока группы:

.wp-block-group {
    padding: 20px;
    background-color: #f9f9f9;
}

Используйте инструменты разработчика в браузере (DevTools), чтобы смотреть структуру и классы блоков.

Как создавать кастомные стили для собственных Gutenberg блоков

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

register_block_type('wpskins/custom-block', array(
    'editor_script' => 'wpskins-block-editor-script',
    'style' => 'wpskins-block-style',
    'editor_style' => 'wpskins-block-editor-style',
    'supports' => array(
        'customClassName' => true,
        'className' => true,
    ),
));

Также можно добавить variations или styles для выбора разных вариантов оформления блока прямо в редакторе.

Использование плагинов для упрощения стилизации Gutenberg блоков

Существует несколько полезных плагинов, которые упрощают работу со стилями блоков:

• Advanced Gutenberg — расширяет возможности редактирования и добавляет новые стили и блоки.
• EditorsKit — добавляет дополнительные настройки для блоков, в том числе кастомные CSS классы.
• Block Styles — позволяет легко создавать и подключать собственные стили для стандартных блоков.

Для интеграции с вашим сайтом, например, можно использовать Clearfy Pro, который помогает оптимизировать загрузку стилей и отключить ненужные CSS от плагинов, что ускорит сайт.

Практический пример: добавление уникального стиля для блока цитаты

Допустим, нужно изменить стиль стандартного блока цитаты wp-block-quote, чтобы она выглядела в стиле «выделенной карточки» с тенями и отступами.

.wp-block-quote {
    background-color: #fff8dc;
    border-left: 5px solid #ffb347;
    padding: 20px 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-style: italic;
    color: #6a4e42;
}

Подключите этот код в файл block-styles.css, который вы зарегистрировали ранее. Цитаты на сайте сразу приобретут новый стиль, не нарушая работу редактора.

Как избежать конфликтов CSS при изменении стилей Gutenberg блоков

Часто стили плагинов или темы могут конфликтовать с вашими кастомными. Чтобы избежать проблем, используйте:

• БЭМ-методику для своих классов.
• Более специфичные селекторы, например .wp-block-quote.custom-style.
• Используйте !important с осторожностью, только если без него не получается.
• Подключайте стили в правильном порядке, чтобы ваши стили были последними.

Рекомендуется тестировать изменения на разных устройствах и браузерах.

Автоматизация управления стилями блоков с помощью WPSkin

Для динамического управления стилями блоков можно использовать подходы из WP Skin. С помощью него можно создавать динамические скины и менять стили блоков в зависимости от условий, например, времени дня, пользователя или типа записи.

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