Gutenberg

Gutenberg — это программное обеспечение с открытым исходным кодом, предназначенное для визуального редактирования веб-сайтов на базе системы управления контентом (CMS) WordPress. Представляет собой блочный редактор (Block Editor), в котором каждый элемент контента — текст, изображение, видео, кнопка, таблица, галерея, встроенный контент — является отдельным блоком. Gutenberg заменил классический редактор TinyMCE в WordPress начиная с версии 5.0, выпущенной 6 декабря 2018 года. Название редактора отсылает к Иоганну Гутенбергу, изобретателю книгопечатания.

История

Предпосылки создания

До появления Gutenberg редактором WordPress по умолчанию был TinyMCE — текстовый редактор WYSIWYG (What You See Is What You Get), основанный на HTML-редакторе. Он позволял форматировать текст и вставлять медиафайлы, но не давал гибких возможностей для создания сложных макетов страниц без использования шорткодов (shortcodes) или сторонних плагинов для построения страниц (page builders), таких как Elementor, Beaver Builder, WPBakery. Разработчики WordPress стремились создать единый, стандартизированный инструмент, который бы упростил работу с контентом для неспециалистов и снизил зависимость от сторонних решений.

Разработка и запуск

Проект Gutenberg был анонсирован в 2017 году. Разработка велась открыто на GitHub, с активным участием сообщества. Первая публичная бета-версия вышла в июне 2018 года. Релиз WordPress 5.0, включающий Gutenberg в качестве основного редактора, состоялся 6 декабря 2018 года. Внедрение вызвало неоднозначную реакцию: многие пользователи и разработчики критиковали резкий переход, нестабильность ранних версий и несовместимость с существующими плагинами. Для тех, кто предпочитал старый интерфейс, был выпущен плагин Classic Editor, который по-прежнему поддерживается и доступен для установки.

Развитие после запуска

После релиза Gutenberg активно дорабатывался. В версиях WordPress 5.x и 6.x были добавлены:

• Полноэкранный режим (Full Site Editing, FSE) — возможность редактировать не только содержимое записей и страниц, но и шаблоны темы (заголовки, подвалы, боковые панели) с помощью блоков.
• Блоки для виджетов — замена классических виджетов на блочные.
• Блоки для меню навигации — создание меню через блочный интерфейс.
• Глобальные стили — настройка цветов, типографики и других параметров для всего сайта через интерфейс редактора.
• Библиотека шаблонов — готовые наборы блоков для типовых страниц (о компании, контакты, услуги).

Архитектура и принципы работы

Блочная модель

Основой Gutenberg является концепция блоков. Каждый блок — это независимая единица контента, которая может быть перемещена, скопирована, удалена или настроена индивидуально. Блоки могут быть вложенными (например, блок «Колонки» содержит внутри другие блоки). Редактор использует модель React.js для рендеринга интерфейса и управления состоянием.

Типы блоков

Gutenberg включает десятки встроенных блоков, разделённых по категориям:

• Текст (абзац, заголовок, список, цитата, код, преформатированный текст).
• Медиа (изображение, галерея, видео, аудио, файл, обложка).
• Дизайн (кнопка, разделитель, колонки, группа, панель, таблица).
• Виджеты (архивы, календарь, облако меток, поиск, последние записи).
• Встраивание (YouTube, Vimeo, Twitter, Instagram, SoundCloud, Google Maps, CodePen и другие сервисы).
• Тема (заголовок сайта, логотип, меню навигации, запись цикла, шаблон запроса).

Редактор и интерфейс

Интерфейс Gutenberg состоит из:

• Панели инструментов — контекстное меню для каждого блока (выравнивание, форматирование, удаление, дублирование).
• Боковой панели — настройки блока (цвета, отступы, размеры, дополнительные CSS-классы) и настройки документа (заголовок, постоянная ссылка, категории, метки, изображение записи).
• Области вставки блоков — кнопка «+» для добавления нового блока, отображающая список доступных блоков с поиском.

Режимы редактирования

• Режим визуального редактирования — основной режим, где блоки отображаются в том виде, в котором они будут выглядеть на сайте (WYSIWYG).
• Режим редактирования кода — позволяет редактировать HTML-код блока напрямую.
• Режим предварительного просмотра — отображает страницу так, как её увидит посетитель.

Полноэкранное редактирование (Full Site Editing)

Концепция

Full Site Editing (FSE) — это расширение возможностей Gutenberg, позволяющее редактировать все элементы темы WordPress (шаблоны, части шаблонов, глобальные стили) через блочный интерфейс, без необходимости писать PHP-код или редактировать файлы темы вручную. FSE был введён в WordPress 5.9 (январь 2022 года) и получил дальнейшее развитие в версиях 6.x.

Основные компоненты FSE

• Редактор сайта — интерфейс, в котором можно редактировать шаблоны (index, single, page, archive, search) и части шаблонов (header, footer, sidebar).
• Блоки темы — специальные блоки, которые динамически отображают данные сайта (заголовок сайта, логотип, меню навигации, запись цикла, шаблон запроса).
• Глобальные стили — централизованная настройка цветов, шрифтов, отступов и других параметров для всего сайта.
• Библиотека шаблонов — готовые макеты страниц, которые можно импортировать и адаптировать.

Требования для FSE

Для использования FSE необходима тема, поддерживающая блоки (block-based theme). Такие темы обычно содержат минимальное количество файлов шаблонов (только index.html и style.css) и полагаются на блоки для построения всех страниц. Примеры таких тем: Twenty Twenty-Two, Twenty Twenty-Three, Twenty Twenty-Four.

Преимущества и недостатки

Преимущества

• Унификация — единый стандарт для создания контента и шаблонов, снижающий зависимость от сторонних плагинов.
• Гибкость — возможность создавать сложные макеты без знания HTML, CSS или PHP.
• Совместимость — блоки Gutenberg корректно отображаются на всех устройствах и в разных браузерах.
• Расширяемость — разработчики могут создавать собственные блоки с помощью JavaScript (React) и регистрировать их в редакторе.
• Безопасность — блоки проходят проверку на уязвимости в рамках ядра WordPress.

Недостатки

• Кривая обучения — для пользователей, привыкших к классическому редактору, переход на блочную модель может быть неудобным.
• Производительность — на сайтах с большим количеством блоков или сложными макетами редактор может работать медленнее, особенно на слабых хостингах.
• Совместимость с плагинами — некоторые старые плагины и темы могут быть несовместимы с Gutenberg, что требует их обновления или замены.
• Ограничения FSE — полноэкранное редактирование пока не поддерживается всеми темами, а для создания уникальных макетов может потребоваться доработка кода.

Критика и альтернативы

Критика

Gutenberg подвергался критике со стороны части сообщества WordPress за:

• Резкий переход — отсутствие плавной миграции с классического редактора.
• Нестабильность ранних версий — многочисленные ошибки и сбои в версиях 5.0–5.2.
• Сложность для новичков — интерфейс, перегруженный опциями, может отпугнуть пользователей, которым нужен простой текстовый редактор.
• Зависимость от JavaScript — редактор полностью построен на React, что может вызывать проблемы при отключённом JavaScript в браузере или при использовании устаревших браузеров.

Альтернативы

• Classic Editor — официальный плагин, возвращающий старый редактор TinyMCE. Поддерживается до 2024 года.
• Сторонние page builders — Elementor, Beaver Builder, WPBakery, Divi Builder, которые предоставляют более продвинутые возможности визуального редактирования, но часто требуют покупки лицензии.
• Текстовые редакторы — для опытных пользователей возможна работа с HTML-кодом напрямую через встроенный редактор кода.

Применение

Gutenberg используется на миллионах сайтов на WordPress, от личных блогов до корпоративных порталов и интернет-магазинов. Он подходит для:

• Создания статей и страниц — стандартный контент с текстом, изображениями, видео.
• Построения лендингов — с помощью блоков «Колонки», «Обложка», «Кнопка» можно создавать одностраничные сайты.
• Редактирования шаблонов — в темах, поддерживающих FSE, можно полностью изменить дизайн сайта без программирования.
• Разработки собственных блоков — разработчики могут создавать кастомные блоки для специфических задач (например, калькулятор, форма подписки, галерея с фильтрацией).

Интересные факты

• Название «Gutenberg» было выбрано в честь Иоганна Гутенберга, изобретателя печатного станка, что символизирует революцию в создании контента.
• Редактор написан на JavaScript с использованием библиотеки React, что делает его одним из крупнейших проектов на React в мире.
• Код Gutenberg полностью открыт и доступен на GitHub (репозиторий WordPress/gutenberg).
• В версии WordPress 6.3 (август 2023 года) была добавлена возможность редактирования шаблонов непосредственно из редактора записей, без перехода в отдельный редактор сайта.
• Gutenberg поддерживает работу с блоками из сторонних плагинов, что позволяет расширять его функциональность практически без ограничений.

Источники

• Официальная документация WordPress: «Gutenberg» и «Block Editor».
• Статья «WordPress 5.0: The Gutenberg Editor» на сайте WordPress.org.
• Книга «WordPress: The Missing Manual» (Matthew MacDonald, 2020).
• Статья «Full Site Editing: What It Is and How to Use It» на сайте WPBeginner.
• Обсуждения и документация на GitHub: репозиторий WordPress/gutenberg.