wp-interactivity-api

Develop and debug WordPress Interactivity API directives and state management for WordPress 6.9+ blocks.

27|1|Updated Feb 16, 2026
One-click install
npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill wp-interactivity-api-dr-robert-li
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wp-interactivity-api
Source: https://github.com/dr-robert-li/cowork-wordpress-expert/tree/main/references/wp-interactivity-api
Command: npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill wp-interactivity-api-dr-robert-li

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses challenges in building and debugging dynamic features for WordPress sites using the Interactivity API, ensuring smooth user experiences and efficient development.

Core Features & Use Cases

  • Directive Implementation: Guides the use of data-wp-* directives for interactive elements.
  • State Management: Helps manage and debug the @wordpress/interactivity store, actions, and state.
  • Hydration & Performance: Focuses on ensuring seamless client-side hydration and optimizing performance of interactive components.
  • Use Case: Debugging why a custom block's interactive elements are not responding to user clicks or why the initial state isn't loading correctly on the page.

Quick Start

Use the wp-interactivity-api skill to debug issues with data-wp-interactive directives not firing on the frontend.

Frequently Asked Questions about wp-interactivity-api

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug WordPress Interactivity API directives not firing on the frontend?

To debug WordPress Interactivity API directives not firing, inspect the data-wp-* attributes on your custom block and verify the @wordpress/interactivity store is properly loaded for hydration.

Why does my WordPress block interactive element fail to respond to user clicks?

WordPress block interactive elements fail to respond when data-wp-interactive directives are missing or the client-side hydration process encounters state management errors in the interactivity store.

How does state management work with the WordPress Interactivity API store?

State management with the WordPress Interactivity API store involves defining actions and state properties in JavaScript, which the @wordpress/interactivity module uses to drive interactive block behaviors.

Do I need to know PHP and JavaScript to use the WordPress Interactivity API?

Yes, using the WordPress Interactivity API requires understanding both PHP for server-side block rendering and JavaScript for client-side hydration, directives, and state management.

What's the best way to optimize WordPress Interactivity API performance for dynamic blocks?

Optimizing WordPress Interactivity API performance involves ensuring seamless client-side hydration and efficiently managing the @wordpress/interactivity store to prevent unnecessary re-renders of dynamic block elements.

Can I use the WordPress Interactivity API with older WordPress versions?

The WordPress Interactivity API targets WordPress 6.9 and above for advanced interactive features and performance optimization, meaning older versions lack the required core hydration and directive support.