Головна/WordPress Fullstack/Блупринти/Gutenberg & FSE/Проєктування адаптивної дизайн-системи сайту в theme.json v3
До карток розділу «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 32 из 54)
ТЗ: Проєктування адаптивної дизайн-системи сайту в theme.json v3
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Проєктування адаптивної дизайн-системи сайту в theme.json v3

Побудова корпоративної дизайн-системи теми: специфікація theme.json v3, адаптивна типографіка з розрахунком clamp(), семантична палітра кольорів, пресети відступів та стилі на рівні блоків.

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

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

Нам потрібна єдина надійна дизайн-система для мультисайту компанії. Усі сайти мають використовувати однакові розміри шрифтів, брендові кольори та стандартні відступи, які контролюються суворо через theme.json без кастомного CSS.
Ключевые требования:
  • •Специфікація theme.json версії 3 зі строгою валідацією схеми
  • •Адаптивна система типографіки (settings.typography.fluid) із розрахунком меж ширини екрана
  • •Семантичні токени палітри кольорів (base, contrast, primary, secondary, neutral, error)
  • •Стандартизована шкала відступів (settings.spacing.spacingSizes) замість довільних значень
  • •Базові стилі для стандартних блоків (core/button, core/heading, core/group, core/table)
Ограничения проекта:
  • •Сумісність із WordPress 6.6+ / 6.7+
  • •Повна відмова від директиви !important — використання згенерованих CSS-змінних
  • •Суворе дотримання коефіцієнтів контрастності WCAG AAA для тексту та AA для графіки
Критерии приёмки (KPI):
  • Зменшення загального обсягу CSS-файлів теми на 70% порівняно зі звичайними темами
  • 100% показник контрастності кольорів у звітах інструментів доступності
  • Зручна зміна стилів через вкладку «Стилі» в редакторі сайту

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

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

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

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

1
Этап 1 из 5

Крок 1: Декларація схеми theme.json v3 та розміри макета

~20 минЛегкий

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

Створіть theme.json у корені теми. Додайте $schema: 'https://schemas.wp.org/trunk/theme.json' та version: 3. Налаштуйте settings.layout із параметрами contentSize: '800px' та wideSize: '1240px'.

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

Завжди обирайте version 3 для використання найновіших можливостей рушія стилів 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

Крок 2: Налаштування адаптивної типографіки та сімейств шрифтів

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

Крок 3: Семантична палітра кольорів та дуотонові фільтри

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

Крок 4: Стандартизовані пресети відступів та одиниці виміру

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

Крок 5: Базові стилі блоків та колірні варіації теми

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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