Коли у WordPress з'явився блоковий редактор Gutenberg, моя тема, написана ще під класичний редактор, показувала нові блоки як попало: кнопки без стилів, цитати не такі, як на сайті, а в редакторі текст узагалі розтягувався на весь екран. Відтоді Gutenberg став звичайним редактором WordPress, а класичні теми нікуди не зникли – їх просто треба трохи підготувати. Розповім, як це зробити кількома рядками у functions.php і одним файлом theme.json.

Базова підтримка блоків у functions.php

Усі ці рядки додаються у функцію, підчеплену до хука after_setup_theme. Якщо в твоїй темі вона вже є (там, де ти вмикаєш мініатюри чи меню), просто допиши їх туди. Детальніше про цей файл я розповідав у статті розбір файлу functions.php.

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // Стандартні стилі блоків на сайті
    add_theme_support( 'wp-block-styles' );
    // Адаптивні вбудовані відео та фрейми
    add_theme_support( 'responsive-embeds' );
    // Вирівнювання «на ширину» і «на всю ширину»
    add_theme_support( 'align-wide' );
    // Стилі теми всередині редактора
    add_theme_support( 'editor-styles' );
    add_editor_style( 'editor-style.css' );
}

Що тут до чого:

  • wp-block-styles підключає «фірмові» стилі блоків від WordPress: оформлення цитат, таблиць, роздільників. Якщо твоя тема сама все це стилізує, рядок можна не додавати.
  • responsive-embeds змушує відео з YouTube і подібні вставки тримати пропорції на телефоні, а не вилазити за край екрана.
  • align-wide додає блокам на кшталт зображення чи групи кнопки «Широко» і «На всю ширину». Але працюватимуть вони лише тоді, коли твоя тема знає, як ці класи alignwide та alignfull показувати. У мене колись максимальна ширина контенту була жорстко прописана в шаблоні, тож «на всю ширину» просто нічого не робило, доки я не додав для цих класів окремі стилі.
  • editor-styles разом з add_editor_style() підключає файл editor-style.css з теки теми в редактор. Пиши туди ті самі шрифти, кольори й відступи, що й у style.css, і запис у редакторі виглядатиме майже так, як на сайті. Префікси для селекторів додавати не треба, WordPress сам обмежить ці стилі областю редактора.

Кольори, шрифти й ширина через theme.json

Колись кольори та розміри шрифтів для редактора теж задавалися через add_theme_support() з довжелезними масивами. Цей спосіб досі працює, але сьогодні все це зручніше описати у файлі theme.json у корені теми. І ні, для цього не обов'язково переробляти тему на блокову – класична тема з theme.json працює чудово.

Мені це особливо сподобалося, бо в моїй темі кожна категорія записів мала свій колір. Коли я додав ці кольори в палітру, їх стало можна вибирати в редакторі одним клацом, замість того щоб щоразу вписувати код кольору. Ось мінімальний theme.json:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "layout": {
            "contentSize": "720px",
            "wideSize": "1100px"
        },
        "color": {
            "defaultPalette": false,
            "custom": false,
            "palette": [
                { "slug": "primary", "color": "#34687d", "name": "Основний" },
                { "slug": "accent", "color": "#a156b4", "name": "Акцент" },
                { "slug": "light", "color": "#eeeeee", "name": "Світлий" },
                { "slug": "dark", "color": "#444444", "name": "Темний" }
            ]
        },
        "typography": {
            "defaultFontSizes": false,
            "fontSizes": [
                { "slug": "small", "size": "0.875rem", "name": "Малий" },
                { "slug": "medium", "size": "1rem", "name": "Звичайний" },
                { "slug": "large", "size": "1.5rem", "name": "Великий" }
            ]
        }
    }
}

Розберімо по шматочках:

  • layout задає ширину контенту і ширину для вирівнювання «Широко». Саме це і вирішує проблему з текстом на весь екран у редакторі: тепер він має ту ж ширину, що й на сайті.
  • defaultPalette: false ховає стандартні кольори WordPress, а custom: false прибирає вільний вибір кольору. Тоді автори сайту обиратимуть лише з кольорів твоєї теми, і сайт не перетвориться на веселку.
  • palette – твої власні кольори. Поле slug – це внутрішня назва, з якої WordPress зробить CSS-класи на кшталт has-primary-color та змінну --wp--preset--color--primary. Їх можна використовувати і у своїх стилях.
  • fontSizes – розміри шрифтів для випадного списку в редакторі. Мої розміри давно прописані в темі, тож я лишив тут ті самі значення, щоб не було розбіжностей.

Рядок $schema необов'язковий, але з ним редактор коду підказує всі доступні параметри й одразу показує помилки. А якщо твоя тема перекладається на інші мови, назви кольорів і шрифтів у theme.json WordPress теж підхопить для перекладу – як підготувати тему до перекладу, читай тут.

На що звернути увагу

  • Якщо в темі є theme.json, налаштування з нього мають перевагу над старими add_theme_support( 'editor-color-palette' ) та editor-font-sizes. Тримай кольори й розміри в одному місці, щоб потім не шукати, чому зміна не працює.
  • Разом з theme.json WordPress починає сам виводити на сайті трохи стилів для макета й відступів між блоками. Після його додавання переглянь кілька сторінок і, якщо щось зсунулося, підправ це у своєму CSS.
  • Не забувай про очищення кешу: якщо в тебе стоїть плаґін кешування, нові стилі можуть з'явитися на сайті не відразу.

Якщо ж ти тільки починаєш робити тему, глянь серію про те, як створити тему WordPress з нуля. А як блоки Gutenberg можна підлаштовувати вже з боку плаґіна, я показував у статті як додати категорії товарів до блоків WooCommerce, а як змінити HTML будь-якого блоку під час виведення – у статті як змінити посилання на файли у WordPress.

Більше про це – за позначками Gutenberg та Створення тем WordPress.

А ти вже додав/ла theme.json у свою тему чи досі тримаєшся класичного редактора? Пиши в коментарях 🙂