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

ТЗ: Проектирование адаптивной дизайн-системы сайта в theme.json v3 (Fluid Typography, палитра и пресеты Spacing)

Создание масштабируемой дизайн-системы блочной темы в theme.json v3: адаптивные шрифты через CSS clamp() (Fluid Typography), Spacing Scale, переопределение дефолтных стилей стандартных блоков и теневые пресеты.

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

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

«Мы разрабатываем корпоративную тему на FSE. Нам нужно, чтобы все размеры шрифтов плавно масштабировались между мобильными и десктопом без сотен медиа-запросов (@media), цвета строго соответствовали брендбуку компании, а стандартные кнопки и заголовки имели фирменные скругления и тени из коробки.»
Ключевые требования:
  • •Конфигурация theme.json по актуальной спецификации v3 (WordPress 6.6+ / 7.0)
  • •Автоматический адаптивный расчет шрифтов через Fluid Typography (CSS clamp)
  • •Фирменная цветовая палитра и градиенты по утвержденному брендбуку
  • •Шкала отступов (Spacing Scale) с пресетами от 0.5rem до 6rem
  • •Переопределение дефолтных стилей стандартных блоков (core/button, core/heading, core/group)
Ограничения проекта:
  • •0 ручных @media правил для типографики в файлах стилей — всё управляется theme.json
  • •Совместимость с глобальными стилями редактора Gutenberg (Global Styles)
  • •Шрифты должны подключаться локально в WOFF2 без запросов к Google Fonts
Критерии приёмки (KPI):
  • Идеальная плавность изменения размера заголовков от 320px до 4K
  • 100% валидность файла по схеме https://schemas.wp.org/trunk/theme.json
  • Сокращение кастомного CSS темы на 70%

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

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

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

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

1
Этап 1 из 5

Базовая структура и Layout настройки в theme.json v3

~20 минЛегкий

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

Создайте файл theme.json в корне темы. Укажите $schema, version: 3, параметры contentSize (например, 800px) и wideSize (1280px).

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

Убедитесь, что редактор кода (VS Code) подключил официальную схему валидации для автодополнения.

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

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

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

Настройка адаптивной типографики (Fluid Typography)

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

Цветовая палитра и Spacing Scale пресеты

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

Переопределение дефолтных стилей стандартных блоков

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

Валидация theme.json и проверка в редакторе стилей

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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