Как добавить поддержку Gutenberg-блоков в своей теме WordPress

Автор: Диана Морозова | Опубликовано: 26.01.2026

Понимание Gutenberg и поддержка блоков в теме WordPress

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

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

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

Основные преимущества поддержки Gutenberg в теме

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

Как добавить базовую поддержку блоков в functions.php вашей темы

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

function wppremium_add_gutenberg_support() {
    add_theme_support( 'align-wide' ); // поддержка широких и полноширинных блоков
    add_theme_support( 'editor-styles' ); // подключение стилей редактора
    add_theme_support( 'wp-block-styles' ); // стили стандартных блоков
    add_theme_support( 'responsive-embeds' ); // адаптивные встроенные видео и другие медиа
}
add_action( 'after_setup_theme', 'wppremium_add_gutenberg_support' );

Эти параметры обеспечивают базовую поддержку ключевых возможностей редактора:

align-wide — ширина блоков может быть больше контентной области, что даёт больше свободы дизайну.
editor-styles — подключение кастомных стилей, чтобы визуализация в админке соответствовала сайту.
wp-block-styles — подключение стандартных стилей блоков WordPress.
responsive-embeds — корректная адаптивная работа встроенных медиа (видео, iframe и т.д.).

Как подключить стили редактора для Gutenberg

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

function wppremium_enqueue_block_editor_styles() {
    wp_enqueue_style( 'wppremium-editor-style', get_template_directory_uri() . '/editor-style.css', array(), '1.0' );
}
add_action( 'enqueue_block_editor_assets', 'wppremium_enqueue_block_editor_styles' );

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

Например:

h2 {
    font-size: 28px;
    color: #333333;
    margin-bottom: 20px;
}

p {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
}

Добавление кастомных стилей и вариантов блоков (Block Styles)

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

Добавим два кастомных стиля для кнопок:

function wppremium_register_block_styles() {
    register_block_style( 'core/button', array(
        'name'  => 'wppremium-red-button',
        'label' => __( 'Красная кнопка', 'wppremium' ),
    ) );

    register_block_style( 'core/button', array(
        'name'  => 'wppremium-outline-button',
        'label' => __( 'Контурная кнопка', 'wppremium' ),
    ) );
}
add_action( 'init', 'wppremium_register_block_styles' );

Далее в файле стилей фронтенда (обычно style.css) нужно определить соответствующие классы:

.is-style-wppremium-red-button {
    background-color: #d63638;
    color: #fff;
    border: none;
}

.is-style-wppremium-outline-button {
    background-color: transparent;
    color: #d63638;
    border: 2px solid #d63638;
}

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

Подключение шаблонов блоков (Block Templates) для упрощения создания контента

Можно заранее задать структуру блоков для определённых типов записей или страниц с помощью шаблонов блоков. Это особенно удобно для сайтов с повторяющейся структурой контента.

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

function wppremium_register_block_templates() {
    $post_type_object = get_post_type_object( 'page' );
    $post_type_object->template = array(
        array( 'core/heading', array(
            'level' => 2,
            'placeholder' => 'Введите заголовок раздела…',
        ) ),
        array( 'core/paragraph', array(
            'placeholder' => 'Введите текст…',
        ) ),
        array( 'core/image', array() ),
    );
    $post_type_object->template_lock = false; // можно менять структуру
}
add_action( 'init', 'wppremium_register_block_templates' );

Теперь при создании новой страницы в редакторе Gutenberg будет автоматически подставляться данный набор блоков, что существенно ускоряет работу контент-менеджеров.

Оптимизация загрузки стилей Gutenberg с помощью плагина Clearfy Pro

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

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

Заключение по теме поддержки Gutenberg в теме WordPress

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

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

Реализуйте эти рекомендации в своих темах, и вы получите гибкий, современный и удобный сайт на WordPress с полной интеграцией Gutenberg.