WordPress Interactivity API: Getting Creative with Atomic Blocks

Learn how to build small, reusable atomic blocks with the WordPress Interactivity API so one button or form field can work anywhere on your site. Seth Rubenstein from the Pew Research Center comes back to show how state and context let these blocks talk to each other. In this episode: Seth's team used PHP filters to add interactivity support to the core button block, along with a target namespace field that tells the button which parent block should handle its click. State is shared across the page, so an email typed into one signup form can fill in the others, while context stays with a single block instance, which is why they use it for registration values they don't want changed on the page. They started by building a full form, then broke out the reusable parts (checkbox and radio became one block with a radio style). The same button block can do different jobs depending on where you drop it, like downloading a dataset inside a content gate that asks for legal terms first. Synced charts use the WordPress entity system, so one chart can appear in many posts and be edited from one place. Guest: Seth Rubenstein, Pew Research Center Chapters 00:00:00 Recap of the first conversation 00:01:11 Adding an interactivity toggle to blocks 00:06:14 Context vs state in the Interactivity API 00:14:28 Building a user account system with blocks 00:20:30 Using context to keep forms secure 00:26:41 How the atomic block system grew 00:29:51 Gated content and dataset downloads 00:41:28 Charts built from table blocks 00:46:45 Synced charts and the entity system 00:58:01 Atomic blocks for dev teams and performance Episode page: https://webtalk.show/episodes/002-interactivity-api-getting-creative-with-atomic-blocks/ Hosted by Armando J. Perez-Carreno. Learn more at https://perezcarreno.com