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

> Редактор Gutenberg у WordPress: як створювати блок-патерни, власні шаблони сайту через FSE та обмежувати набір блоків для редакторів без плагінів.

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](https://www.zevshost.net/uk/kb/wordpress-belyy-ekran-oshibka-500/).

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

## Підсумок

- Патерни пришвидшують набір типового контенту і не потребують плагінів, якщо тема їх підтримує.
- Власні шаблони сторінок доступні лише в блокових темах з FSE і зберігаються як HTML-файли в темі.
- Список блоків для авторів варто звузити фільтром `allowed_block_types_all` у дочірній темі.
- Дані Gutenberg читаються і через [REST API WordPress](https://www.zevshost.net/uk/kb/wordpress-rest-api/) — це знадобиться, якщо частина контенту виводиться на зовнішньому фронтенді.
- Кастомізацію завжди робіть у дочірній темі, інакше оновлення батьківської теми видалить правки.

---

Джерело: https://www.zevshost.net/uk/kb/wordpress-gutenberg-bloki/