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.

referencesdirectives-quickref.md

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

Directives quick reference (high level)

Common directives to recognize in markup:

  • data-wp-interactive: declares an interactive region (and often a store namespace).
  • data-wp-context: provides server-rendered context/state.
  • data-wp-on--event: attaches event handlers (e.g. click, submit).
  • data-wp-on-async--event: async event handlers (preferred for most actions).
  • data-wp-bind--attr: binds DOM attributes to state.
  • data-wp-class--name: toggles CSS classes based on state.

Use these as search anchors when triaging bugs.

Unique directive IDs (WordPress 6.9+)

HTML doesn't allow duplicate attributes. To attach multiple handlers of the same type from different plugins, use the --- separator:

<button
  data-wp-on--click---plugin-a="actions.handleA"
  data-wp-on--click---plugin-b="actions.handleB"
>

Both handlers will fire. The ID after --- must be unique per element.

Deprecated directive

  • data-wp-ignore: Deprecated in WordPress 6.9. It was intended to prevent hydration of a region but broke context inheritance and client-side navigation. Will be removed in future versions. Avoid using it.

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.