Contents (3)
The Interactivity API has been in core since WordPress 6.5. It targets interactions such as toggles, filters and counters: the server renders the initial markup and JavaScript only manages state.
Markup in render.php
<div data-wp-interactive="hamidarab/faq" <?php echo wp_interactivity_data_wp_context( [ 'open' => false ] ); ?>>
<button data-wp-on--click="actions.toggle" data-wp-bind--aria-expanded="context.open">
<?php echo esc_html( $attributes['question'] ); ?>
</button>
<div data-wp-bind--hidden="!context.open"><?php echo wp_kses_post( $content ); ?></div>
</div>Logic in view.js
import { store, getContext } from '@wordpress/interactivity';
store( 'hamidarab/faq', {
actions: {
toggle() {
const context = getContext();
context.open = ! context.open;
},
},
} );Because the content is rendered on the server, it stays readable without JavaScript and is fine for SEO.
Where it doesn’t fit
For complex apps with routing and a large global state, a full framework still makes more sense. The Interactivity API is the right tool for focused interactions inside WordPress pages.
$ ./request_review
Facing the same problem in your own store?
Senior WordPress and WooCommerce backend engineering for complex production problems.
Request a Technical Assessment
## Comments