skilld
All skills
wordpress avatar

/wp-interactivity-api

@20324d2 official
by wordpresswordpress/agent-skills2.2k stars
327

Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wp_interactivity_*()) including performance, hydration, and directive behavior.

Ask your Agent

Use this Skill: https://skilld.dev/gh/wordpress/agent-skills/wp-interactivity-api

This session only. Nothing lands on disk.

referencesdebugging.md

≈343 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Debugging checklist

  1. Confirm the interactive root exists in the rendered HTML (data-wp-interactive).
  2. Confirm the view script module is loaded (network + source maps).
  3. Confirm store namespace matches what markup expects.
  4. Check console for errors before any interaction.
  5. Reduce scope:
    • temporarily remove directives to isolate which directive/store path breaks.
  6. If hydration mismatch occurs:
    • ensure initial state/context matches server markup.

WordPress 6.9 specific issues

State not persisting across navigation:

  • getServerState() and getServerContext() now reset between client-side page transitions.
  • If you relied on stale values persisting, refactor to use the store's reactive state instead.

Multiple plugins conflicting on same element:

  • Use unique directive IDs with the --- separator to avoid attribute collisions.
  • Example: data-wp-on--click---my-plugin="actions.handle"

data-wp-ignore not working:

  • This directive is deprecated in 6.9 and will be removed. It caused context inheritance and navigation bugs.
  • Find an alternative approach (conditional rendering, separate interactive regions).

Router regions / overlays not rendering:

  • WordPress 6.9 adds attachTo property for router regions to render overlays anywhere on the page.
  • Ensure nested router regions are properly structured.

Source: SKILL.md on GitHub

Third-party checks

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    No security issues were identified. The skill provides standard documentation and guidelines for working with the WordPress Interactivity API.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    4/4 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 20324d2. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated 3 months ago

Capability

Other metadata
compatibility
Targets WordPress 7.0+ (PHP 7.4.0+). Filesystem-based agent with bash + node. Some workflows require WP-CLI.

Topics

  • wordpress
  • interactivity-api
  • data-wp
  • php
  • javascript
  • hydration
  • directives
  • state-management
  • block-development

README badge

README badge for wordpress/agent-skills/wp-interactivity-api

What it does

Implements WordPress Interactivity API directives (data-wp-*, store/state/actions), block viewScriptModule integration, and server-side rendering with wp_interactivity_*() functions for WordPress 6.9+. Use this skill when building or debugging interactive blocks, themes, or plugins that rely on hydration, directive behavior, or state management via @wordpress/interactivity.

Generated from the current SKILL.md.

Frequently asked

Does this skill work with WordPress versions before 6.9?
The skill targets WordPress 6.9+ (PHP 7.2.24+). Earlier versions do not have the Interactivity API.
What build tools does this skill support?
It works with @wordpress/scripts and custom bundlers (webpack/vite) that output ES modules. Some workflows require WP-CLI.
Can I use this skill to debug why directives aren't firing?
Yes. The skill includes a debugging procedure that checks if the view script module is loaded, the DOM element has data-wp-interactive, the store namespace matches, and there are no JS errors before hydration.
Does this skill cover server-side rendering of interactive blocks?
Yes. It includes procedures for pre-rendering HTML with correct initial state using wp_interactivity_state(), wp_interactivity_data_wp_context(), and wp_interactivity_process_directives() to ensure seamless hydration.
What changed in WordPress 6.9 that affects this skill?
data-wp-ignore is now deprecated, unique directive IDs now use the --- separator for multiple directives on one element, and getServerState()/getServerContext() reset between page transitions.

Generated from the current SKILL.md. These answers refresh after source changes.