Main/WordPress Fullstack/Blueprints/Gutenberg & FSE/Creating a Unique Theme from Scratch (FSE / Blocks & Classic)
Back to «Gutenberg & FSE» cards
Gutenberg & FSE(ТЗ 1 из 54)
Spec: Creating a Unique Theme from Scratch (FSE / Blocks & Classic)
Gutenberg & FSE7 шагов • +35 XP

Spec: Creating a Unique Theme from Scratch (FSE / Blocks & Classic)

Comprehensive guide for developing a ultra-fast native WordPress theme with Full Site Editing (FSE), block templates, theme.json v3, fluid typography, Block Bindings API, and classic PHP template fallbacks.

~10 ч работыУровень: MiddlePHP 8.3/8.4WordPress 7.0 ReadyGutenberg Block Themestheme.json v3Block Bindings APIInteractivity APIView TransitionsLocal WOFF2Schema.org JSON-LD
+5 XP за шаг
Выполнено 0 из 7 шагов (0%)
Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)

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

I need a bespoke design for a technology blog. It must be blazing fast on mobile devices, load in under a second, and allow me to visually modify headers, template parts, and typography in the Site Editor without coding.
Ключевые требования:
  • •Bespoke layout converted from Figma without third-party page builders
  • •Full Site Editing (FSE) block theme support or classic hybrid architecture
  • •Fluid typography and responsive design system configured in theme.json v3
  • •Strict mobile performance (LCP < 1.5s, CLS = 0, INP < 150ms)
  • •Block Bindings API integration for native post meta binding without ACF clutter
Ограничения проекта:
  • •Server environment: PHP 8.3+, WordPress 6.7+ / 7.0+
  • •Zero commercial page builders (no Elementor, Divi, Beaver)
  • •Locally hosted web fonts for GDPR compliance (0 external Google requests)
  • •Two-week delivery timeline
Критерии приёмки (KPI):
  • PageSpeed Mobile >= 90, Desktop >= 95
  • Passes WordPress Theme Check and Theme Sniffer with 0 errors
  • All components editable via Gutenberg Site Editor with contentOnly locking

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

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

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

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

1
Этап 1 из 7

Step 1: Environment initialization & theme directory setup

~60 минЛегкий

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

Create theme folder in wp-content/themes/. Create required root files: style.css with complete metadata headers (Theme Name, Template, Requires at least: 6.7, Requires PHP: 8.2), and index.php/templates/index.html.

План и контрольные точки реализации:
1Получить доступ к Figma-макету от дизайнера
2Выписать все уникальные компоненты из макета (header, footer, hero, card, CTA)
3Проверить версию WordPress на сервере клиента (wp-admin → Консоль)
4Запросить у клиента шрифты в формате WOFF2
5Согласовать палитру цветов (primary, secondary, background, text)
6Уточнить список динамических полей для Block Bindings API (время чтения, бейджи)
Важные технические нюансы и подводные камни:

Ensure the directory name matches textdomain exactly to prevent localization mismatches.

Совет эксперта (Best Practice):

Создайте в Notion или Google Docs таблицу «Компонент → Gutenberg блок → Block Bindings → Статус». Это даст клиенту прозрачность, а вам — контроль над объёмом работы.

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

Утверждённое ТЗ: таблица компонентов, палитра, шрифты, список динамических полей.

DocsWordPress Full Site Editing DocumentationИнструментFigma Community — WordPress UI Kit
2
Этап 2 из 7

Step 2: Asset management & localized font configuration

~20 минЛегкий
3
Этап 3 из 7

Step 3 (FSE): Block templates & template parts architecture

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

Step 4: Block Patterns, Block Bindings & Custom Layouts

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

Step 5 (FSE): Global design system in theme.json v3

~45 минСредний
6
Этап 6 из 7

Step 6 (FSE): Content locking with templateLock='contentOnly'

~75 минСложный
7
Этап 7 из 7

Step 7: Production build, Theme Check QA & client handover

~60 минСредний

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

8 антипаттерна

Что сдаём клиенту (Deliverables)

Чек-лист сдачи
Тема активирована на production-сервере клиента под управлением PHP 8.3/8.4 и WordPress 7.0
Показатели PageSpeed Mobile ≥ 90 и Desktop ≥ 95 баллов, INP < 200 мс, CLS = 0
Все компоненты страниц редактируемы через Gutenberg с защитой макета (templateLock="contentOnly")
Динамические метаполя подключены через нативный Block Bindings API (без тяжелого React-кода)
Локальные шрифты WOFF2 с предзагрузкой rel="preload" (0 внешних сетевых запросов к Google)
Встроенная микроразметка Schema.org TechArticle в формате JSON-LD для поисковых AI-систем (SGE/GEO)
Плавные кинематографичные переходы страниц с поддержкой View Transitions API
Документация с командами WP-CLI для управления и очистки кэша шаблонов wp_template
ZIP-архив темы для резервного копирования и прохождение Theme Check без замечаний

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

Интеграция

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

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

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

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