Main/WordPress Fullstack/Blueprints/Gutenberg & FSE/Interactive Block with WordPress Interactivity API
Back to «Gutenberg & FSE» cards
Gutenberg & FSE(ТЗ 17 из 54)
Spec: Interactive Block with WordPress Interactivity API
Gutenberg & FSE4 шагов • +20 XP

Spec: Interactive Block with WordPress Interactivity API

Developing stateful, reactive WordPress blocks with the native Interactivity API: zero external frontend frameworks (no React runtime on frontend), reactive stores, directive syntax (data-wp-interactive, data-wp-context, data-wp-on), and instant UI updates.

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

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

We want an interactive quiz and instant product filter block. We do not want React or Alpine.js loaded on the frontend because it slows down our Core Web Vitals. We need the native WordPress Interactivity API.
Ключевые требования:
  • •Native Interactivity API integration with supports.interactivity = true in block.json
  • •Interactive directives: data-wp-interactive, data-wp-context, data-wp-bind, data-wp-on--click
  • •Client-side reactive store defined in view.js using store() function
  • •Server-side state initialization via wp_interactivity_state() in PHP
  • •Sub-50ms interaction latency with zero layout shift (INP < 100ms)
Ограничения проекта:
  • •WordPress 6.5+ (Interactivity API core requirement)
  • •Zero third-party runtime bundles on frontend (no Vue, Alpine, or React on client)
  • •Accessible keyboard and screen reader state updates
Критерии приёмки (KPI):
  • Core Web Vitals INP (Interaction to Next Paint) < 100ms
  • Frontend JavaScript asset payload < 10KB
  • Zero hydration mismatch warnings in browser console

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

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

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

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

1
Этап 1 из 4

Step 1: block.json configuration with interactivity support

~20 минЛегкий

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

Set apiVersion: 3 in block.json. Add 'supports': { 'interactivity': true }. Declare 'viewScriptModule': 'file:./view.js' to load reactive code as a native ES module.

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

Use 'viewScriptModule' rather than 'viewScript' to load the script as an ES module managed by the Script Modules API.

Совет эксперта (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

Step 2: Server-side markup & directive orchestration

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

Step 3: Reactive store definition in view.js

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

Step 4: INP performance optimization & accessibility testing

~25 минЛегкий

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

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

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

Интеграция

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

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

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

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