🔷 Блок: Custom HTML / Пользовательский HTML

📌 Что это

Custom HTML — это виджет-блок Gutenberg для вставки собственного HTML-кода на страницу.

Например:

HTML-разметка;
встроенный код;
код от стороннего сервиса;
таблица, сделанная вручную;
простая форма;
иконка через SVG;
виджет от внешней платформы;
небольшой кастомный элемент.

Простыми словами:

Custom HTML = блок, куда можно вставить HTML-код вручную.

---

⚙️ Функции

Блок позволяет:

вставить HTML-код;
редактировать код прямо в редакторе;
предварительно посмотреть результат;
добавить embed-код от стороннего сервиса;
создать простой кастомный элемент;
вставить структуру, которой нет среди стандартных блоков;
использовать CSS-классы внутри HTML;
добавлять ссылки, контейнеры, списки, таблицы и другие HTML-элементы.

Например:

<div class="custom-box">
  <h3>Заголовок</h3>
  <p>Текст внутри HTML-блока.</p>
</div>

---

🎯 Зачем нужен

Чтобы добавить на страницу элемент, которого нет среди обычных блоков Gutenberg.

Например:

вставить код стороннего виджета;
добавить кастомную HTML-структуру;
сделать нестандартный блок;
вставить простую таблицу;
добавить кастомную ссылку;
добавить SVG-иконку;
проверить HTML-код прямо на странице.

---

📍 Где используется чаще всего

лендинги;
страницы с внешними сервисами;
страницы с формами;
инструкции;
документация;
сайдбар;
футер;
страницы с нестандартной разметкой;
технические блоки сайта.

---

⚠️ Важно

Custom HTML — это уже ближе к коду.

Если ты просто хочешь добавить текст, картинку, кнопку или список — лучше использовать обычные блоки:

Paragraph
Image
Buttons
List
Table

Custom HTML нужен тогда, когда стандартных блоков не хватает.

---

⚠️ HTML — это не CSS и не JavaScript

В этот блок обычно вставляют именно HTML-разметку.

Например:

<p>Это абзац текста</p>
<a href="https://example.com">Это ссылка</a>

CSS лучше добавлять отдельно, например через:

Appearance → Customize → Additional CSS

Или в настройках темы, если они есть.

JavaScript тоже лучше не вставлять без понимания, потому что тема, WordPress или безопасность сайта могут его ограничить.

---

⚠️ Preview / Предпросмотр

У Custom HTML обычно есть два режима:

HTML
Preview

В режиме HTML ты редактируешь код.
В режиме Preview смотришь, как этот код будет выглядеть на странице.

Это удобно, чтобы быстро проверить, не сломалась ли разметка.

---

⚠️ Можно сломать верстку

Если в HTML-коде ошибка, блок или даже часть страницы может выглядеть неправильно.

Например, если забыть закрыть тег:

<div>
  <p>Текст
</div>

Лучше писать аккуратно и проверять результат через Preview.

---

⚠️ Тема может влиять

Внешний вид HTML-блока всё равно зависит от темы.

Даже если ты вставил свой HTML, тема может влиять на:

шрифты;
цвет ссылок;
отступы;
ширину блока;
стили заголовков;
стили таблиц;
поведение на мобильной версии.

То есть HTML задаёт структуру, но внешний вид часто подтягивается из CSS темы.

---

🧠 Простыми словами

Custom HTML — это блок для ручной вставки HTML-кода.

Он нужен, когда обычных Gutenberg-блоков недостаточно.

Для обычного контента лучше использовать стандартные блоки.
Для нестандартной разметки или внешнего кода — Custom HTML.

⚠️ Да, в большинстве случаев именно Custom HTML используют для вставки на сайт приложений, сделанных на стороне.

То есть схема такая:

Приложение сделано отдельно
↓
оно размещено где-то по ссылке
↓
в WordPress вставляем его через iframe / embed-код
↓
для этого используем Custom HTML

Например:

<iframe 
  src="https://example.com/my-app"
  width="100%" 
  height="700"
  style="border: none;">
</iframe>