Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE/Интерактивный блок на WordPress Interactivity API
К карточкам раздела «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 17 из 54)
ТЗ: Интерактивный блок на WordPress Interactivity API
Gutenberg & FSE4 шагов • +20 XP

ТЗ: Интерактивный блок на WordPress Interactivity API

Разработка реактивного клиентского блока калькулятора тарифов без jQuery и сторонних тяжелых фреймворков на базе официального WordPress Interactivity API, директив data-wp-* и SSR.

~8 ч работыУровень: MiddleWordPress 6.5+ / 7.0Interactivity APIblock.jsonrender.phpview.js@wordpress/interactivityCore Web Vitals INP
+5 XP за шаг
Выполнено 0 из 4 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

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

«Нам нужен динамический интерактивный блок переключения тарифов (месяц/год со скидкой 20%) и калькулятор стоимости в Gutenberg. Главное требование — никакой тяжелой сторонней гидратации и jQuery: страница должна загружаться мгновенно и иметь идеальный показатель INP < 100мс на мобильных устройствах.»
Ключевые требования:
  • •Реактивное переключение периода оплаты (месяц / год со скидкой 20%) без перезагрузки страницы
  • •Мгновенный динамический пересчет итоговой суммы и отображение бейджа экономии
  • •Серверный рендеринг первичного состояния в render.php (100% SEO-friendly)
  • •Клиентская логика строго на нативном @wordpress/interactivity (вес бандла < 10 КБ)
  • •Полная совместимость с блочным редактором Gutenberg и FSE-шаблонами
Ограничения проекта:
  • •Версия WordPress 6.5+ (рекомендуется 6.7+ или 7.0)
  • •Строгий запрет на jQuery, Alpine.js и тяжелые React runtime на клиентской стороне
  • •Индикатор взаимодействия Interaction to Next Paint (INP) < 100 мс на мобильных
Критерии приёмки (KPI):
  • INP < 100 мс на мобильных устройствах
  • Google PageSpeed Performance ≥ 95 баллов
  • Первичный HTML доступен поисковым роботам без выполнения JavaScript (SSR)
  • Блок успешно проходит аудит валидации Interactivity API

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

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

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

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

1
Этап 1 из 4

Конфигурация манифеста block.json для Interactivity API

~20 минЛегкий

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

Создайте манифест block.json для плагина или темы. Объявите поддержку Interactivity API в блоке supports, зарегистрируйте серверный файл render.php и клиентский ESM-скрипт view.js через поле viewScriptModule.

План и контрольные точки реализации:
1Указать apiVersion: 3 в block.json
2Включить "supports": { "interactivity": true }
3Указать "render": "file:./render.php"
4Указать "viewScriptModule": "file:./view.js"
Важные технические нюансы и подводные камни:

Начиная с WordPress 6.5 скрипты Interactivity API подключаются через Script Modules API (viewScriptModule), а не через обычный viewScript. Это гарантирует загрузку в виде нативного ES-модуля.

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

Использование apiVersion: 3 и viewScriptModule позволяет браузеру кэшировать рантайм Interactivity API между страницами сайта.

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

Валидный block.json с зарегистрированным модулем интерактивности.

JSON
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "agenticlab/pricing-calculator",
  "title": "Калькулятор тарифов (Interactivity)",
  "category": "widgets",
  "icon": "calculator",
  "supports": {
    "interactivity": true,
    "align": ["wide", "full"]
  },
  "attributes": {
    "monthlyPrice": { "type": "number", "default": 29 },
    "annualDiscount": { "type": "number", "default": 20 }
  },
  "editorScript": "file:./index.js",
  "render": "file:./render.php",
  "viewScriptModule": "file:./view.js"
}
2
Этап 2 из 4

Серверный рендеринг и директивы в render.php

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

Клиентский реактивный стор в view.js

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

Стилизация, Accessibility и профилирование INP

~25 минЛегкий

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

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

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

Интеграция

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

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

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

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