Кастомный блок Gutenberg: 5 ошибок, из-за которых он ломает редактор

Кастомный блок Gutenberg: 5 ошибок, из-за которых он ломает редактор

Кастомный блок кажется простым: вывел поля, добавил render, и готово. На практике проблемы обычно сидят не в HTML, а в структуре блока и его поведении в редакторе.

— не задают четкую схему атрибутов: потом данные «прыгают» между сохранением и редактированием
— смешивают логику и разметку: блок тяжело поддерживать и почти невозможно переиспользовать
— забывают про fallback: если данные пустые, блок должен аккуратно рендерить заглушку
— делают слишком много настроек в одном блоке: интерфейс перегружается и мешает работе
— не проверяют responsive-режимы: в редакторе всё выглядит нормально, а на фронте ломается

Лучше строить блок от минимального ядра: один понятный сценарий, предсказуемые атрибуты, отдельный шаблон для вывода и аккуратные проверки на пустые значения. Если нужен сложный интерфейс — разбейте его на несколько блоков или вынесите часть логики в блоки-паттерны.

Ещё одно правило: блок должен быть удобен не только автору, но и тому, кто будет править контент через полгода. Чем меньше скрытой магии внутри, тем проще сопровождение.