Gutenberg — блоковий редактор WordPress, де сторінка збирається з окремих блоків: абзаців, зображень, колонок, кнопок. З версії 5.9 до нього додалося повне редагування сайту (FSE), тому блоками можна керувати не лише контентом, а й шапкою, футером і шаблонами сторінок. Нижче — як пришвидшити роботу редакторів патернами і як безпечно налаштувати власні шаблони.

Чим блок-патерн відрізняється від звичайного блоку

Блок — це один елемент: параграф, зображення, кнопка. Патерн — заздалегідь зібрана група блоків із готовою версткою, наприклад блок «три колонки з іконками» або «форма відгуку». Редактор вставляє патерн одним кліком і потім змінює лише текст і картинки, не збираючи структуру заново.

Патерни зберігаються або в темі (PHP-файл), або створюються прямо в редакторі й зберігаються в базі як окремий тип запису wp_block. Другий спосіб простіший для контент-менеджера, перший — надійніший при перенесенні й оновленні теми.

Як зареєструвати свій патерн у темі

Патерн теми — звичайний PHP-файл з блоковою розміткою в коментарях. Він живе в папці patterns/ всередині теми і підключається автоматично, якщо в theme.json вказана підтримка.

<?php
/**
 * Title: Три переваги з іконками
 * Slug: mytheme/features-three
 * Categories: featured
 */
?>
<!-- wp:columns -->
<div>
  <!-- wp:column -->
  <div>
    <!-- wp:heading {"level":3} -->
    <h3>Швидкий старт</h3>
    <!-- /wp:heading -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Після збереження файлу патерн з'явиться на вкладці «Патерни» редактора без встановлення плагінів. Такий файл легко зберігати в git і переносити між середовищами разом із дочірньою темою.

Як зробити власний шаблон сторінки через FSE

Повне редагування сайту працює лише з блоковими темами (у яких є theme.json). Власний шаблон створюється в розділі «Зовнішній вигляд → Редактор → Шаблони → Додати новий». Він теж зберігається як файл у папці templates/ теми, якщо експортувати зміни через «Інструменти → Експорт».

Часте завдання — окремий шаблон для лендингів без шапки й футера. Створіть шаблон page-landing.html, приберіть з нього блоки шапки й підвалу, а потім у налаштуваннях потрібної сторінки виберіть цей шаблон у блоці «Шаблон сторінки» на бічній панелі.

Як обмежити набір блоків для редакторів

Якщо в команді кілька авторів без досвіду верстки, зайві блоки (HTML, Query Loop, довільний CSS) лише заважають. Обмежити список можна фільтром у functions.php дочірньої теми.

<?php
add_filter('allowed_block_types_all', function ($allowed, $context) {
    return array(
        'core/paragraph',
        'core/heading',
        'core/image',
        'core/list',
        'core/quote',
        'core/button',
    );
}, 10, 2);

Правки в functions.php набувають чинності одразу, без активації плагіна, але вносити їх варто лише в дочірню тему — під час оновлення батьківської теми файл перезапишеться.

Патерни, шаблони і блоки: що обрати

Інструмент	Що змінює	Де зберігається	Для кого
Блок	один елемент контенту	тіло запису	будь-який автор
Патерн	готовий набір блоків	тема або база даних	контент-менеджер
Шаблон сторінки	структуру всієї сторінки	файл теми (FSE)	верстальник
Шаблон блоку (block template)	фіксований набір блоків для типу запису	PHP-код теми	розробник

Часті помилки при роботі з блоками

Білий екран після додавання патерна майже завжди означає синтаксичну помилку в PHP-файлі патерна — пропущену дужку або незакритий коментар блоку. Порядок діагностики такий самий, як для будь-якого фатального збою WordPress: увімкнути WP_DEBUG, подивитися wp-content/debug.log, за потреби — докладний розбір у статті про білий екран і помилку 500.

Друга часта проблема — конфлікт патернів із плагіна конструктора сторінок із патернами теми: в обох може бути однаковий Slug. Перейменуйте slug патерна теми, додавши префікс із назвою проєкту.

Підсумок

Патерни пришвидшують набір типового контенту і не потребують плагінів, якщо тема їх підтримує.
Власні шаблони сторінок доступні лише в блокових темах з FSE і зберігаються як HTML-файли в темі.
Список блоків для авторів варто звузити фільтром allowed_block_types_all у дочірній темі.
Дані Gutenberg читаються і через REST API WordPress — це знадобиться, якщо частина контенту виводиться на зовнішньому фронтенді.
Кастомізацію завжди робіть у дочірній темі, інакше оновлення батьківської теми видалить правки.

Gutenberg WordPress: блоки, патерни і шаблони сайту