Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Bloque interactivo con WordPress Interactivity API
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 17 из 54)
Especificación: Bloque interactivo con WordPress Interactivity API
Gutenberg y FSE4 шагов • +20 XP

Especificación: Bloque interactivo con WordPress Interactivity API

Desarrollo de bloques reactivos sin librerías externas en el cliente: integración con la Interactivity API nativa de WordPress, directivas (data-wp-interactive, data-wp-context, data-wp-on), almacenamiento reactivo en view.js y respuesta inmediata en la interfaz.

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

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

Necesitamos un cuestionario interactivo y un bloque de filtrado instantáneo. No queremos cargar React ni Alpine.js en el frontend porque perjudica nuestras Core Web Vitals. Necesitamos usar la Interactivity API nativa de WordPress.
Ключевые требования:
  • •Integración con la Interactivity API mediante supports.interactivity = true en block.json
  • •Directivas interactivas: data-wp-interactive, data-wp-context, data-wp-bind, data-wp-on--click
  • •Almacén reactivo en el cliente definido en view.js mediante la función store()
  • •Inicialización del estado en el servidor mediante wp_interactivity_state() en PHP
  • •Latencia de interacción inferior a 50ms sin desplazamiento acumulado del diseño (INP < 100ms)
Ограничения проекта:
  • •WordPress 6.5+ (requisito de núcleo para la Interactivity API)
  • •Cero librerías o frameworks de terceros en el frontend (sin Vue, Alpine o React en cliente)
  • •Accesibilidad completa con teclado y avisos para lectores de pantalla
Критерии приёмки (KPI):
  • Métrica Core Web Vitals INP (Interaction to Next Paint) < 100ms
  • Carga de JavaScript del bloque en el frontend < 10KB
  • Cero avisos de discrepancia en la hidratación (hydration mismatch) en la consola

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

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

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

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

1
Этап 1 из 4

Paso 1: Configuración de block.json con soporte de interactivity

~20 минЛегкий

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

Indique apiVersion: 3 en block.json. Añada 'supports': { 'interactivity': true }. Declare 'viewScriptModule': 'file:./view.js' para cargar el código como módulo ES.

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

Utilice 'viewScriptModule' en lugar de 'viewScript' para que el script se cargue como módulo nativo con la 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

Paso 2: Marcado en el servidor y directivas interactivas

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

Paso 3: Definición del almacén reactivo en view.js

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

Paso 4: Optimización de INP y pruebas de accesibilidad

~25 минЛегкий

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

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

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

Интеграция

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

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

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

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