Головна/WordPress Fullstack/Блупринти/Gutenberg & FSE/Інтерактивний блок на WordPress Interactivity API
До карток розділу «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 17 из 54)
ТЗ: Інтерактивний блок на WordPress Interactivity API
Gutenberg & FSE4 шагов • +20 XP

ТЗ: Інтерактивний блок на WordPress Interactivity API

Створення реактивних блоків WordPress без сторонніх бібліотек на фронтенді: повна інтеграція рідного Interactivity API, директиви (data-wp-interactive, data-wp-context, data-wp-on), стан у view.js та миттєвий відгук інтерфейсу.

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

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

Потрібен інтерактивний квіз та швидкий блок фільтрації товарів. Ми не хочемо вантажити React чи Alpine.js на фронтенді, бо це погіршує показники швидкості. Потрібно використати рідний WordPress Interactivity API.
Ключевые требования:
  • •Підключення Interactivity API через прапорець supports.interactivity = true у block.json
  • •Інтерактивні директиви: data-wp-interactive, data-wp-context, data-wp-bind, data-wp-on--click
  • •Клієнтський реактивний стан у файлі view.js за допомогою виклику функції store()
  • •Серверна ініціалізація початкового стану через wp_interactivity_state() у PHP
  • •Миттєвий відгук на дію користувача (INP < 100мс) без зсувів макета
Ограничения проекта:
  • •WordPress 6.5+ (базова системна вимога для Interactivity API)
  • •Жодних сторонніх фронтенд-фреймворків (без Vue, Alpine чи React у клієнтському коді)
  • •Повна доступність для користувачів клавіатури та читачів екрана
Критерии приёмки (KPI):
  • Показник Core Web Vitals INP (Interaction to Next Paint) < 100мс
  • Розмір JavaScript-бандла блока на клієнті < 10КБ
  • Нуль попереджень про розбіжність гідратації (hydration mismatch) у консолі

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

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

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

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

1
Этап 1 из 4

Крок 1: Конфігурація block.json із підтримкою interactivity

~20 минЛегкий

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

Вкажіть apiVersion: 3 у block.json. Додайте 'supports': { 'interactivity': true }. Оголосіть 'viewScriptModule': 'file:./view.js' для завантаження модуля скрипта.

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

Використовуйте властивість 'viewScriptModule' замість застарілої 'viewScript' для коректного завантаження через 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

Крок 2: Серверна розмітка та інтерактивні директиви

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

Крок 3: Оголошення реактивного сховища у view.js

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

Крок 4: Оптимізація INP та перевірка доступності A11y

~25 минЛегкий

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

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

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

Интеграция

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

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

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

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