Case Study: How Pew Research Center is using the interactivity api to use blocks as interactive components

[justintadlock]

Discussed in #227

^{Originally posted by sethrubenstein February 20, 2024}
We at Pew Research Center have been early adopters of the new interactivity api in the development of our new blocks-first digital publishing platform. We're approaching the interactivity api systemically, converting wherever possible our front end JavaScript to use the interactivity api and extending a interactiveNamespace attribute to all interactive blocks, allowing editors to create rich interactive apps on the front end by connecting a series of blocks together. The driver of this concept is a suite of primitive form input blocks we have built:

• prc-block/form-input-text
• prc-block/form-input-checkbox
• prc-block/form-input-radio
• prc-block/form-input-autocomplete
• prc-block/form-input-password
• prc-block/form-captcha
• And we have added interactive directives to core/button

All with directives and stores that in most cases point to or store a value in another blocks interactive store via the 'interactiveNamespace` attribute. This concept allowed us to rapidly create dynamic interactive blocks that power:

• 2 different variants of mailchimp forms
• a complete FSE compatible FacetWP facet blocks system, built with core/query enhanced pagination support in mind.
• a FSE compatible user accounts system built with blocks. Login forms, registration forms, reset passwords all powered by this suite of form blocks.

We have a number of other smaller interactive blocks.

What I think is most interesting is this concept of allowing blocks to be dropped into other blocks and allowing the user to effectively select from which parent block it will receive its interactivity. This allows for a systemic approach to the interactivity api, and with it an approach that treats some blocks more like a library of React components which is a powerful use case.

To demonstrate this I would break the concept down a little into two parent blocks that do A and B thing respectively when clicking on a button block inside. I'll go over how to quickly give interactivity to core/button block using filters and the WP_HTML_Tag_Processor. Then I'll go over the basic concepts of having action handlers and callbacks in parent blocks that do different things using the same inner block.

Here are some links to some of these interactive blocks as examples to get an idea of the concept:

https://github.com/pewresearch/prc-block-library/blob/develop/blocks/form-input-text/src/render.php

https://github.com/pewresearch/prc-block-library/blob/develop/blocks/core-button/core-button.php#L156

https://github.com/pewresearch/prc-block-library/blob/develop/blocks/mailchimp-select/src/view.js

https://github.com/pewresearch/prc-block-library/blob/develop/blocks/mailchimp-select/src/view.js

[justintadlock]

@sethrubenstein - If you can leave a comment on this ticket, we can assign it to you.

This topic was approved in the March Editorial Group meeting.

[sethrubenstein]

@justintadlock 🫡

[sethrubenstein]

Hi all, just an update on timing on my end. We are in a crunch phase right now to get our new pewresearch.org launched on the 18th which includes this concept of interactive blocks as components as such I don't have the time between now and then to start on this post. Would a early may time frame work for the blog's schedule?

[bph]

@sethrubenstein Yes, an early May timeline would work. Thank you for letting us know!

Good luck for the launch of the new site! I thought I saw an announcement like that fly by! That's awesome!

[bph]

@sethrubenstein Hope the site launch went as smoothly as possible. :-)

For your start on your blog post, here are three links for your perusal:

• Tips and guidelines for writers
• How to contribute
• Notes on creating and formatting a Google Doc #242

Please let me know how I can assist or if you have questions.

[sethrubenstein]

Thanks @bph I will drop a link with my Google Doc starting draft on Monday.

[sethrubenstein]

Hi @bph Just getting started drafting a rough outline and structure. I'll be putting more time into this over the next couple of days, just wanted to go ahead and drop a share link. https://docs.google.com/document/d/13yBBYnsKsndUT4VSC6vOnUDf4wKIrwZIyLJqHzZLk9I/edit?usp=sharing

[bph]

Thank you, @sethrubenstein sometimes getting started is the hardest.

[bph]

Hi there @sethrubenstein I was wondering, how your timeline has changed for your work on this article.
If you'd like to get on a call to discuss the scope of the article to see if it can be reduced or split up into more parts, please let me know and we can schedule a zoom call.

[sethrubenstein]

Hi @bph that would be great actually. It's definitely getting a little unwieldy to break down this complex a concept into one post. I'm talking this concept out with someone in the community on Friday; hoping to make this a little more digestible. Can we do a zoom call next Wed?

[sethrubenstein]

Just an update: I set up a repo at https://github.com/wptrainingteam/atomic-interactive-blocks to begin building code examples for the two "atomic" interactive modes I'll be covering. These modes include targeting a namespace in one block to another block and our recent development of subsuming a block's markup for use as a template inside another interactive block.

[sethrubenstein]

Closing this out. This concept is continuing to evolve as the interactivity api evolves. That said, I would like to revisit the central topic of interacting with interactivity api stores across blocks and plugins with the launch of our new core/tabs and core/dialog contribution for WP 6.8 in the spring.