Сначала определите данные карточки
Решите, какие значения принадлежат содержимому: заголовок, пояснение и, возможно, выбранный вариант оформления. Их описывают как атрибуты блока с подходящими типами и правилами получения сохранённых значений. Файл block.json помогает держать метаданные блока в едином описании для регистрации. При этом не каждое состояние интерфейса нужно сохранять. Открыта ли панель настройки в текущую секунду — другая задача, чем текст, который должен остаться в записи. Такое разделение предотвращает случайное исчезновение содержимого после перезагрузки.
Интерфейс редактирования меняет атрибуты
Компонент Edit показывает элементы управления и использует текущие значения атрибутов. Когда пользователь изменяет заголовок, обновление должно попасть в соответствующий атрибут через предусмотренный механизм, например setAttributes. Локальное состояние React может быть полезно для временного поведения, но само по себе не гарантирует сохранение данных блока. Для проверки представьте простой сценарий: ввести текст, сохранить запись, закрыть редактор и открыть снова. Если значение пропало, красивое поле ввода не выполнило основную задачу. Начните с минимального набора данных, прежде чем добавлять сложные панели.
Выберите статическое или динамическое представление
В статическом блоке функция save формирует сохраняемую разметку на основе атрибутов. Она не должна зависеть от случайных значений или изменяющихся внешних данных, которые дадут другой результат при повторной проверке. Динамический блок может формировать вывод на сервере, что подходит для некоторых обновляемых данных. Это отдельное архитектурное решение, а не способ исправить любую ошибку сохранения. В обоих случаях нужно понимать, что хранится в записи и где строится итоговый вывод. Не предполагайте, что React-интерфейс редактора автоматически становится интерактивным приложением на публичной странице.
Проверьте жизненный цикл блока
Проверка включает вставку, редактирование, сохранение, повторное открытие и просмотр на сайте. Для карточки добавьте пустой заголовок, длинное пояснение и несколько экземпляров рядом. Убедитесь, что изменение одного блока не затрагивает другой. Отдельно проверьте стили: оформление редактора и публичной страницы может различаться. Если меняется структура сохраняемой разметки существующего блока, заранее учитывают совместимость старого содержимого и предусмотренные механизмы миграции. Иначе обновление кода может привести к сообщениям о недействительном блоке у уже созданных записей.
Попробуйте на практике
Спроектируйте карточку Gutenberg на бумаге до написания кода.
- Запишите два сохраняемых атрибута: заголовок и пояснение; отдельно перечислите временное состояние интерфейса.
- Нарисуйте, какие поля видит редактор и какое содержимое увидит посетитель.
- Выберите статический вариант и опишите словами, как атрибуты превращаются в итоговую разметку.
- Составьте сценарий проверки с сохранением, повторным открытием, пустыми значениями и двумя независимыми карточками.
Как проверить результат. Сохраняемые данные отделены от временного интерфейса, роль Edit не смешана с save, а проверка включает повторное чтение записи и публичный вывод.
Частые вопросы
Можно ли хранить содержимое только в useState?
Для постоянного содержимого блока этого недостаточно. Временное состояние компонента и данные, которые WordPress сохраняет в записи, выполняют разные функции.
Почему блок выглядит правильно в редакторе, но иначе на сайте?
Причина может быть в различии разметки, стилей или способа вывода. Проверяйте публичное представление отдельно, а не только компонент редактирования.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.