Работа с блоками Гутенберга

cJSON: { "title": "Работа с блоками Гутенберга: технические детали, спецификации и стандарты качества", "keywords": "Гутенберг блоки, технические характеристики блоков, спецификации HTML, качество верстки, отличия от классического редактора, ACF блоки, FSE блоки, Core Web Vitals", "description": "Практическое руководство по работе с блоками Гутенберга с фокусом на технические детали: структура HTML, CSS-классы, атрибуты, качество данных и отличие от альтернатив. Только конкретика и цифры.", "html_content": "

1. Как устроен HTML-код блока «Колонки» в Гутенберге и чем он принципиально отличается от аналогичного элемента в классическом редакторе?

Блок «Колонки» (Columns) в Гутенберге генерирует строго валидную семантическую структуру на основе CSS Grid (display: grid), а не устаревших float или табличной верстки. В классическом редакторе (TinyMCE) для создания двухколоночного макета часто использовались теги

или
с классом типа .col-left с плавающими элементами, что приводило к конфликтам позиционирования при адаптиве. В Гутенберге каждая колонка — это вложенный в .wp-block-columns контейнер .wp-block-column с явным указанием CSS-свойства flex-basis. Например, для 3 колонок (1/3, 1/3, 1/3) ширина каждой задается через grid-template-columns: repeat(3, 1fr) без каких-либо дополнительных медиа-запросов — адаптивность заложена в движок. При этом каждая колонка получает inline-стиль с внутренним отступом (padding: 0 15px) для создания воздушного зазора (gutter). В отличие от классического редактора, здесь невозможно случайно сломать сетку ошибочным тегом
или

, так как редактор автоматически экранирует некорректные HTML-конструкции.

  • Сетка: CSS Grid (display: grid) с явным заданием grid-template-columns (например, '1fr 2fr' для неравных колонок). В классическом — float:left + clearfix.
  • Атрибуты данных: Каждый блок содержит data-block-id и data-type для точной идентификации при динамической подгрузке. Например, data-type=\"core/columns\".
  • JSON-схема: Структура хранения в базе — JSON с обязательными полями: blockName, attrs (массив атрибутов, включая className для кастомных классов), innerBlocks (вложенные блоки) и innerHTML.
  • Адаптивность без медиа-запросов: По умолчанию на мобильных устройствах (ширина экрана менее 600px) колонки складываются в стек (flex-direction: column) автоматически через встроенный Bootstrap-подобный механизм без дополнительных CSS-правил от разработчика.

2. Какие технические параметры отличают блок «Изображение» от «Галереи» на уровне разметки?

Блок «Изображение» (core/image) выводит одиночный тег

с вложенными (с обязательным атрибутом srcset для ретина-экранов),
для подписи и CSS-классом .wp-block-image. Размеры изображения записываются в атрибуты width и height (в пикселях) для предотвращения сдвигов контента (Cumulative Layout Shift — CLS). Блок «Галерея» (core/gallery) использует
с вложенным
    , где каждый элемент — это
  • с
    и . Ключевое отличие: галерея генерирует разметку с атрибутом data-columns (число колонок, например, data-columns=\"2\"), а каждая миниатюра получает data-id (ID вложения из медиатеки WordPress). При загрузке изображения через галерею автоматически создаются три размера (thumbnail, medium, large) в формате WebP (если включен серверный конвертер). В блоке «Изображение» WebP-вариации не создаются по умолчанию — это увеличивает вес страницы на 30-40%, если картинка используется без сжатия.

    3. Какие стандарты качества (ISO/WCAG) соблюдает верстка из блоков «Группа» и «Обложка»?

    Блок «Группа» (core/group) по умолчанию генерирует

    с обязательным атрибутом role=\"group\" для лучшей поддержки скринридеров (WCAG 2.1, критерий 4.1.2). Внутри —
    , куда помещается содержимое. Это соответствует стандарту семантической вложенности и улучшает индексацию. Блок «Обложка» (core/cover) использует
    с role=\"img\" и aria-label для описания фонового изображения. Если изображение не загрузилось, происходит fallback на градиентный фон (CSS-свойство background-image с linear-gradient), заданный в атрибуте style. При этом обязательно указывается атрибут title (для tooltip) и alt для фонового изображения — в отличие от обычного тега , где alt обычен, здесь он выносится в aria-label самого блока. По стандартам ISO 22600 (управление доступом) — цветовые схемы в блоках передаются через hex-коды и не требуют дополнительных прав для чтения.

    4. Почему блок HTML-код выводит данные с потерей форматирования, если вставлять его в блок «Абзац», а не в кастомный HTML-блок?

    Блок «Абзац» (core/paragraph) автоматически оборачивает текст в теги

    и экранирует все теги (<, >, &) через htmlentities. Если вставить внутрь произвольный HTML-код (например,

    ), редактор заменит угловые скобки на < и >, что приведет к отображению сырого кода на фронтенде. Блок «HTML-код» (core/html) работает как чистая обертка: он не использует wp_kses_post и не фильтрует никакие теги, даже опасные (внедрение JavaScript через