Block Editor

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

История

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

До появления Block Editor сайты на WordPress создавались с использованием классического редактора, который по своей сути был текстовым полем с ограниченным набором инструментов форматирования. Для создания сложных макетов (например, колонок, галерей, встроенных видео) требовалось либо знание HTML, либо установка сторонних плагинов для конструкторов страниц, таких как Elementor, WPBakery или Beaver Builder. Разработчики WordPress решили интегрировать функциональность конструкторов страниц непосредственно в ядро CMS, чтобы упростить создание контента для пользователей без технических навыков.

Разработка и внедрение

Проект получил кодовое название «Gutenberg» в честь Иоганна Гутенберга, изобретателя книгопечатания. Разработка началась в 2017 году под руководством Мэта Малленвега, сооснователя WordPress. Первая бета-версия была выпущена в июне 2018 года. Внедрение вызвало неоднозначную реакцию сообщества: многие пользователи и разработчики критиковали новый редактор за нестабильность, несовместимость с существующими плагинами и сложность освоения. В ответ на это был создан плагин Classic Editor, который позволял вернуться к старому интерфейсу, и его поддержка была продлена до 2024 года.

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

После выхода WordPress 5.0 Block Editor активно дорабатывался. В версиях 5.1–5.5 были улучшены производительность, доступность и добавлены новые блоки (например, блок «Социальные значки», блок «Группа»). В WordPress 5.6 появилась поддержка блоков в виджетах, а в версии 5.8 — полноценный редактор сайта (Site Editor), который позволяет редактировать шаблоны тем с помощью тех же блоков. В WordPress 5.9 (2022 год) был представлен интерфейс редактирования стилей, а в версии 6.0 — улучшенные инструменты для работы с колонками и списками.

Устройство и принцип работы

Архитектура

Block Editor построен на основе JavaScript-библиотек React и Redux. Он использует концепцию «блоков» — автономных единиц контента, каждая из которых имеет свою структуру данных (атрибуты), визуальное представление и логику поведения. Блоки хранятся в базе данных WordPress в виде HTML-комментариев с JSON-данными, что обеспечивает обратную совместимость с классическим редактором.

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

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

Типы блоков

Block Editor включает несколько десятков встроенных блоков, разделённых на категории:

• Текстовые блоки: абзац, заголовок, список, цитата, код, стихотворение.
• Медиаблоки: изображение, галерея, аудио, видео, файл, обложка.
• Дизайн-блоки: кнопка, колонки, группа, разделитель, пространство, таблица.
• Виджеты: короткий код, HTML-код, RSS, календарь, облако тегов.
• Встраивания: YouTube, Twitter (X), Vimeo, SoundCloud, Instagram (принадлежит компании Meta, признанной экстремистской и запрещённой в РФ), TikTok и другие сервисы.
• Тематические блоки: навигация, меню, заголовок сайта, логотип, запись блога.

Редактор сайта (Site Editor)

Начиная с WordPress 5.8, Block Editor используется не только для редактирования записей и страниц, но и для управления шаблонами темы. Site Editor позволяет заменять стандартные шаблонные файлы (header.php, footer.php, index.php) на блоковые композиции. Это даёт возможность полностью кастомизировать внешний вид сайта без написания кода.

Классификация

По способу использования

• Встроенные блоки — поставляются с ядром WordPress и не требуют установки дополнительных плагинов.
• Пользовательские блоки — создаются разработчиками с помощью API блоков (registerBlockType) и могут быть добавлены в редактор через плагины или темы.
• Динамические блоки — контент которых генерируется на стороне сервера (например, блок «Последние записи» или «Календарь»).
• Статические блоки — содержимое которых хранится непосредственно в HTML-разметке записи.

По функциональности

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

Применение

Создание контента

Block Editor используется для написания статей, создания страниц, а также для редактирования произвольных типов записей (например, товаров в WooCommerce). Основное преимущество — возможность визуально собирать сложные макеты без использования HTML-кода. Например, можно создать страницу с двумя колонками, в левой из которых будет изображение, а в правой — текст и кнопка.

Редактирование шаблонов

Site Editor позволяет изменять глобальные элементы сайта: шапку, подвал, боковую панель, страницу 404, страницу результатов поиска. Это особенно полезно для пользователей, которые хотят настроить внешний вид сайта без покупки дорогих премиум-тем или найма разработчика.

Разработка тем

Block Editor предоставляет API для создания собственных блоков. Разработчики могут регистрировать новые блоки, добавлять им настройки, стили и динамическое поведение. Это стимулировало появление экосистемы плагинов, расширяющих функциональность редактора (например, Advanced Custom Fields Blocks, Kadence Blocks, GenerateBlocks).

Критика

Производительность

Одной из основных претензий к Block Editor является его ресурсоёмкость. Редактор загружает большое количество JavaScript-файлов, что может замедлять работу на слабых хостингах или старых компьютерах. В версиях 5.7–5.9 были предприняты меры по оптимизации (ленивая загрузка блоков, уменьшение размера бандлов), но проблема полностью не решена.

Сложность для новичков

Хотя Block Editor позиционируется как интуитивно понятный, многие пользователи отмечают, что обилие настроек и блоков может быть запутанным. Особенно это касается перехода с классического редактора, где интерфейс был проще.

Совместимость

Некоторые плагины и темы, созданные до выхода WordPress 5.0, могут некорректно работать с Block Editor. Например, плагины, которые добавляют собственные кнопки в классический редактор, часто несовместимы с новым интерфейсом. Это требует от разработчиков обновления своих продуктов.

Отсутствие гибкости

Несмотря на широкие возможности, Block Editor уступает специализированным конструкторам страниц (Elementor, Divi) в плане визуального контроля. Например, точное позиционирование элементов (пиксель-в-пиксель) или создание сложных анимаций в нём затруднено.

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

• Название «Gutenberg» было выбрано в честь Иоганна Гутенберга, но проект не имеет отношения к одноимённому шрифту Google Fonts.
• Block Editor написан на JavaScript, и его кодовая база насчитывает более 100 тысяч строк кода.
• В WordPress 6.0 была добавлена поддержка блоков в меню, что позволило создавать многоуровневые навигационные меню с помощью редактора.
• Существуют плагины, которые позволяют использовать Block Editor в других CMS, таких как Drupal и Joomla, но они не получили широкого распространения.
• В 2020 году Block Editor был адаптирован для мобильных приложений WordPress (iOS и Android), что позволило редактировать записи на смартфонах.

Источники

• Официальная документация WordPress: «Block Editor Handbook» (wordpress.org/documentation).
• Кодекс WordPress: «Gutenberg» (codex.wordpress.org).
• Статья «WordPress 5.0: A Gutenberg FAQ» на сайте WPBeginner.
• Материалы сообщества WordPress: «What is the Block Editor?» (wordpress.com/support).
• Технический блог Make WordPress Core: «Gutenberg Development Updates» (make.wordpress.org/core).