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

ТЗ: Розробка складеного блока-контейнера (InnerBlocks) із захистом верстки (templateLock='contentOnly')

Проєктування структурних блоків-контейнерів: вкладені InnerBlocks, попередньо налаштовані макети (атрибут template), обмеження дозволених блоків (allowedBlocks) та надійний захист сітки через 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)

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

Наша агенція створює сайти для клієнтів, де контент-менеджери постійно ламають верстку: випадково видаляють колонки, збивають відступи або вставляють заборонені блоки. Потрібні надійні контейнери з суворим блокуванням макета.
Ключевые требования:
  • •Кастомний складений блок із компонентом <InnerBlocks /> та готовим шаблоном вкладених елементів
  • •Суворий білий список allowedBlocks для блокування випадкової вставки непідтримуваних блоків
  • •Застосування templateLock='contentOnly' для редагування лише контенту без можливості зрушити розмітку
  • •Адаптивна CSS Grid/Flexbox сітка зі збереженням пресетів відступів із theme.json
  • •Повна зворотна сумісність для вже створених вкладених блоків
Ограничения проекта:
  • •Редактори контенту не повинні мати змоги видалити зовнішній контейнер або змінити структуру сітки
  • •Спрощення панелі інструментів у режимі блокування контенту
Критерии приёмки (KPI):
  • Нуль звернень клієнта через випадково поламані макети сторінок
  • 100% відповідність затвердженій дизайн-системі сайту
  • Підтримка нативних стилів блоків та стандартних режимів вирівнювання

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

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

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

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

1
Этап 1 из 5

Крок 1: Архітектура блока-контейнера та налаштування block.json

~25 минЛегкий

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

Створіть block.json для контейнера. Увімкніть підтримку: 'align': ['wide', 'full'], 'color': true, 'spacing': true. Визначте список дозволених вкладених блоків allowedBlocks (наприклад, core/heading, core/paragraph, core/button).

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

Не дозволяйте блоку-контейнеру безкінечно вкладати самого себе, якщо це не передбачено проєктом.

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

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

2
Этап 2 из 5

Крок 2: Оголошення структури шаблону в масиві констант

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

Крок 3: Підключення InnerBlocks із захистом contentOnly

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

Крок 4: Стилізація сітки контейнера та адаптивні правила

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

Крок 5: Тестування ролей доступу та перевірка UX

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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