ACF Chat Fridays: Interactivity API Demo

ACF Chat Fridays are biweekly open office hours hosted by the developer team, allowing users to discuss questions and give feedback related to the plugin.

The May 10th session of ACF Chat Fridays focused on how to use the new Interactivity API introduced in WordPress 6.5 with ACF.

Co-hosted by Iain Poulson, Matt Shaw, and Damon Cook.

Sign up for the next session →

Session Recording

You can see the entire session in the player below, or catch the highlights in the session summary.

Session Summary

Iain Poulson started the May 10th event by noting that the ACF PRO 6.3 beta release was now available, but most of the session was given over to a demo of how to use the WordPress Interactivity API with ACF.

Damon Cook conducted the demo, following up on his Block Bindings API demo held during the previous session.

Damon walked through the process of creating a block with the Interactivity API, including setting up the block template, using ACF fields, and handling state and actions. He also demonstrated how to use the API to create a like button that updates in real-time, and how to use context to pass information between blocks. He noted that the Interactivity API has been in development for some time, but only became publicly available in WordPress 6.5.

Q&A

We’ve included some of the questions and answers from the latest session below. Minor edits have been made for clarity and style.

Q: What’s the advantage of using the Interactivity API over traditional jQuery and AJAX calls?

A: The Interactivity API provides standardization and allows for better communication between blocks on the page. In theory, there should be less JavaScript and less client-side stuff that’s going to need to be pulled in for all your blocks to communicate with each other.

Q: Is there a way to grab the state from one block and move it to another?

A: Yes! This was a bit outside the scope of today’s demo, but there’s a site that was created to show off the capabilities of the Interactivity API, WP Movies. All the code used is in a GitHub, and you can look directly into an overview of the interactive blocks. This shows how they do their “Like” functionality, and it involves several blocks communicating with each other.

Q: What scripts are loading on the frontend when you use the Interactivity API?

A: The Interactivity API uses Preact and modules, so in theory when you import the Interactivity API package, you’re just importing the module, so that would persist on the page. Depending on how your theme configuration is set up, I think the default experience is that the module and view script would only be loaded pages where the block is included.

Resources & Links

We share relevant resources during the call. We’ll sum them up here and try to provide a bit of context:

• ACF PRO 6.3 Beta 1
• Interactivity API Reference
• A First Look at the Interactivity API
• WP Movies: An Interactivity API Preview
• The WP Movies GitHub
• ACF Emails and News
• Sign up for ACF Beta News
• ACF’s Feedback Page

Coming Up on ACF Chat Fridays

Register today for the next session of ACF Chat Fridays, taking place May 24th, 2024 at 2pm UTC. Questions and suggestions for the development team are always welcome.

Register for the next session of ACF Chat Fridays here:

https://wpeng.in/acf-chat-fridays/

The list of upcoming sessions is below.

• May 24, 2024
• June 7, 2024
• June 21, 2024
• July 12, 2024

Tag or DM us on Twitter to let us know you’ll be there. Suggest new topics, let us know what you’d like to see, and send us feedback with #ACFChatFridays on Twitter.

About the Author

For plugin support, please contact our support team directly, as comments aren't actively monitored.