Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Diseño de un sistema de diseño adaptativo en theme.json v3
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 32 из 54)
Especificación: Diseño de un sistema de diseño adaptativo en theme.json v3
Gutenberg y FSE5 шагов • +25 XP

Especificación: Diseño de un sistema de diseño adaptativo en theme.json v3

Arquitectura de diseño global para temas de WordPress: especificación theme.json v3, tipografía fluida con cálculo de clamp(), paleta semántica de colores, escalas de espaciado y estilos por bloque.

~7 ч работыУровень: Juniortheme.json v3Fluid Typography (clamp)Spacing ScaleCSS Custom PropertiesBlock Style VariationsFull Site Editing (FSE)
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~7 рабочих часов
Фриланс вилка~$315 – $525 (€280 – €490)
Оценка веб-студии~$665 – $1,120 (€630 – €1050)

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

Necesitamos un sistema de diseño consistente y seguro para la red multisitio de la empresa. Todos los sitios deben compartir la misma escala tipográfica, colores corporativos y márgenes estandarizados desde theme.json sin recurrir a CSS disperso.
Ключевые требования:
  • •Uso de theme.json versión 3 con validación estricta del esquema JSON
  • •Sistema de tipografía fluida (settings.typography.fluid) con cálculo de límites mínimo y máximo
  • •Tokens semánticos para la paleta de colores (base, contrast, primary, secondary, neutral, error)
  • •Escala de espaciado estándar (settings.spacing.spacingSizes) en sustitución de valores libres en píxeles
  • •Estilos por defecto para bloques principales (core/button, core/heading, core/group, core/table)
Ограничения проекта:
  • •Compatibilidad con WordPress 6.6+ / 6.7+
  • •Cero reglas con !important en CSS — uso integral de variables CSS generadas por theme.json
  • •Cumplimiento riguroso de contraste de color WCAG AAA para texto y AA para elementos gráficos
Критерии приёмки (KPI):
  • Reducción del 70% en el tamaño de las hojas de estilo del tema frente a desarrollos tradicionales
  • Puntuación perfecta de contraste de color en auditorías de accesibilidad
  • Modificación ágil de la identidad visual desde el panel Estilos del editor del sitio

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

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

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

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

1
Этап 1 из 5

Paso 1: Declaración del esquema theme.json v3 y dimensiones del diseño

~20 минЛегкий

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

Cree theme.json en la raíz del tema. Añada $schema: 'https://schemas.wp.org/trunk/theme.json' y version: 3. Configure settings.layout con contentSize: '800px' y wideSize: '1240px'.

План и контрольные точки реализации:
1Задать version: 3
2Указать contentSize и wideSize
3Включить appearanceTools: true для разблокировки всех тулбаров
Важные технические нюансы и подводные камни:

Utilice siempre version 3 para acceder a las últimas prestaciones del motor de diseño de WordPress.

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

Каркас theme.json с включенными инструментами внешнего вида.

JSON
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "layout": {
      "contentSize": "840px",
      "wideSize": "1280px"
    },
    "appearanceTools": true
  }
}
2
Этап 2 из 5

Paso 2: Motor de tipografía fluida y familias de fuentes

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

Paso 3: Paleta de color semántica y filtros bitono

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

Paso 4: Escala de espaciado estandarizada y unidades

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

Paso 5: Estilos por defecto de bloques y variaciones de estilo

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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