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

Автор: Владимир Фомин | Опубликовано: 10.03.2026

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

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

Стандартные стили блоков подходят для большинства сайтов, но могут быть слишком универсальными или не соответствовать уникальному дизайну темы. Кастомизация стилей позволяет:

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

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

Добавление кастомных стилей через файл темы

Самый простой способ изменить стили блоков — добавить CSS в файл style.css вашей темы или в отдельный CSS-файл, подключаемый через functions.php.

Например, чтобы изменить фон и отступы для блока абзаца (<p>), можно добавить:

/* wpskins: стиль для блока абзаца Gutenberg */
.wp-block-paragraph {
    background-color: #f9f9f9;
    padding: 15px;
    border-left: 4px solid #0073aa;
}

Чтобы подключить дополнительный CSS-файл, добавьте в functions.php темы:

function wpskins_enqueue_block_styles() {
    wp_enqueue_style('wpskins-gutenberg-custom', get_stylesheet_directory_uri() . '/gutenberg-custom.css', array('wp-block-library'), '1.0');
}
add_action('enqueue_block_assets', 'wpskins_enqueue_block_styles');

Хук enqueue_block_assets гарантирует, что стили загрузятся как в фронтенде, так и в редакторе.

Изменение стилей блоков в редакторе Gutenberg

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

function wpskins_editor_styles() {
    wp_enqueue_style('wpskins-editor-style', get_stylesheet_directory_uri() . '/editor-style.css', array('wp-edit-blocks'), '1.0');
}
add_action('enqueue_block_editor_assets', 'wpskins_editor_styles');

В файле editor-style.css можно определить стили, которые помогут визуализировать блоки так же, как на сайте.

Кастомизация через JavaScript и фильтры Gutenberg

Для более глубокой кастомизации можно использовать JavaScript, регистрируя кастомные стили блоков или изменяя их атрибуты. Например, добавим свой стиль для блока «Кнопка»:

function wpskins_register_button_styles() {
    wp_register_script(
        'wpskins-block-style',
        get_stylesheet_directory_uri() . '/block-style.js',
        array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'),
        '1.0',
        true
    );
    wp_enqueue_script('wpskins-block-style');
}
add_action('enqueue_block_editor_assets', 'wpskins_register_button_styles');

В файле block-style.js добавим стиль:

wp.domReady(() => {
    wp.blocks.registerBlockStyle('core/button', {
        name: 'wpskins-blue',
        label: 'Синий стиль WPSkins'
    });
});

После этого в редакторе в настройках блока «Кнопка» появится новый стиль, который можно применить.

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

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

Advanced Gutenberg — расширяет возможности редактора, включая стилизацию блоков;
Block Styles — позволяет добавлять и переключать стили для стандартных блоков;
Clearfy Pro — оптимизирует загрузку стилей и скриптов, при этом даёт удобные инструменты для кастомизации.

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

Пример комплексного решения: динамические стили для блока «Цитата»

Допустим, требуется изменить цвет и шрифт блока «Цитата» в зависимости от категории записи. Для этого создадим PHP-функцию, которая добавляет класс к блоку:

function wpskins_dynamic_quote_class($block_content, $block) {
    if ($block['blockName'] === 'core/quote') {
        $category = '';
        if (is_singular()) {
            $categories = get_the_category();
            if (!empty($categories)) {
                $category = 'category-' . esc_attr($categories[0]->slug);
            }
        }
        return str_replace('wp-block-quote', 'wp-block-quote ' . $category, $block_content);
    }
    return $block_content;
}
add_filter('render_block', 'wpskins_dynamic_quote_class', 10, 2);

Далее в CSS зададим стили по классам категорий:

.wp-block-quote.category-news {
    font-style: italic;
    color: #d9534f;
}
.wp-block-quote.category-tutorial {
    font-weight: bold;
    color: #5bc0de;
}

Такой подход позволяет динамически менять оформление блоков в зависимости от контекста, что сложно реализовать только через CSS.

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