Getting Started - and other learning resources

[juanmaguitar]

Ready to add some interactivity to your blocks? Although it is still experimental, you can begin to explore the Interactivity API potential and provide valuable feedback. Remember, your feedback and suggestions will help us shape the API and improve the tool for everyone. So let's get started! 🙂🚀

• If you have problems or suggestions following the Getting Started guide, you can comment on this discussion to let us know or open a pull request to improve the guide.
• If you want to share your feedback or have questions about the Interactivity API, please open a new discussion in the Interactivity API category. You can also use the WordPress Slack's #core-interactivity channel.

Resources

• ⭐️ Getting Started guide: Please follow the Getting Started guide to learn how to scaffold a new project and create your first interactive blocks.
• ⭐️ API Reference: Check this page for detailed explanations and examples of the directives and the store.
• ⭐ A first look at the Interactivity API: A tutorial to get started with the basics of the Interactivity API.
   
• Dev note: The Interactivity API in WP 6.5 – First public version of the Interactivity API in WordPress Core | make.wordpress.org/core blog post
• Proposal: The Interactivity API – The initial proposal for a better developer experience in building interactive blocks | make.wordpress.org/core blog post
• Developer Hours sessions: First session and second session
• Building interactive blocks: a step-by-step workshop | WCEU Workshop
• Core blocks using the Interactivity API: Navigation block, Image block, Search block, File block, Query block.
• New WordPress Developer APIs – The Interactivity API | learn.wordpress.org session by @jonathanbossenger (see slides)

Examples/ Demos

• WP Movies Demo: wpmovies.dev and its wp-movies-demo repository
• Examples using the Interactivity API at block-development-examples:
  • interactivity-api-block-833d15
  • interactivity-api-countdown-3cd73e
  • interactivity-api-quiz-1835fa

---

Documentation is still in progress. In the meantime, please do not hesitate to start a new discussion for any questions you may have regarding how to use it, the different APIs, or recommended patterns for specific scenarios. If you are willing to help with the documentation, please say so in this discussion, and we'll coordinate everyone's efforts.

[FawadNL]

When will the WP movies theme and its blocks get updated to use the latest interactivity api?

[ts-mz]

Hi. Sorry for jumping in here - I'm in the process of transitioning a simple wix site to a WP block theme and the wix site is using fade transitions for the content area. So I had the idea to check if this would be possible using the interactivity API and thus doing something useful for myself by learning about using interactivity during this project (because I remembered instant transitions from the wpmovies demo). But reading this I'm getting the impression that something like content area transitions is not yet really supported but was handcrafted into the wpmovies demo? Is that impression correct? Thanks!

[luisherranz]

May I ask what you mean by fade transitions? Is it when the browser doesn't need to refresh the page (like in wpmovies.dev)? Or something more specific?

[ts-mz]

Thanks for your reply! And sorry for being unclear. Yes, initially the first, content loading without page loading. In the long run, I'd hope to be able to use the interactivity api to achieve actual fading page transitions, similar to this - https://reactcommunity.org/react-transition-group/ (unless there's a better approach by then).

[luisherranz]

Ok, thanks!

In WP 6.5 we're releasing a type of navigation that we call region-based client-side navigation. Instead of replacing the content of the full page, it replaces the content inside some regions. You can see it in action in WP 6.4 in the Query block (disable the "Force full page reloads" setting). The reason to release the region-based navigation first is that it is a bit simpler and it's compatible with more sites. We'll prepare a guide in the docs to explain how it works and how people can leverage the new core/router store to use this type of navigation (please be aware that the guide might not be ready by the release of WP 6.5 and come later).

The full-page client-side navigation will take a bit more. We want to release it this year, so maybe in WP 6.7, but I can't make any promises as it has challenges that are not so easy to solve.

We also want to work on adding support for the native View Transitions API for both the region-based and full-page client-side navigation. I think this might be what you're looking for. Again, this is something we'd like to work on later this year, but we can't make any promises as its design also presents some challenges.

[ts-mz]

Wow, thanks for the extensive reply! Looking forward to trying all this when it drops! Will have a loook at the query block =)

[juanmaguitar]

Learning Resources from the Community

• #77 – Mario Santos and Luis Herranz on What the Interactivity API Is and How You Can Use It | WP Tavern podcast
• 🧑‍🍳 Block Developer Cookbook Recipe: The Interactivity API 🧑‍🍳 by @ryanwelcher

[gaambo]

FYI: If anyone is experimenting with the interactivity API in custom blocks with the newest Gutenberg version(s), you have to change the view field in your block.json to viewModule and change the build task to wp-scripts start --experimental-modules - for that you need to use @wordpress/scripts ^27.1.0 and @wordpress/interactivity ^4.0.1. It's kind of documented in the @wordpress/scripts package, but I had to fiddle around yesterday a little bit to get it working.

If you're also extending the default webpack config of the scripts package: With --experimental-modules the defaultConfig is not just an object but an array of two configs. If you want to add other entrypoints, you probably want to add it to the first config object (being the "normal" one, the second one is the module config).

[luisherranz]

I've just published the migration guide for Gutenberg 17.6, which includes other breaking changes:

• Changelog - Tracking Breaking Changes in the Interactivity API #52906 (comment)

[nextgenthemes]

From the merge announcement.

Backward compatible. Ensuring compatibility with both classic and block themes and optionally with other JavaScript frameworks, though it’s advised to use the API as the primary method. It also works with hooks and internationalization.

But every example is with blocks, so is it? Can I use this in classic Themes/Plugins without Blocks? I just ported my setting page to Alpine.js (for no real reason) and now I learn about this, and I am exited and annoyed at the same time, as I obviously would like to port it again to this as it looks very similar and was inspired by it right?

I need to support classic editor, I am not even sure if it's possible to use blocks for the admin screens, I guess not, but I do not want to anyway. Additionally, I would love to use it on plugins generated HTML that does not use blocks.

Would be happy for any clarification and a basic tutorial on how to use it without Blocks.

[luisherranz]

Yes, it is possible to use it in classic themes as well 🙂

You can take a look at this TwentyTwentyOne PR:

• Replace Twenty Twenty-One custom JS frontend code with Interactivity API wordpress-develop#5795

And the documentation of wp_interactivity_process_directives to process the directives present outside of blocks.

Let us know how it goes!