Блок Custom HTML: вставка кода, панели HTML/CSS/JS и редактируемые слоты

Что такое блок Custom HTML

Custom HTML (core/html) — блок для вставки произвольного HTML-кода в контент: виджеты сторонних сервисов, embed-коды, трекеры, кастомная разметка, которую нельзя собрать стандартными блоками.

Добавление блока

Два способа:

1. Block Inserter — кнопка + → поиск «Custom HTML».
2. Слеш-команда — в пустом абзаце введите /html и нажмите Enter.

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

После добавления блока нажмите кнопку Edit HTML — откроется модальное окно:

• Слева — редактор кода, справа — живое превью результата.
• Кнопка Enable/disable fullscreen в правом верхнем углу модала разворачивает окно на весь экран.
• Update — сохранить код и закрыть модал.

Тулбар блока: инструменты перемещения (drag-and-drop за шесть точек или стрелки вверх/вниз), кнопка Edit Code, меню More options (копировать, дублировать, переименовать). Боковой панели настроек у блока нет.

Панели HTML, CSS и JavaScript (WordPress 7.0+)

Начиная с WordPress 7.0, блок имеет три отдельные панели редактирования: HTML, CSS и JavaScript.

Доступ к панелям CSS и JavaScript ограничен capability unfiltered_html:

• Есть unfiltered_html (Administrator, Editor на одиночном сайте) — все три панели доступны, код сохраняется как есть.
• Нет unfiltered_html (Contributor и ниже) — панели CSS/JS не показываются, а при сохранении записи контент блока прогоняется через wp_kses(): запрещённые теги вроде <script> и <iframe> вырезаются.

Важно для multisite: на мультисайте unfiltered_html по умолчанию есть только у Super Admin — даже администраторы отдельных сайтов сети получат санитизацию через wp_kses().

Редактируемые блоки внутри Custom HTML (WordPress 7.1)

⚠️ Функция WordPress 7.1 — на момент записи релиз в разработке (PR #79115).

В 7.1 блок научился чередовать статичный HTML с обычными редактируемыми блоками:

<h2>Static heading</h2>
<!-- wp:paragraph -->
<p>Editable paragraph</p>
<!-- /wp:paragraph -->
<footer>Static footer</footer>

Как это работает в редакторе:

• Статичная разметка рендерится инертной — её нельзя редактировать визуально.
• Внутренние блоки редактируются на месте, но залочены: их нельзя перемещать, удалять или добавлять им соседей. Окружающая структура остаётся нетронутой.
• Полная разметка доступна в модале Edit HTML.
• Сериализация работает в обе стороны без изменений (round-trip) — существующий контент не затрагивается.

Зачем это AI-инструментам: block markup становится дружелюбной мишенью для генерации. Модель может выдать один Custom HTML блок, смешивающий произвольную разметку с редактируемыми слотами — без кастомного блока и без build step — и результат сразу безопасно редактируется пользователем.

Вариации с innerContent: «higher level blocks» (WordPress 7.1)

⚠️ Функция WordPress 7.1 — на момент записи релиз в разработке (PR #79659).

Block variations получили поле innerContent: массив статичных HTML-фрагментов, где каждый null отмечает позицию соответствующего элемента innerBlocks. Это позволяет отгружать фиксированную разметку с редактируемыми слотами как отдельный пункт инсертера — без регистрации кастомного блока:

wp.blocks.registerBlockVariation( 'core/html', {
  name: 'testimonial-card',
  title: 'Testimonial Card',
  icon: 'format-quote',
  innerContent: [ '<div class="testimonial">', null, '</div>' ],
  innerBlocks: [
    [ 'core/paragraph', { content: 'An inspiring quote.' } ],
  ],
} );

Вставка такой вариации создаёт Custom HTML блок с предустановленной структурой и редактируемым абзацем внутри.

Отличие от паттерна: в паттерне пользователь может перестраивать всё — двигать, удалять, добавлять блоки (если не настроен Block Locking). В innerContent-вариации редактируются только обозначенные слоты, структура зафиксирована.

Ограничение: innerContent применяется только к вариациям core/html — для остальных блоков поле игнорируется.

Когда что использовать

Задача	Инструмент
Вставить виджет, embed, трекер, произвольную разметку	Блок Custom HTML
Фиксированная разметка + редактируемые слоты, без кастомного блока (WP 7.1+)	innerContent-вариация core/html
Переиспользуемая композиция, которую пользователь может перестраивать	Блочный паттерн
Композиция с контролем правок (запрет перемещения/удаления)	Паттерн + Block Locking
Свои атрибуты, инспектор, динамический рендеринг	Кастомный блок

Связанные страницы

• Блочный редактор WordPress: добавление контента блоками
• Icons API: SVG-иконки в WordPress 7.0 и 7.1
• Паттерны (Block Patterns)
• Block Locking и паттерны
• Кастомный CSS в WordPress

Материалы и источники

• Editable blocks inside the Custom HTML block — Make WordPress Core (dev-note 7.1)
• Custom HTML — WordPress.org Documentation
• Gutenberg PR #79115: interleaving static HTML with editable blocks
• Gutenberg PR #79659: innerContent field for block variations