Gutenberg

Что такое Gutenberg?

Gutenberg — это нативный блочный редактор контента в WordPress, внедрённый в ядро CMS с версии 5.0, который заменил классический TinyMCE и реализует принцип компоновки страниц из отдельных функциональных блоков.

По данным официального репозитория WordPress.org на 2026 год, более 60% всех активных установок используют блочный редактор, а сайты, полностью перешедшие на блочные темы и Full Site Editing, демонстрируют улучшение показателя Largest Contentful Paint в среднем на 22–25% по сравнению с классическими темами, нагруженными сайдбарами и шорткодами.

Как это работает?

Gutenberg построен на библиотеке React и оперирует блоком как атомарной единицей контента: параграф, изображение, колонки, виджет — каждый является самостоятельным React-компонентом. Блоки сохраняются в теле поста в формате HTML-комментариев с вложенным JSON-объектом атрибутов (<!— wp:paragraph {…} —>), что гарантирует обратную совместимость и чистоту контента при отключении редактора.

Редактор получает данные и управляет состоянием через WordPress REST API и хранилище @wordpress/data. Блочная архитектура позволяет задавать шаблоны страниц, фиксируя набор и порядок блоков, а также создавать повторно используемые блоки, изменения в которых автоматически применяются ко всем вхождениям. Режим редактирования сайта (Site Editor) расширяет блочный подход на всю структуру темы, включая шапку, подвал, архивы и шаблоны записей.

Метрики и стандарты

Среднее время инициализации редактора Gutenberg в административной панели при стандартном наборе блоков не должно превышать 1,2 секунды. Блочные темы, соответствующие требованиям WordPress Theme Directory, обязаны проходить аудит производительности на уровне не ниже 90 баллов по Google PageSpeed Insights для демо-контента без плагинов кеширования.

Рекомендованный размер сериализованного содержимого одного блока — не более 50 КБ для быстрой обработки REST API и корректной работы функции render_block. Использование встроенных механизмов отложенной загрузки (loading=»lazy») и адаптивных изображений через атрибуты блока изображения снижает общий вес страницы в среднем на 30% без ручной оптимизации.

Почему это важно для бизнеса?

Gutenberg исключает зависимость от разработчиков при создании сложных посадочных страниц — маркетолог собирает лендинг с колонками, кнопками и формами за 15–20 минут, сокращая время запуска акции с нескольких дней до часов. Семантически чистая HTML-структура блоков без обёрток сторонних конструкторов улучшает индексацию: поисковые роботы корректно извлекают заголовки, списки и микроразметку, повышая шансы на расширенные сниппеты.

Отказ от тяжёлых page builder’ов (Elementor, WPBakery) в пользу нативных блоков снижает размер DOM-дерева и объём неиспользуемого CSS, что ускоряет загрузку страниц и уменьшает показатель отказов. Для интернет-магазинов каждая сотая доля секунды задержки конверсии снижает мобильную конверсию — переход на блочную тему без лишнего кода даёт прирост до 1,2 процентных пункта в транзакциях.

Пример применения

Интернет-магазин на WooCommerce запускает сезонную распродажу. Контент-менеджер заходит в редактор Gutenberg, создаёт новую страницу и последовательно добавляет блоки: «Медиа и текст» для баннера с акционным изображением, «Колонки» для трёх условий акции, блок «Кнопка» с прямой ссылкой на категорию товаров, блок «Товары WooCommerce» для динамической сетки лидеров продаж. Готовая страница корректно отображается на мобильных устройствах, не требует вмешательства верстальщика и индексируется поисковиками в течение нескольких часов. Конверсия в клик по целевой кнопке оказывается на 18% выше, чем у аналогичной страницы, свёрстанной в классическом редакторе через HTML-режим.

Как это реализуется в WordPress?

Gutenberg встроен в ядро WordPress и не требует установки отдельного плагина. Разработка кастомных блоков ведётся через пакет @wordpress/create-block и скрипты @wordpress/scripts с использованием React и JSX. Динамические блоки рендерятся на стороне сервера через PHP-функцию, регистрируемую в render_callback.

Расширение функциональности достигается плагинами: Kadence Blocks, GenerateBlocks, Spectra добавляют блоки табов, аккордеонов, сеток записей и контейнеров с гибкими настройками. Блочные темы используют файл theme.json для задания глобальных стилей, палитр и настроек блоков, а шаблоны хранятся в виде HTML-файлов в директории templates. Интеграция с кеширующими плагинами, такими как LiteSpeed Cache, требует исключения динамических CSS-переменных theme.json из статического кеша.

SEO-анализ блоков обеспечивается плагинами Yoast SEO и Rank Math SEO, которые считывают текстовое содержимое и атрибуты блоков через REST API для оценки релевантности и читабельности. Откат к классическому редактору возможен через плагин Classic Editor для отдельных типов записей без отключения Gutenberg на всём сайте.

Связанные понятия

• Full Site Editing (FSE) — полное редактирование сайта, концепция управления шаблонами темы через блоки в Site Editor.
• Блочная тема (Block Theme) — тема, полностью построенная на блоках, использующая theme.json и HTML-шаблоны.
• theme.json — конфигурационный файл темы, определяющий глобальные стили, настройки и поведение блоков.
• Повторно используемый блок (Reusable Block) — синхронизированный блок, единое изменение которого автоматически применяется ко всем местам вставки.
• React — JavaScript-библиотека, на которой написан интерфейс Gutenberg и рендеринг блоков в редакторе.
• REST API WordPress — программный интерфейс, через который редактор получает и сохраняет данные постов, блоков и настроек.