Main/WordPress Fullstack/Blueprints/Gutenberg & FSE/Interactive Cost Calculator Block with Interactivity API & INP Optimization
Back to «Gutenberg & FSE» cards
Gutenberg & FSE(ТЗ 36 из 54)
Spec: Interactive Cost Calculator Block with Interactivity API & INP Optimization
Gutenberg & FSE5 шагов • +25 XP

Spec: Interactive Cost Calculator Block with Interactivity API & INP Optimization

Building a high-converting, reactive loan/pricing cost calculator block using the native WordPress Interactivity API: zero external frontend frameworks, real-time formula computation, and sub-50ms Interaction to Next Paint (INP).

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

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

We need an interactive financial / service cost calculator block where visitors adjust sliders (budget, hours, options) and see immediate price calculations without page reloads or clunky form plugins.
Ключевые требования:
  • •Native Interactivity API implementation with reactive store in view.js
  • •Input controls: range sliders, numeric inputs, toggle checkboxes, and select dropdowns
  • •Instant reactive computation of totals, taxes, and monthly estimates
  • •Lead capture form integrated with calculator state for instant quotes
  • •Optimized INP (Interaction to Next Paint) under 50ms on mobile devices
Ограничения проекта:
  • •Zero jQuery or heavy calculator plugins (Calculated Fields Form bloat)
  • •Full keyboard and screen reader accessibility (aria-valuenow, aria-valuemin, aria-valuemax)
  • •Support multiple calculator instances on the same page with isolated state
Критерии приёмки (KPI):
  • INP latency < 50ms across all slider drag interactions
  • Conversion rate increase of 25%+ on quote submissions
  • 100% WCAG 2.1 AA accessible slider controls

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

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

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

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

1
Этап 1 из 5

Step 1: Calculator block scaffolding & block.json configuration

~25 минЛегкий

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

Configure block.json with 'apiVersion': 3, 'supports': { 'interactivity': true }, and declare 'viewScriptModule': 'file:./view.js'. Define attributes for base price, tax rate, and currency symbol.

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

Ensure Script Modules API dependencies are properly resolved in 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

Step 2: Server-side markup with reactive directives

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

Step 3: Reactive formula engine in view.js

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

Step 4: Integrated quote submission handler

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

Step 5: INP performance profiling & mobile stress testing

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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