wp-interactivity-api

WP Interactivity API supports building and debugging WordPress Interactivity API features, including data-wp-* directives, the @wordpress/interactivity store/state/actions model, block viewScriptModule integration, and the wp_interactivity_*() PHP functions, with attention to performance, hydration, and directive behavior. It triggers on mentions of the Interactivity API, directives like data-wp-interactive, data-wp-on--*, data-wp-bind--*, and data-wp-context, module-based view scripts, or hydration issues where "directives don't fire." It targets WordPress 6.9+ (PHP 7.2.24+) and assumes a filesystem-based agent with bash and node, with some workflows requiring WP-CLI.

The procedure starts by detecting existing usage and integration style—searching for data-wp-interactive, @wordpress/interactivity, and viewScriptModule—to decide whether interactivity is provided by a block via block.json view script module, at the theme level, or as plugin-side enhancement of existing markup; for new interactive blocks it prefers the official @wordpress/create-block-interactive-template scaffold. It then identifies the store(s), confirming state shape, actions, and callbacks used by event directives. A strong emphasis is placed on server-side rendering as best practice: pre-rendering HTML on the server for correct initial state, SEO, and seamless hydration. This involves enabling server directive processing (supports.interactivity in block.json for blocks, or wp_interactivity_process_directives() for themes/plugins), initializing global state with wp_interactivity_state() and local context with wp_interactivity_data_wp_context(), and replicating derived state in PHP so directives like data-wp-bind--hidden render correctly on first load.

The skill covers implementing directives safely (keeping them minimal and scoped, aligning server markup with client hydration), build and tooling alignment (favoring @wordpress/scripts conventions or confirming module output in custom bundlers), and a set of debugging steps for when nothing happens on interaction—checking that the viewScriptModule is enqueued, the element has data-wp-interactive, the store namespace matches, and there are no JS errors before hydration. It documents WordPress 6.9 changes such as the deprecation of data-wp-ignore, unique directive IDs using the --- separator, new async TypeScript types, and client-side navigation behavior for getServerState()/getServerContext(). Verification includes project-triage signals, manual smoke tests, and Playwright E2E, with references for server-side rendering, a directives quick reference, and debugging.