Main/WordPress Fullstack/Blueprints/Gutenberg & FSE/Designing a Responsive Theme Design System in theme.json v3
Back to «Gutenberg & FSE» cards
Gutenberg & FSE(ТЗ 32 из 54)
Spec: Designing a Responsive Theme Design System in theme.json v3
Gutenberg & FSE5 шагов • +25 XP

Spec: Designing a Responsive Theme Design System in theme.json v3

Architecting an enterprise WordPress theme design system: theme.json version 3, fluid typography with clamp() calculation, color palettes with semantic naming, spacing scales, and block-level style presets.

~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)

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

We need a unified, bulletproof design system for our corporate multisite network. Every site must share identical typography scales, brand color tokens, and consistent block padding, controlled strictly from theme.json without messy custom CSS.
Ключевые требования:
  • •theme.json specification version 3 with strict JSON schema validation
  • •Fluid typography system (settings.typography.fluid) with calculated min/max viewport limits
  • •Semantic color palette tokens (base, contrast, primary, secondary, neutral, error)
  • •Standardized spacing scale (settings.spacing.spacingSizes) replacing arbitrary margins
  • •Block-level default styling (core/button, core/heading, core/group, core/table)
Ограничения проекта:
  • •WordPress 6.6+ / 6.7+ compatibility
  • •Zero !important overrides in CSS — rely entirely on CSS custom properties generated by theme.json
  • •Strict color contrast ratio compliance (WCAG AAA for text, AA for UI components)
Критерии приёмки (KPI):
  • Theme CSS bundle size reduced by 70% compared to legacy SCSS themes
  • 100% color contrast score on automated accessibility audits
  • Global styles cleanly editable via Site Editor Styles panel

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

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

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

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

1
Этап 1 из 5

Step 1: theme.json v3 schema declaration & layout dimensions

~20 минЛегкий

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

Create theme.json in theme root. Declare $schema: 'https://schemas.wp.org/trunk/theme.json' and version: 3. Configure settings.layout with contentSize: '800px' and wideSize: '1240px'.

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

Always declare version 3 to enable the latest layout and style engine capabilities.

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

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

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

Step 2: Fluid typography engine & font family tokens

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

Step 3: Semantic color palette & duotone filters

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

Step 4: Standardized spacing scale & units

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

Step 5: Block-level default styles & style variations

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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