Main/WordPress Fullstack/Blueprints/Gutenberg & FSE/Compound InnerBlocks Container with Layout Locking (templateLock='contentOnly')
Back to «Gutenberg & FSE» cards
Gutenberg & FSE(ТЗ 30 из 54)
Spec: Compound InnerBlocks Container with Layout Locking (templateLock='contentOnly')
Gutenberg & FSE5 шагов • +25 XP

Spec: Compound InnerBlocks Container with Layout Locking (templateLock='contentOnly')

Architecting structured multi-block container components: nested InnerBlocks, predefined templates (template attribute), allowedBlocks restrictions, and bulletproof layout protection via 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)

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

Our agency builds client websites where marketing editors constantly break page layouts by accidentally deleting column wrappers, altering padding, or inserting unsupported blocks. We need container blocks with strict template locking.
Ключевые требования:
  • •Custom compound block utilizing <InnerBlocks /> with predefined block template
  • •Strict allowedBlocks whitelist preventing arbitrary block insertion
  • •Implementation of templateLock='contentOnly' to allow text/image edits while locking DOM structure
  • •Responsive container layout with CSS Grid/Flexbox and theme.json spacing integration
  • •Seamless migration and backward compatibility for existing nested layouts
Ограничения проекта:
  • •Content editors must be unable to delete outer wrapper containers
  • •Editor toolbar must simplify automatically to hide destructive actions
Критерии приёмки (KPI):
  • 0 accidental layout breakages reported by client content team
  • 100% adherence to corporate design system constraints
  • Full support for core block styles and alignment presets

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

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

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

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

1
Этап 1 из 5

Step 1: Container block architecture & block.json schema

~25 минЛегкий

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

Create container block block.json. Set 'supports': { 'align': ['wide', 'full'], 'color': true, 'spacing': true }. Define nested allowedBlocks (e.g., ['core/heading', 'core/paragraph', 'core/button']).

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

Do not allow container block to nest itself recursively unless explicitly intended.

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

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

2
Этап 2 из 5

Step 2: Predefined template array definition

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

Step 3: InnerBlocks configuration & contentOnly locking

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

Step 4: Container CSS Grid styling & responsive rules

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

Step 5: Role-based locking testing & editor UX validation

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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