Блоки Gutenberg: полный гид для новичков

Gutenberg — это блочный редактор WordPress: страница собирается из отдельных «кирпичей» — абзацев, заголовков, картинок, колонок, кнопок. Он стал стандартом ещё в WordPress 5.0 и с тех пор дорос от «редактора записей» до инструмента, которым редактируют весь сайт. Этот гид — для тех, кто открывает блочный редактор впервые или пользуется им наощупь: интерфейс, горячие клавиши, паттерны и типовые ошибки — всё в одном месте.

Что такое блок и почему это удобно

В классическом редакторе запись была одним сплошным текстовым полем, а всё сложнее картинки решалось шорткодами и HTML. В блочном редакторе каждый элемент — отдельный объект со своими настройками: у абзаца — типографика и цвет, у картинки — размер и обтекание, у кнопки — ссылка и форма.

Из этого следуют три практических плюса:

• Блоки переставляются. Целую секцию можно перетащить выше или ниже — попробуйте сделать это с текстом в классическом редакторе.
• Настройки не требуют кода. Колонки, фон у секции, кнопка — всё мышкой.
• Разметка остаётся чистой. Редактор сам генерирует корректный HTML, и вёрстка не «разъезжается» от случайного тега.

Интерфейс редактора: что где находится

Скриншоты быстро устаревают, поэтому опишем словами — по зонам экрана.

• Верхняя панель. Слева — кнопка «+» (вставка блоков), стрелки отмены и повтора, иконка структуры документа (список всех блоков — незаменим на длинных страницах). Справа — «Сохранить черновик», «Просмотреть», «Опубликовать» и шестерёнка, открывающая правую панель.
• Правая панель. Две вкладки. Первая — настройки записи: рубрики, метки, обложка, отрывок. Вторая — настройки выделенного блока: у каждого типа блока они свои.
• Центр. Холст с контентом. Клик по любому элементу выделяет блок, над ним всплывает панель инструментов блока: смена типа, выравнивание, жирный/курсив, ссылка и меню «⋮» с действиями — дублировать, переместить, удалить, создать паттерн.
• Нижний край. «Хлебные крошки» — путь до выделенного блока (например: Документ → Группа → Колонки → Абзац). Помогают выделить родительский блок, когда клик попадает во вложенный.

Как добавить блок: три способа

1. Слэш-команда — самый быстрый. В пустой строке наберите / и название: /заголовок, /изображение, /таблица. Стрелками выберите блок, Enter — готово.
2. Кнопка «+» в верхней панели открывает библиотеку всех блоков с поиском и превью — удобно, пока не знаете названий.
3. Просто печатайте. Текст автоматически становится абзацами. Enter — новый абзац. Строка ## в начале превратится в заголовок H2, - — в список: работает разметка Markdown.

Базовые блоки: что использовать для каких задач

Задача	Блок	Подсказка
Основной текст	Абзац	Базовый блок, создаётся по Enter
Подзаголовки	Заголовок	Держите иерархию: H2 → H3, без прыжков
Картинка с подписью	Изображение	Не забудьте alt-текст — это SEO и доступность
Несколько картинок	Галерея	Сама раскладывает сетку
Раскладка в 2–4 колонки	Колонки	На мобильных колонки складываются в столбик
Секция с общим фоном	Группа	Объединяет блоки; фон и отступы — на группе
Призыв к действию	Кнопки	Внутри может быть несколько кнопок в ряд
Сравнение, прайс	Таблица	Задайте число строк и колонок при вставке
Цитата	Цитата	Есть поле для автора
Видео с YouTube	Встраивание (embed)	Достаточно вставить ссылку в пустую строку
Код, HTML-вставка	Код / Пользовательский HTML	HTML-блок рендерит разметку как есть

Правило иерархии: заголовок H1 на странице один — это её название, в теле используйте H2 и H3. Поисковики и скринридеры читают структуру именно по заголовкам.

Паттерны: страницы из готовых секций

Паттерн — это заготовленная композиция блоков: секция «герой» с заголовком и кнопкой, сетка преимуществ, блок отзывов. Вставляется из библиотеки блоков (вкладка «Паттерны») и сразу редактируется как обычные блоки. Свои паттерны создаются в два клика: выделите блоки → меню «⋮» → «Создать паттерн».

Паттерны бывают двух видов, и разница принципиальна:

• Обычный — одноразовая заготовка. Вставили — и дальше копия живёт своей жизнью.
• Синхронизированный (раньше назывался «переиспользуемый блок») — единый источник. Вставлен на 20 страницах, поправили в одном месте — изменился везде. Идеален для дисклеймеров, CTA-блоков, контактных данных.

Типичная ошибка — сделать синхронизированным то, что должно отличаться от страницы к странице. Правило: повторяется дословно — синхронизированный; повторяется по структуре, но с разным содержимым — обычный. Подробный разбор всех трёх типов, включая переопределения, — в статье Паттерны Gutenberg.

Преобразование блоков: меняем тип без потери контента

Блоки умеют превращаться друг в друга — это экономит массу времени. Выделите блок и кликните по его иконке слева на панели инструментов: откроется список доступных преобразований. Типовые сценарии:

• абзац → заголовок, список или цитата — когда передумали по ходу текста;
• несколько выделенных абзацев → список, и наоборот;
• несколько любых блоков → группа или колонки — выделите их протяжкой мыши и преобразуйте разом;
• изображение → обложка (картинка становится фоном с текстом поверх).

Контент при преобразовании сохраняется. Если нужного варианта нет в списке — значит, такое превращение не поддерживается, и проще создать блок заново.

Горячие клавиши, которые реально экономят время

• / в пустой строке — вставка блока по имени;
• Ctrl/Cmd + Shift + D — дублировать блок;
• Ctrl/Cmd + Alt + T — вставить блок выше (+ Y — ниже);
• Ctrl/Cmd + Shift + Z — повторить отменённое;
• Shift + Alt + Ctrl/Cmd + M — переключить блок в режим HTML;
• Esc — выйти из блока, стрелки — ходить между блоками;
• полный список — Shift + Alt + H прямо в редакторе.

Типовые проблемы и как их чинить

Симптом	Причина	Решение
«Этот блок содержит неожиданный контент»	Разметку блока изменили извне (плагин, ручная правка HTML)	Кнопка «Попытаться восстановить блок»; не помогло — «Преобразовать в HTML» и поправить руками
Не получается выделить секцию целиком	Клик попадает во вложенный блок	Используйте хлебные крошки внизу или иконку структуры документа сверху
Колонки уехали на мобильном	Так и задумано: колонки складываются	Проверяйте превью в мобильном виде (меню «Просмотреть» → «Мобильный»)
Вставленный из Word текст с мусором	Word тащит свою разметку	Вставляйте через Ctrl+Shift+V (без форматирования), заголовки размечайте в редакторе
Блок нельзя удалить	Он внутри синхронизированного паттерна	Откройте сам паттерн для редактирования или отвяжите его от источника

Чек-лист: первые 10 минут в редакторе

Практика вместо теории — откройте тестовую запись и пройдите список:

1. Создайте заголовок H2 через /заголовок и абзац под ним.
2. Вставьте изображение и заполните alt-текст.
3. Добавьте блок «Колонки» (50/50), в левую — текст, в правую — картинку.
4. Оберните всё в «Группу» и задайте ей фоновый цвет в правой панели.
5. Добавьте кнопку со ссылкой.
6. Перетащите группу выше заголовка — за иконку из шести точек на панели блока.
7. Выделите группу и сохраните как паттерн.
8. Откройте структуру документа и переключитесь между блоками.
9. Посмотрите мобильное превью.
10. Сохраните черновик и откройте «Просмотреть».

Прошли все десять пунктов — базовый уровень освоен: этого хватает для 90% редакторских задач.

Куда расти дальше

Блоки — это не только контент записей. На блочных темах ими редактируется весь сайт — шапка, подвал, шаблоны страниц: как это работает, разобрали в гиде по Full Site Editing. А в WordPress 7.0 у разработчиков появилась возможность создавать собственные блоки на чистом PHP без JavaScript-сборки — подробности в обзоре WordPress 7.0.

Главный совет новичку: не читайте про редактор — работайте в нём. Полчаса практики по чек-листу выше дадут больше, чем любой обзор.