Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Bloque interactivo de calculadora de presupuesto con Interactivity API y optimización de INP
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 36 из 54)
Especificación: Bloque interactivo de calculadora de presupuesto con Interactivity API y optimización de INP
Gutenberg y FSE5 шагов • +25 XP

Especificación: Bloque interactivo de calculadora de presupuesto con Interactivity API y optimización de INP

Desarrollo de una calculadora interactiva de presupuestos o préstamos con la Interactivity API nativa de WordPress: cero librerías pesadas en cliente, cálculo de fórmulas en tiempo real y latencia INP inferior a 50ms.

~11 ч работыУровень: SeniorWordPress Interactivity APIdata-wp-interactivedata-wp-binddata-wp-on--inputdata-wp-textCore Web Vitals (INP < 15ms)View Transitions API
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~11 рабочих часов
Фриланс вилка~$495 – $825 (€440 – €770)
Оценка веб-студии~$1,045 – $1,760 (€990 – €1650)

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

Necesitamos un bloque interactivo donde los usuarios muevan controles deslizantes (presupuesto, horas, extras) y vean el coste estimado al instante sin recargas de página ni plugins de formularios pesados.
Ключевые требования:
  • •Implementación nativa de la Interactivity API con almacén reactivo en view.js
  • •Controles de entrada: deslizadores de rango (range), campos numéricos, casillas y listas desplegables
  • •Cálculo reactivo inmediato de importes totales, impuestos y estimaciones mensuales
  • •Formulario de captación integrado con los datos calculados para solicitud de presupuesto
  • •Métrica INP (Interaction to Next Paint) optimizada por debajo de 50ms en dispositivos móviles
Ограничения проекта:
  • •Sin jQuery ni plugins de cálculo pesados (como Calculated Fields Form)
  • •Accesibilidad completa con teclado (aria-valuenow, aria-valuemin, aria-valuemax)
  • •Admite múltiples calculadoras en la misma página con estados aislados
Критерии приёмки (KPI):
  • Latencia de interacción INP < 50ms al arrastrar deslizadores en móviles
  • Incremento de la tasa de conversión en solicitudes de presupuesto de al menos un 25%
  • Cumplimiento del 100% de accesibilidad WCAG 2.1 AA en los controles deslizantes

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

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

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

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

1
Этап 1 из 5

Paso 1: Inicialización del bloque y configuración de block.json

~25 минЛегкий

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

Configure block.json con 'apiVersion': 3, 'supports': { 'interactivity': true } y declare 'viewScriptModule': 'file:./view.js'. Establezca atributos para tarifa base, impuestos y moneda.

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

Verifique que las dependencias de la Script Modules API se procesen adecuadamente en WordPress 6.5+.

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

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

JSON
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "agenticlab/service-calculator",
  "title": "Интерактивный калькулятор услуг",
  "category": "widgets",
  "icon": "calculator",
  "supports": {
    "interactivity": true,
    "html": false
  },
  "editorScript": "file:./index.js",
  "viewScriptModule": "file:./view.js",
  "render": "file:./render.php"
}
2
Этап 2 из 5

Paso 2: Marcado en servidor con directivas interactivas

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

Paso 3: Motor de fórmulas reactivas en view.js

~45 минСложный
4
Этап 4 из 5

Paso 4: Envío de solicitud de presupuesto a la API

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

Paso 5: Análisis de rendimiento INP y pruebas en móviles

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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