Gutenberg FSE: Майбутнє дизайну WordPress у 2026 році

Повноцінне редагування сайту (Full Site Editing, FSE) з'явилося у WordPress 5.9. Через три роки більшість агенцій досі не використовують його належним чином — а ті, хто використовує, мають серйозну конкурентну перевагу.

Що насправді означає FSE

До FSE теми WordPress керували заголовками, нижніми колонтитулами та глобальним макетом за допомогою PHP-шаблонів. Gutenberg обробляв лише область вмісту. Ви могли редагувати свій допис у блозі за допомогою блоків, але навігація була заблокована у PHP-файлі.

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

Це важливо для генерації ШІ, оскільки це означає, що весь сайт може бути виражений як JSON блоків. Немає гібридної системи, де деякі частини є PHP-шаблонами, а деякі — блоками. Все є блоками, все є JSON, все може бути згенеровано та відредаговано програмно.

Як PAGEnza використовує FSE

Коли PAGEnza генерує сайт, він створює не просто домашню сторінку. Він створює повну блокову тему з:

• templates/index.html — шаблон за замовчуванням

• templates/single.html — макет окремого допису

• templates/archive.html — список блогів/категорій

• templates/404.html — сторінка помилки

• parts/header.html — блок заголовка, що повторно використовується

• parts/footer.html — блок нижнього колонтитула, що повторно використовується

• theme.json — глобальні стилі (кольори, типографіка, відступи)

Усі ці елементи генеруються з одного й того ж Дизайнерського мандату. Колірна палітра, визначена для домашньої сторінки, є тією ж, що використовується в глобальних стилях theme.json. Тріо шрифтів, вибране для героя, є тим самим, що завантажується в таблиці стилів блокової теми.

Це ключова перевага FSE для генерації ШІ: узгодженість забезпечується системою, а не надією на те, що дизайнер пам'ятав застосувати той самий шрифт скрізь.

theme.json — найважливіший файл, який ви ніколи не редагували

theme.json — це файл конфігурації, який визначає глобальну систему дизайну для блокової теми. Він контролює:

• Колірна палітра — іменовані кольори, що з'являються у виборі кольору редактора
• Типографіка — сімейства шрифтів, розміри, висота рядків
• Відступи — шкала відступів, що використовується елементами керування відступами та полями
• Радіус межі — значення радіуса кутів за замовчуванням
• Макет — ширина вмісту, широка ширина

Коли PAGEnza генерує сайт, theme.json створюється програмно з Дизайнерського мандату. Кольори ink, bg1, bg2 та accent реєструються як іменовані кольори палітри. Тріо шрифтів реєструється як сімейства шрифтів із правильними URL-адресами @import Google Fonts.

Результатом є те, що коли клієнт відкриває редактор Gutenberg для зміни тексту, вибір кольору показує саме чотири брендові кольори — нічого більше. Вибір шрифту показує три вибрані шрифти. Елементи керування відступами використовують системну шкалу. Система дизайну застосовується на рівні редактора.

Що насправді означає "редагувати в реальному часі в Gutenberg"

Кожен сайт, згенерований PAGEnza, є активним встановленням WordPress з увімкненим Gutenberg FSE. Клієнт може:

• Клацнути будь-який текст і редагувати його безпосередньо
• Змінювати фони секцій, клацаючи та вибираючи з палітри брендових кольорів
• Змінювати порядок секцій, перетягуючи блоки
• Додавати нові секції з інсертера блоків
• Змінювати зображення, клацаючи на заповнювач

Вони не можуть випадково порушити систему дизайну, вибравши колір, що не відповідає бренду, оскільки доступні лише чотири брендові кольори. Вони не можуть вибрати невідповідний шрифт, оскільки зареєстровано лише три брендові шрифти.

Саме це робить сайти, згенеровані ШІ, практичними для реальних клієнтів — обмеження, які забезпечують роботу дизайну, зберігаються після передачі.

Проблема охоплення блоків

FSE потужний, але має проблему охоплення. Не кожен шаблон дизайну може бути чисто виражений у стандартних блоках Gutenberg. Складні макети, інтерактивні компоненти та кастомні відображення даних часто вимагають кастомних блоків або сторонніх плагінів.

PAGEnza вирішує це двома способами:

Для макета: ми використовуємо комбінацію блоків Group, Cover, Columns та Media & Text із ретельно контрольованими атрибутами. Близько 95% макетів маркетингових сторінок можна досягти лише за допомогою цих чотирьох типів блоків.

Для інтерактивних компонентів: Plugin Builder генерує кастомні блоки Gutenberg як PHP-плагіни. Таблиця цін, форма бронювання, слайдер відгуків — усе це генерується як належні зареєстровані блоки, що інтегруються з редактором FSE, а не як шорткоди, прикріплені збоку.

Мета полягає в тому, щоб усе, що клієнту потрібно редагувати, було доступно для редагування у візуальному редакторі, без дотику до коду.