Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Contenedor compuesto con InnerBlocks y bloqueo de diseño (templateLock='contentOnly')
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 30 из 54)
Especificación: Contenedor compuesto con InnerBlocks y bloqueo de diseño (templateLock='contentOnly')
Gutenberg y FSE5 шагов • +25 XP

Especificación: Contenedor compuesto con InnerBlocks y bloqueo de diseño (templateLock='contentOnly')

Diseño de bloques contenedores modulares: bloques anidados con InnerBlocks, plantillas predefinidas (atributo template), lista de bloques autorizados (allowedBlocks) y protección frente a roturas con 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)

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

Nuestra agencia desarrolla sitios para clientes donde los redactores rompen constantemente el diseño al borrar columnas, modificar márgenes o añadir bloques no permitidos. Necesitamos contenedores con bloqueo estricto de estructura.
Ключевые требования:
  • •Bloque contenedor compuesto utilizando <InnerBlocks /> con plantilla predefinida
  • •Lista blanca estricta en allowedBlocks para evitar la inserción de bloques no admitidos
  • •Uso de templateLock='contentOnly' para permitir editar texto e imágenes mientras se bloquea la estructura
  • •Diseño adaptativo en CSS Grid/Flexbox respetando los márgenes de theme.json
  • •Compatibilidad con bloques anidados previamente guardados
Ограничения проекта:
  • •Los editores no deben poder eliminar el contenedor ni alterar la estructura de columnas
  • •Simplificación de la barra de herramientas del editor al estar activo el modo contentOnly
Критерии приёмки (KPI):
  • Cero incidencias reportadas por rotura involuntaria de maquetación
  • Cumplimiento total del sistema de diseño corporativo aprobado
  • Compatibilidad completa con los estilos nativos de bloques y modos de alineación

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

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

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

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

1
Этап 1 из 5

Paso 1: Arquitectura del contenedor y configuración de block.json

~25 минЛегкий

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

Configure block.json para el contenedor. Active supports: 'align': ['wide', 'full'], 'color': true, 'spacing': true. Defina los bloques anidados permitidos en allowedBlocks (ej: core/heading, core/paragraph, core/button).

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

Evite que el bloque contenedor pueda anidarse a sí mismo indefinidamente si no está planificado.

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

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

2
Этап 2 из 5

Paso 2: Definición de la plantilla predeterminada

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

Paso 3: Integración de InnerBlocks con bloqueo contentOnly

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

Paso 4: Maquetación CSS Grid del contenedor y reglas adaptativas

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

Paso 5: Pruebas con perfiles de usuario y validación de experiencia

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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