Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE/Разработка составного блока-контейнера (InnerBlocks) с жестким шаблоном и защитой верстки (templateLock="contentOnly")
К карточкам раздела «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 30 из 54)
ТЗ: Разработка составного блока-контейнера (InnerBlocks) с жестким шаблоном и защитой верстки (templateLock="contentOnly")
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Разработка составного блока-контейнера (InnerBlocks) с жестким шаблоном и защитой верстки (templateLock="contentOnly")

Проектирование сложных составных блоков с useInnerBlocksProps: ограничение вложенных блоков через allowedBlocks, жесткая схема template и защита макета от разрушения клиентом через templateLock="contentOnly".

~9 ч работыУровень: MiddleReact & JSX@wordpress/block-editoruseInnerBlocksPropstemplateLock="contentOnly"allowedBlocks restrictionCSS Subgrid
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~9 рабочих часов
Фриланс вилка~$405 – $675 (€360 – €630)
Оценка веб-студии~$855 – $1,440 (€810 – €1350)

ТЗ заказчика (исходный бриф):

«Дизайнеры нарисовали блок «Тарифный план»: карточка состоит из заголовка тарифа, бейджа скидки, списка преимуществ с галочками и кнопки оформления. Если дать клиенту обычную колонку, он случайно удаляет стили и двигает элементы. Нужен жесткий защищенный контейнер, где клиент может редактировать только текст и цены, не имея возможности сломать структуру карточки.»
Ключевые требования:
  • •Составной блок «Тарифная карточка», состоящий из предопределенных вложенных блоков
  • •Блокировка структуры: клиент не может удалить кнопку или заголовок, но может менять их текст (contentOnly)
  • •Ограничение списка доступных для вставки блоков (allowedBlocks)
  • •Поддержка стилей выделения карточки («Популярный тариф», акцентная рамка)
  • •Сетка карточек на CSS Subgrid для идеального выравнивания кнопок покупки по нижнему краю
Ограничения проекта:
  • •Использование современного API useInnerBlocksProps вместо устаревшего компонента <InnerBlocks />
  • •Корректная сериализация в save() без поломки разметки валидации Gutenberg
  • •0 сторонних конструкторов страниц (только нативный React редактора)
Критерии приёмки (KPI):
  • 100% защита структуры: невозможность случайно разрушить макет контент-менеджером
  • Идеальное выравнивание элементов карточек разной высоты через CSS Grid / Subgrid
  • Легковесный чистый HTML на фронтенде

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Конфигурация block.json составного блока

~25 минЛегкий

Практическое руководство:

Создайте block.json для agenticlab/pricing-card. Добавьте атрибут isFeatured (булево значение для подсветки карточки) и поддержку цветов и отступов.

План и контрольные точки реализации:
1Создать block.json с apiVersion: 3
2Объявить атрибут isFeatured со значением по умолчанию false
3Включить supports для кастомизации фона и границ
Важные технические нюансы и подводные камни:

Укажите parent: ["agenticlab/pricing-table"], если блок должен вставляться строго внутрь родительского контейнера-таблицы.

Ожидаемый артефакт этапа:

Конфигурационный файл блочного контейнера.

2
Этап 2 из 5

Настройка хука useInnerBlocksProps и шаблона template в edit.tsx

~45 минСредний
3
Этап 3 из 5

Настройка статического сохранения в save.tsx

~25 минЛегкий
4
Этап 4 из 5

Верстка сетки тарифов на CSS Grid и Subgrid

~35 минСредний
5
Этап 5 из 5

Тестирование защиты макета в редакторе

~20 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами