Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE/Разработка интерактивного калькулятора стоимости на WordPress Interactivity API с оптимизацией INP
К карточкам раздела «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 36 из 54)
ТЗ: Разработка интерактивного калькулятора стоимости на WordPress Interactivity API с оптимизацией INP
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Разработка интерактивного калькулятора стоимости на WordPress Interactivity API с оптимизацией INP

Создание сверхбыстрого конверсионного виджета: реактивное состояние через data-wp-interactive, вычисляемые геттеры, директивы связывания данных, плавная смена значений и гарантия INP < 15мс без React на фронтенде.

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

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

«На лендинге услуг требуется интерактивный калькулятор: ползунок площади помещения, переключатель пакета тарифа (Базовый / Премиум) и дополнительные опции в виде чекбоксов. Стоимость должна пересчитываться моментально при любом движении ползунка, отклик должен быть мгновенным (Google PageSpeed 100/100, INP < 15мс), а серверный HTML должен сразу отдаваться предрассчитанным.»
Ключевые требования:
  • •Полноценный интерактивный калькулятор стоимости без тяжелых клиентских фреймворков (Vue, React, Alpine)
  • •Директивы ядра: data-wp-interactive, data-wp-context, data-wp-on--input, data-wp-text, data-wp-class
  • •Реактивный стор store("agenticlab/calculator", { state, actions }) с вычисляемыми свойствами (геттерами)
  • •Идеальная оптимизация взаимодействия: время Interaction to Next Paint (INP) строго менее 15 мс
  • •Предрассчитанный серверный HTML для мгновенного первого рендера без скачков макета (CLS = 0)
Ограничения проекта:
  • •Использование нативного WordPress Interactivity API (ядро WP 6.5+ / 7.0)
  • •Вес клиентского JS-модуля калькулятора менее 4 Кб
  • •Поддержка управления с клавиатуры для всех ползунков и тумблеров
Критерии приёмки (KPI):
  • INP < 15 мс при любых действиях пользователя
  • 100 баллов в Google PageSpeed Mobile / Desktop
  • 0 внешних зависимостей (только нативные директивы WordPress)

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

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

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

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

1
Этап 1 из 5

Конфигурация block.json с поддержкой "interactivity": true

~25 минЛегкий

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

В block.json блока agenticlab/service-calculator укажите supports.interactivity: true и привяжите viewScriptModule: "file:./view.js".

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

Используйте "viewScriptModule" вместо "viewScript" для нативной загрузки через ES Modules в 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

Серверный рендеринг предрассчитанной стоимости в render.php

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

Разработка реактивного стора view.js с геттерами

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

Профилирование Interaction to Next Paint (INP)

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

Доступность и управление с клавиатуры

~20 минЛегкий

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

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

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

Интеграция

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

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

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

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