Змінили тему, і звичний редактор перетворився на незнайоме полотно з блоків? Кожен, хто відкрив Gutenberg уперше, проходить через цей ступор. Знайомі кнопки зникли, Metabox-поля переїхали, а на створення простого допису йде вдвічі більше часу.

Але правда в тому, що блочний редактор WordPress — це найшвидший спосіб верстати контент без коду. На практиці ми переконалися: після пари годин роботи з блоками повертатися до класичного редактора вже не хочеться. А якщо знати сполучення клавіш і кілька лайфхаків, Gutenberg починає працювати швидше за будь-який page builder.

У цьому посібнику, повний розбір редактора блоків: від першого запуску до гарячих клавіш. Жодної теорії заради теорії, лише конкретні кроки, які ви повторите на своєму сайті.

💡 Швидкий огляд:

• Відкрийте редактор: Posts → Add New, ви потрапите до блочного інтерфейсу Gutenberg
• Додавайте контент блоками: кожен абзац, заголовок, зображення чи кнопка — це окремий переміщуваний блок
• Вставляйте блоки через значок «+» або клавішу /, просто наберіть назву потрібного блока
• Налаштуйте блок через бічну панель: параметри форматування та стилів змінюються залежно від типу вибраного блока
• Запам’ятайте гарячі клавіші: Shift + Alt + H (Windows) відкриває шпаргалку з усіма сполученнями

Що таке редактор Gutenberg

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

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

Станом на 2026 рік Gutenberg пройшов шлях від суперечливої новинки до повноцінного конструктора сторінок. З появою Full Site Editing (FSE) блочний редактор вийшов за межі дописів і сторінок, тепер через нього редагуються шапка, підвал, шаблони записів та архівів. Класичний редактор усе ще доступний окремим плагіном, але його підтримку офіційно припинено WordPress ще у 2022 році, оновлення безпеки виходять, але нові функції в ньому не з’являються.

Якщо ви серйозно працюєте з WordPress, Gutenberg — це не опція, а основний інструмент. Освоїти його варто хоча б заради швидкості: після звикання допис збирається у 2-3 рази швидше, ніж у класичному редакторі з купою metabox-полів.

Інтерфейс: перший запуск

Щоб відкрити редактор, перейдіть у Posts → Add New (або Pages → Add New для сторінок). WordPress завантажить Gutenberg із вітальним вікном і чистим полем для заголовка.

Праворуч, бічна панель із двома вкладками: Post (або Page) і Block. На вкладці Post розташовані глобальні налаштування: постійне посилання, рубрики, мітки, вибране зображення, excerpt і статус публікації. На вкладці Block, налаштування конкретного виділеного блока.

Зверніть увагу: поле постійного посилання доступне одразу, без окремого кліку по заголовку — це економить пару секунд на кожному дописі.

Робота з текстовими блоками

Заголовок допису

Перший блок у редакторі — це заголовок. Просто введіть текст, і він автоматично стане H1 допису. Поруч із заголовком, кнопка Edit, яка відкриває редагування постійного посилання прямо в блоці.

Натисніть Enter, і під заголовком з’явиться новий блок абзацу. Gutenberg зберігає звичну клавіатурну навігацію класичного редактора: Enter створює новий блок, Backspace об’єднує з попереднім.

Абзаци та панель форматування

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

Після введення тексту з’являється панель форматування:

Панель дає змогу:

• Перетворити абзац на цитату, заголовок, список, код або преформатований текст
• Застосувати bold, курсив, закреслення та підкреслення
• Вирівняти текст по лівому, правому краю, центру або за шириною
• Додати посилання з опцією відкриття в новій вкладці
• Вставити вбудоване зображення прямо в рядок
• Дублювати, перемістити або видалити блок
• Відредагувати блок як HTML
• Зберегти блок як повторно використовуваний (Reusable Blocks)

На вкладці Block бічної панелі доступні розширені налаштування: розмір шрифту, буквиця, колір фону та тексту, відступи та кастомний CSS-клас. Кольори можна задавати будь-які, палітра не обмежена передналаштуваннями теми.

Додавання зображень

Зображення вставляється трьома способами: через значок «+» → вкладка Image, перетягуванням файлу з робочого столу прямо в редактор або клавіатурною командою /image всередині абзацу.

Натисніть на будь-який значок «+», виберіть вкладку Image, і з’явиться блок із трьома джерелами: завантаження з комп’ютера, вибір із медіатеки або вставка за URL.

Вибір блоку через меню вставки, найнаочніший спосіб, особливо на початку. Коли звикнете, ви перейдете на /image, але візуальне меню завжди залишається під рукою.

Після вставки зображення в бічній панелі доступні: alt-текст (критичний для SEO та accessibility), розмір, співвідношення сторін і стилі, заокруглення, дуотон, тіні та рамки.

Стандартне вікно медіафайлу знайоме за класичним редактором, тут можна задати заголовок та опис. Але основні налаштування тепер зосереджені в бічній панелі Block.

На практиці ми рекомендуємо завжди заповнювати alt-текст: це допомагає і пошуковим системам, і користувачам скринрідерів. Опис має бути конкретним, 4-8 слів українською, з ключовим словом розділу.

Файли для завантаження

Блок File дає змогу прикріпити до посту PDF, ZIP, зображення або будь-який інший файл для завантаження читачами.

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

Текст кнопки та назву файлу можна редагувати. Можна додати CSS-клас для кастомної стилізації. Кнопка за замовчуванням відкривається в новій вкладці.

Цитати та врізки

Блок Quote додає стилізовану цитату. На відміну від звичайного абзацу, цитата візуально вирізняється, тема застосовує до неї особливе оформлення.

Бічна панель блоку Quote дає змогу налаштувати колір тла, шрифт і відступи, цитата може виглядати як частина брендингу, а не стандартний сірий блок.

Цитата приймає той самий текст, що й абзац, але візуально стоїть окремо. Крім стандартної Quote є Pullquote, більша врізка, і Verse, блок для віршів зі збереженням пробілів і переносів.

Вбудовування відео та зовнішнього контенту

Gutenberg підтримує вбудовування контенту з понад 30 платформ: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare та інших. Алгоритм один для всіх: вставити блок Embed, вибрати платформу, вставити URL і натиснути Embed.

Вставили URL, натиснули Embed, і готово. Gutenberg сам підтягне прев’ю, заголовок та обкладинку відео з YouTube.

Відео з’являється прямо в редакторі, можна переглянути прев’ю, не виходячи з адмінки. Для YouTube доступні налаштування: приховати елементи керування, увімкнути автовідтворення або задати час початку.

Кнопки та заклики до дії

Блок Buttons створює одну або кілька кнопок у ряд. Ідеально для CTA: «Завантажити», «Зареєструватися», «Перейти на WordPress.org».

Вкажіть текст, вставте URL і налаштуйте стиль: заливка, обведення, заокруглення кутів, розмір. Кнопки автоматично адаптуються під мобільні пристрої, на вузьких екранах вони розтягуються на всю ширину.

Gutenberg перевіряє контрастність тексту та фону кнопки: якщо поєднання кольорів нечитабельне, редактор покаже попередження. Дрібниця, але економить час на перевірку accessibility.

Стовпці та сітки

Блок Columns створює сітку з 2-6 колонок. У кожну колонку можна вставити будь-який інший блок, абзац, зображення, кнопку, цитату.

Типово створюється дві колонки, але кількість і ширину кожної можна змінювати в налаштуваннях блоку.

На мобільних пристроях колонки автоматично шикуються вертикально, контент не розповзається і залишається читабельним. Раніше це потребувало CSS-медіазапитів, а тепер працює з коробки.

Медіа + текст: зображення поруч із текстом

Блок Media & Text, один із найкорисніших для оформлення: зображення або відео ліворуч (чи праворуч), текст із кнопкою праворуч (чи ліворуч).

Завантажте зображення, додайте текст і, за бажанням, кнопку. Сторони можна поміняти місцями одним кліком.

А ось як це виглядає на фронті:

Виглядає професійно, а робиться за хвилину. Жоден page builder для такого верстання не потрібен.

Сторонні блоки: плагіни розширюють Gutenberg

Багато плагінів додають власні блоки в Gutenberg. WooCommerce, найяскравіший приклад: після встановлення плагіна в редакторі з'являються блоки для вставки товарів, кошика, фільтрів і категорій магазину.

Jetpack додає блоки форм, підписки та соціальних іконок. Yoast SEO вбудовує аналіз читабельності та SEO-підказки прямо в бічну панель редактора. Contact Form 7 дає блок форми зворотного зв'язку.

Принцип скрізь один: встановили плагін, блоки з'явилися в меню вставки. Жодного додаткового коду.

Гарячі клавіші та лайфхаки

Найкорисніший лайфхак Gutenberg, клавіша /. Перебуваючи в будь-якому абзаці, натисніть / і почніть вводити назву блока. Редактор покаже відповідні варіанти, виберіть стрілками та натисніть Enter.

Наприклад: /image → блок зображення, /heading → заголовок, /table → таблиця, /column → колонки. Після тижня використання цей прийом значно пришвидшує роботу.

Повний список гарячих клавіш: Shift + Alt + H (Windows) або Opt + Ctrl + H (Mac). Відкриється шпаргалка з усіма комбінаціями, від переміщення блоків до перемикання між режимами редагування.

Ще кілька прийомів, які ми використовуємо на практиці:

• Ctrl + Shift + D, дублювати виділений блок
• Ctrl + Alt + T, вставити новий блок перед поточним
• Ctrl + Alt + Y, вставити новий блок після поточного
• Клік по іконці i на верхній панелі, показати структуру документа (заголовки, кількість слів, абзаци)
• List View (іконка з трьома смужками зліва вгорі), навігація по всіх блоках допису у вигляді дерева, зручно для довгих матеріалів

І наостанок: помилка «Update failed» зазвичай спричинена нестабільним інтернет-з'єднанням, а не проблемою редактора. Перевірте з'єднання та повторіть збереження.

Відео: Gutenberg за 15 хвилин

Хочете побачити все в дії? Коротке відео від WPBeginner показує повний цикл створення допису в Gutenberg, від першого блока до публікації:

⁉️🤔 Часті запитання

Чи потрібно встановлювати Gutenberg окремо?

Ні, редактор блоків вбудовано в ядро WordPress з версії 5.0 (вийшла в грудні 2018). Якщо у вас свіжа версія WordPress, Gutenberg уже працює. Окремий плагін Gutenberg існує лише для тих, хто хоче тестувати нові блоки до їх включення в ядро.

Чи можна повернути класичний редактор?

Так, встановіть безплатний плагін Classic Editor. Він повністю вимикає Gutenberg і повертає звичний TinyMCE. Але врахуйте: офіційна підтримка класичного редактора WordPress припинена у 2022 році. Поточні версії WordPress (6.x у 2026) досі працюють із Classic Editor, але нові функції, Full Site Editing, Block Themes, Patterns, доступні лише в Gutenberg.

Чим Gutenberg відрізняється від Elementor або Divi?

Gutenberg — це вбудований редактор контенту WordPress, безплатний і без зовнішніх залежностей. Elementor і Divi — це комерційні page builder з ширшими дизайнерськими можливостями: попапи, слайдери, інтеграції з маркетингом. Для типового блогу чи корпоративного сайту Gutenberg закриває основні завдання з верстки. Якщо ви заробляєте на сайті (магазин, лендінги, воронки), page builder дасть більше гнучкості. Хороша новина: Gutenberg і page builder працюють одночасно, можна будувати сторінки в Elementor, а дописи вести в блочному редакторі.

Що робити, якщо блоки накладаються або роз'їжджаються на мобільних?

Зазвичай проблема в темі, а не в Gutenberg. Перевірте: (1) чи активна у вас тема з підтримкою блочного редактора, блок-теми (Block Themes) гарантують коректну верстку; (2) чи не перевизначає кастомний CSS відступи та ширину блоків. Перемкніться на стандартну тему Twenty Twenty-Four для тесту, якщо блоки стають нормально, проблема у вашій темі.

Як додати блок, якого немає в стандартному наборі?

Два шляхи: (1) пошукайте плагін, який додає потрібний блок (наприклад, Otter Blocks або Spectra дають десятки додаткових блоків), або (2) створіть кастомний блок через Advanced Custom Fields (ACF) — це простіше, ніж писати блок на React. Для більшості завдань вистачає плагінів, встановили та користуєтеся.

Чи працює Gutenberg із довільними типами записів (CPT)?

Так, повністю. При реєстрації CPT вкажіть 'show_in_rest' => true та 'supports' => array('editor'), блочний редактор увімкнеться автоматично. Для існуючих CPT без REST API є плагіни-перехідники, але краще оновити реєстрацію типу запису.

Що обрати: Gutenberg чи page builder

Gutenberg пройшов шлях від експериментальної «фічі» до зрілого редактора, на якому працюють мільйони сайтів. Для авторів контенту це пряме підвищення продуктивності: візуальна верстка, миттєвий перегляд і клавіатурні скорочення економлять від 30 до 60 хвилин на кожному дописі, порівняно з класичним редактором і плагінами-шорткодами.

Якщо ви ведете блог, новинний сайт або корпоративний портал, Gutenberg закриває основні завдання. Безплатно, без зовнішнього коду та зайвого навантаження на сервер.

Якщо ви будуєте складні лендінги, інтернет-магазин із кастомною версткою або маркетингові воронки, придивіться до конструкторів сторінок. А для повсякденної роботи з контентом, запустіть Gutenberg, наберіть /heading і просто почніть писати.