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

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

Почему важно добавлять поддержку Gutenberg в тему WordPress

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

Добавление поддержки редактора в тему даёт несколько преимуществ:

• Корректное отображение блоков на фронтенде и в редакторе.
• Возможность использовать наборы стилей и настроек блоков.
• Поддержка новых возможностей, таких как группировка блоков, шаблоны и расширенные настройки.

Это улучшает пользовательский опыт и повышает качество создаваемого контента.

Как включить поддержку Gutenberg в functions.php

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

function wp_theme_add_gutenberg_support() {
    // Включаем поддержку редактора блоков
    add_theme_support('align-wide'); // Поддержка широких и полных выравниваний
    add_theme_support('editor-styles'); // Включаем стили для редактора
    add_theme_support('wp-theme-editor-styles'); // Используем стили темы в редакторе
    add_theme_support('responsive-embeds'); // Адаптивные встроенные видео и медиа
}
add_action('after_setup_theme', 'wp_theme_add_gutenberg_support');

Обратите внимание на ключевые параметры:

• align-wide — разрешает блокам занимать ширину больше обычной или на всю ширину экрана.
• editor-styles и wp-theme-editor-styles — позволяют подключать стили темы в редактор, чтобы в визуальном режиме контент выглядел так же, как на сайте.
• responsive-embeds — обеспечивает адаптивность встроенного контента.

Добавляем стили редактора для блоков Gutenberg

Чтобы блоки в редакторе выглядели так же, как и на сайте, нужно подключить специальные CSS-файлы для редактора. Это делается с помощью функции add_editor_style(). Обычно создают отдельный файл, например editor-style.css, в котором описывают стили для блоков.

Пример подключения стилей:

function wp_theme_enqueue_editor_styles() {
    add_editor_style('css/editor-style.css');
}
add_action('after_setup_theme', 'wp_theme_enqueue_editor_styles');

В файле css/editor-style.css следует прописать стили, которые влияют на оформление типичных блоков:

.wp-block {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.wp-block-quote {
    border-left: 4px solid #ccc;
    padding-left: 20px;
    color: #666;
    font-style: italic;
}

Такой подход обеспечивает единый визуальный стиль контента и упрощает создание красивых страниц.

Настройка цветовых палитр и шрифтов для редактора Gutenberg

Для удобства пользователей темы можно определить собственные цветовые палитры и наборы шрифтов, которые будут доступны в редакторе. Это делается с помощью add_theme_support() с параметрами editor-color-palette и editor-font-sizes.

Пример настройки:

function wp_theme_editor_color_and_fonts() {
    add_theme_support('editor-color-palette', array(
        array(
            'name' => 'Основной синий',
            'slug' => 'primary-blue',
            'color' => '#0073aa',
        ),
        array(
            'name' => 'Акцентный красный',
            'slug' => 'accent-red',
            'color' => '#d63638',
        ),
        array(
            'name' => 'Тёмный',
            'slug' => 'dark-gray',
            'color' => '#222222',
        ),
    ));

    add_theme_support('editor-font-sizes', array(
        array(
            'name' => 'Маленький',
            'shortName' => 'S',
            'size' => 12,
            'slug' => 'small',
        ),
        array(
            'name' => 'Средний',
            'shortName' => 'M',
            'size' => 16,
            'slug' => 'medium',
        ),
        array(
            'name' => 'Большой',
            'shortName' => 'L',
            'size' => 24,
            'slug' => 'large',
        ),
    ));
}
add_action('after_setup_theme', 'wp_theme_editor_color_and_fonts');

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

Подключение кастомных блоков и расширение функционала Gutenberg

Если вы хотите добавить в тему собственные блоки или расширить существующие, вам потребуется регистрировать их через JavaScript и PHP. Для этого можно использовать плагин Advanced Custom Fields (ACF) с расширением ACF Blocks или создавать блоки вручную через React и @wordpress/scripts.

Пример добавления простого блока с помощью ACF:

function wp_theme_acf_register_blocks() {
    if(function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name' => 'promo-box',
            'title' => __('Промо-блок'),
            'description' => __('Кастомный промо-блок для акций'),
            'render_template' => get_template_directory() . '/template-parts/blocks/promo-box.php',
            'category' => 'formatting',
            'icon' => 'megaphone',
            'keywords' => array('promo', 'акция'),
        ));
    }
}
add_action('acf/init', 'wp_theme_acf_register_blocks');

В файле promo-box.php вы можете создать кастомную верстку блока, используя данные ACF. Это значительно расширит функционал темы.

Полезные плагины для работы с Gutenberg и темами

Для удобной работы с Gutenberg и кастомизацией тем рекомендуются следующие плагины:

• Advanced Custom Fields (ACF) — для создания пользовательских полей и блоков.
• Block Lab — удобный конструктор кастомных блоков без необходимости писать JS.
• CoBlocks — набор дополнительных блоков для расширения возможностей редактора.
• EditorsKit — расширение редактора с дополнительными инструментами форматирования.

Использование этих инструментов поможет быстро создать функциональную тему с поддержкой всех преимуществ Gutenberg.

Тестирование и отладка поддержки Gutenberg

После добавления поддержки Gutenberg важно тщательно проверить работу темы в редакторе и на фронтенде. Проверьте:

• Правильность отображения всех стандартных блоков.
• Работу кастомных цветов и шрифтов.
• Отсутствие конфликтов со стилями и скриптами.
• Корректность работы расширенных блоков, если они есть.

Для отладки удобно использовать инструменты разработчика браузера и консоль WordPress, а также включать WP_DEBUG для выявления ошибок.

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