skills.rest
petenelson
petenelsonCOMMUNITY
Explore all skills by this author →
Website𝕏@CodeGeekATXGitHub

10up-interactivity-api

Add client-side interactivity to WordPress blocks using data-wp-* directives and stores.

87|32|Updated Jul 3, 2015
Search Tags:#javascript#blocks#interactivity#wordpress#stores#directives#server-rendering
One-click install
npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-interactivity-api
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 10up-interactivity-api
Source: https://github.com/petenelson/wp-rest-api-log/tree/main/.claude/skills/10up-interactivity-api
Command: npx skills add https://github.com/petenelson/wp-rest-api-log --skill 10up-interactivity-api

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

WordPress developers often need to add client-side interactivity to blocks without pulling in a full JavaScript framework. The Interactivity API provides a lightweight model with directives, stores, and server-side rendering to drive interactive UI.

Core Features & Use Cases

  • Directive-driven binding with data-wp-* attributes to attach behavior without heavy wiring
  • Centralized state via stores and context for local to block interactivity
  • Server-rendered initial state for fast, accessible experiences
  • Use cases include accordions, tabs, modals, menus, and other interactive components

Quick Start

Enable interactivity for your block by configuring block.json for interactivity and loading the Interactivity API entry point.

Frequently Asked Questions about 10up-interactivity-api

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

FAQPage Schema
How do I add interactivity to WordPress blocks without a JavaScript framework?▼

You can add interactivity to WordPress blocks without a JavaScript framework by using the Interactivity API with data-wp-* directives, centralized stores, and server-rendered state for reactive UI components.

How do I configure block.json to support interactivity in WordPress?▼

To support interactivity in WordPress, configure block.json for interactivity support and load the Interactivity API entry point to enable directive-driven binding and server-rendered initial state for your blocks.

Can I build reactive accordion and modal components using the WordPress Interactivity API?▼

Yes, you can build reactive accordions, tabs, modals, and menus using the WordPress Interactivity API by attaching behaviors through data-wp-context and data-wp-on--* directives with local block state.

Does the WordPress Interactivity API require a separate client-side JavaScript framework?▼

No, the WordPress Interactivity API does not require a separate client-side JavaScript framework because it provides a lightweight model using directives and stores to drive interactive UI directly from server-rendered state.

What is the best way to manage state across interactive WordPress blocks?▼

The best way to manage state across interactive WordPress blocks is by registering centralized stores alongside local context, allowing server-rendered initial state to drive client-side interactivity through data-wp-* directives.

Related Skills

Explore More Software Engineering Skills→
ihatesea69ihatesea69
3

wp-interactivity-api

Develop and debug WordPress Interactivity API features with data-wp directives.

Community
Advanced
zenbuappszenbuapps

wp-interactivity-api

Build and debug WordPress Interactivity API directives, stores, and hydration.

Official
Advanced
adityaarsharmaadityaarsharma
2

orbit-gutenberg-dev

Audit Gutenberg block plugins for WordPress standards compliance.

Community
Intermediate
Ikki-GroupIkki-Group

tanstack-query

Manage client-side server state with QueryClient and useQuery/useMutation hooks.

Official
Advanced