Interactivity API for Common DOM Interactions
## Metadata
- Author: [[WordPress.tv]]
- Full Title: Interactivity API for Common DOM Interactions
- Category: #articles
- Document Note: ---
tags: [WordPress, Interactivity API, JavaScript, Block Development, Frontend, DOM]
author: Austin Atkinson
source: WordPress.tv
reference: [https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/]
date created: 2025-11-10 14:30
---
# 🏷️ Title: Interactivity API for common DOM interactions
## 🧭 Table of Contents
- [📝 Summary](#-summary)
- [📖 Main Content](#-main-content)
- [🗒️ Notes](#️-notes)
- [📚 References](#-references)
- [🗣️ Paraphrase](#️-paraphrase)
- [📰 Newsletter](#-newsletter)
- [✅ Action Items](#-action-items)
- [🧪 Hypotheses](#-hypotheses)
- [📊 Methodology](#-methodology)
- [❓ Questions](#-questions)
- [🔮 Future Research](#-future-research)
- [💡 Implications](#-implications)
- [🧠 Learning Styles Assessment](#-learning-styles-assessment)
- [📊 Accessibility Assessment](#-accessibility-assessment)
- [🌍 DEIB Assessment](#-deib-assessment)
- [✅ Logical Validity](#-logical-validity)
- [🛡️ DARVO Analysis](#-darvo-analysis)
- [🎯 Conclusion](#-conclusion)
### 🔗 References
- [WordPress.tv Video](https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/)
- [VideoPress Direct Link](https://videopress.com/v/lmhEA7tJ)
- [WordCamp Canada 2025](https://wordpress.tv/event/wordcamp-canada-2025/)
- [Austin Atkinson Speaker Profile](https://wordpress.tv/speakers/austin-atkinson/)
## 📝 Summary
**What happened:**
Austin Atkinson, a frontend developer from Australian-based Code Company, presented a technical introduction to the WordPress Interactivity API at WordCamp Canada 2025. This was his first public speaking engagement. The talk focused on demonstrating how the Interactivity API provides a standardized, framework-like approach to handling common DOM interactions in WordPress blocks, moving away from vanilla JavaScript or React implementations.
**Why it matters:**
The Interactivity API represents a significant shift in WordPress block development, offering a unified approach to client-side interactivity that:
- Reduces the learning curve for developers who need consistent patterns
- Provides better performance through optimized state management
- Enables server-side rendering (SSR) with PHP-defined initial state
- Creates interoperability between blocks from different developers
- Eliminates the need for multiple JavaScript frameworks in a single WordPress site
**Key stakeholders:**
- Block developers building interactive WordPress components
- Theme developers implementing dynamic user interfaces
- Enterprise WordPress teams standardizing development practices
- Plugin developers creating reusable interactive patterns
- WordPress Core team members working on frontend architecture
**Risks and tradeoffs:**
- Learning curve for developers accustomed to vanilla JS or React patterns
- Potential performance overhead if state management is not properly scoped
- Risk of over-engineering simple interactions that could use vanilla JS
- Dependency on WordPress Core evolution and API stability
- Limited documentation and examples during early adoption phase
- Possible complexity in debugging directive-based interactions
**Bottom line:**
The Interactivity API provides a robust, standardized framework for building interactive WordPress blocks with built-in state management, event handling, and SSR support. Developers should evaluate it for any interactive block development to benefit from WordPress's native patterns while avoiding framework fragmentation.
## 📖 Main Content
### Core Concept: The Interactivity API Framework
The WordPress Interactivity API is a declarative framework introduced in WordPress 6.5+ that provides a standardized way to handle client-side interactivity in blocks. Rather than using vanilla JavaScript event listeners or importing React for state management, developers can use WordPress-provided directives and state management patterns.
**Key Architecture Components:**
1. **Directives**: HTML attributes prefixed with `data-wp-` that bind functionality to elements
2. **State Management**: Centralized reactive state using `wp-interactive` namespace
3. **Context**: Scoped data passing between parent and child components
4. **View Script**: JavaScript file loaded via `viewScript` property in block.json
### Directives Explained
**Event Handling Directives:**
- `data-wp-on--click`: Binds click event handlers
- `data-wp-on--input`: Handles input events
- `data-wp-on--change`: Responds to change events
- Supports async functions for API calls and promises
**State Binding Directives:**
- `data-wp-bind--disabled`: Conditionally disables elements
- `data-wp-bind--hidden`: Conditionally hides elements
- `data-wp-bind--class`: Dynamically adds/removes CSS classes
- Binds to state values reactively
**Conditional Rendering:**
- `data-wp-show`: Shows/hides elements based on state (element remains in DOM)
- `data-wp-class`: Applies classes conditionally
- Enables loading states, error states, and conditional UI
**List Rendering:**
- `data-wp-each`: Iterates over arrays to generate lists
- Uses `<template>` tag for defining item structure
- Supports nested data structures from API responses
### State Management Pattern
State is defined in two places:
**1. PHP-side (block.json or render.php):**
```php
<?php
wp_interactivity_state(
'myNamespace/blockName',
array(
'isLoading' => false,
'characters' => array(),
'currentPage' => 1
)
);
?>
```
**2. JavaScript-side (view.js):**
```javascript
import { store } from '@wordpress/interactivity';
store('myNamespace/blockName', {
state: {
isLoading: false,
characters: [],
currentPage: 1
},
actions: {
async loadCharacters() {
// API logic
}
},
callbacks: {
shouldShowButton() {
return !state.characters.length;
}
}
});
```
The PHP-defined state merges automatically with JavaScript state at runtime, enabling SSR scenarios where initial data comes from server-side sources.
### Practical Example: Star Wars Character Loader
Austin demonstrated a working block that:
1. Loads Star Wars characters from an API
2. Displays loading state during fetch
3. Disables button during loading
4. Renders character list with film appearance counts
5. Supports pagination with "Load More" functionality
6. Hides initial "Load Characters" button after first load
This example showcased:
- Async event handlers (`data-wp-on--click` with async functions)
- State-driven UI updates (loading indicators, button visibility)
- List rendering (`data-wp-each` with `<template>` tags)
- Error handling and promise resolution
- Conditional rendering based on callback functions
### Technical Requirements
**File Structure:**
- `block.json`: Must include `viewScript` property pointing to view.js
- `view.js`: Contains store definition with state, actions, callbacks
- `render.php`: PHP template with directive attributes
- `edit.js`: Block editor interface (separate from frontend)
**Dependencies:**
- `@wordpress/interactivity` package (imported in view.js)
- WordPress 6.5+ for full API support
- Proper namespace conventions to avoid conflicts
### Advantages Over Vanilla JS/React
**Compared to Vanilla JavaScript:**
- Automatic reactivity without manual DOM manipulation
- Consistent patterns across different blocks
- Better performance through optimized updates
- Built-in state management without external libraries
**Compared to React:**
- Smaller bundle sizes (no React runtime needed)
- Native WordPress integration
- SSR support out of the box
- Interoperability between blocks using same state
- Consistent with WordPress Core direction
### Current Limitations and Considerations
- Still evolving API with potential breaking changes
- Limited third-party examples and tutorials
- Debugging can be challenging with directive-based approach
- Not all WordPress blocks have migrated yet
- Performance implications need testing at scale
## 🗒️ Notes
#### ⏱️ [00:01:25](https://videopress.com/v/lmhEA7tJ?at=85) Introduction and Speaker Background
- Austin Atkinson introduces himself as a frontend developer at Code Company (Australian-based)
- First time publi
- Summary: Using the Interactivity API to manipulate common DOM interactions.
- URL: https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/
### [WordPress.tv](https://wordpress.tv/)
Search WordPress.tv
* [WordCamps](https://wordpress.tv/category/wordcamptv/)
* [Meetups](https://wordpress.tv/category/wordpress-meetup/)
* [Keynotes](https://wordpress.tv/category/keynote/)
* [How To](https://wordpress.tv/category/how-to/)
* [Get Involved](https://wordpress.tv/get-involved/)
[Home](https://wordpress.tv) » [WordCampTV](https://wordpress.tv/category/wordcamptv/)»[WordCamp Canada 2025](https://wordpress.tv/event/wordcamp-canada-2025/)
#### Interactivity API for common DOM interactions
Some content could not be imported from the original document. [View content ↗](https://video.wordpress.com/embed/lmhEA7tJ?hd=1&autoPlay=0&permalink=1&loop=0&preloadContent=metadata&muted=0&playsinline=0&controls=1&cover=1)
Rate This
* [Click to Press This! (Opens in new window) Press This](https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/?share=press-this&nb=1)
* [Click to share on LinkedIn (Opens in new window) LinkedIn](https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/?share=linkedin&nb=1)
* [Click to share on Bluesky (Opens in new window) Bluesky](https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/?share=bluesky&nb=1)
* [Click to share on X (Opens in new window) X](https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/?share=x&nb=1)
* [More](https://wordpress.tv/2025/11/10/interactivity-api-for-common-dom-interactions/#)
[Customize buttons](https://wptv.wordpress.com/wp-admin/options-general.php?page=sharing)
Some content could not be imported from the original document. [View content ↗](https://widgets.wp.com/likes/index.html?ver=20251110#blog_id=5089392&post_id=136027&origin=wptv.wordpress.com&obj_id=5089392-136027-69126fefc0cb7&domain=wordpress.tv)
##### Continue the discussion
###### Published
Using the Interactivity API to manipulate common DOM interactions.
###### Event
[WordCamp Canada 2025 19](https://wordpress.tv/event/wordcamp-canada-2025/)
###### Speakers
[Austin Atkinson 1](https://wordpress.tv/speakers/austin-atkinson/)
###### Language
[English 11342](https://wordpress.tv/language/english/)
###### Download
MP4: [Low](https://videos.files.wordpress.com/lmhEA7tJ/video-95d584af1c_mp4_std.mp4), [Original](https://wordpress.tv/wp-content/uploads/2025/11/video-95d584af1c.mp4)
###### Subtitles
[Subtitle this video →](https://wordpress.tv/subtitle/?video=136028)
###### Producer
[jxowe](https://profiles.wordpress.org/jxowe)
[](https://creativecommons.org/licenses/by-sa/4.0/)[Creative Commons License](https://creativecommons.org/licenses/by-sa/4.0/)
This work is licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-sa/4.0/).
* [Blog at WordPress.com.](https://wordpress.com/?ref=footer_blog)
* [Get Involved](https://wordpress.tv/get-involved/)
* [Privacy](https://wordpress.org/about/privacy/)
* [Powered by VideoPress](https://videopress.com/)
An
[](https://automattic.com/)
Opus
* [Edit](https://wptv.wordpress.com/wp-admin/post.php?post=136027&action=edit)
* [Stats](https://wptv.wordpress.com/wp-admin/admin.php?page=stats#!/stats/post/136027/5089392), Interactivity API for Common DOM Interactions, WordPress.tv, 01k9r35w0jf165ez9818tx9ear.