wp-interactivity-api

To debug WordPress Interactivity API directives, inspect the data-wp-* attributes in your block markup and verify the viewScriptModule integration. Ensure the @wordpress/interactivity store, state, and actions are correctly initialized and that server-side rendering matches the client-side hydration.

WordPress interactive block hydration fails when server-side rendered HTML does not match the client-side state initialization. Validate that your @wordpress/interactivity store context and data-wp-* directives align perfectly between PHP render callbacks and JavaScript viewScriptModule outputs.

Initialize global state and context for a WordPress interactive block by defining the store, actions, and state within your viewScriptModule. Use block.json to enqueue the module and ensure data-wp-* directives correctly reference the initialized properties for proper server-side rendering.

Yes, the WordPress Interactivity API supports server-side rendering in WordPress 6.9 and above. It processes data-wp-* directives during rendering, requiring proper PHP and JS tooling configuration to synchronize block viewScriptModule hydration and state initialization across themes and plugins.

The best way to troubleshoot view script loading in WordPress interactive themes is to verify block.json viewScriptModule paths and dependencies. Confirm the script correctly registers the @wordpress/interactivity store and that data-wp-* directives process the expected state and actions without blocking hydration.

You should not use the WordPress Interactivity API for front-end interactions when your block requires complex state management beyond directive processing or relies on incompatible PHP/JS tooling. It is specifically designed for server-side rendered blocks needing hydration, state, and context synchronization.