Сменили тему, и привычный редактор превратился в незнакомое полотно из блоков? Каждый, кто открыл 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 показывает варианты: блок можно превратить в заголовок, изображение, галерею, обложку и десятки других типов.

После ввода текста появляется панель форматирования:

Панель позволяет:

• Превратить абзац в цитату, заголовок, список, код или preformatted-текст
• Применить 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 и просто начните писать.