search

WordPress / developer-blog-content

In this GitHub space, WordPress team coordinate content to be published on the Developer Blog. Discussion and montly meetings (first Thu) in WP Slack #core-dev-blog
36 stars 2 forks source link

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

Open justintadlock opened 3 months ago

justintadlock commented 3 months ago

Discussed in https://github.com/WordPress/developer-blog-content/discussions/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 commented 3 months ago

@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 commented 3 months ago

@justintadlock 🫡

sethrubenstein commented 3 months ago

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 commented 3 months ago

@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 commented 2 months ago

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

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

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

sethrubenstein commented 2 months ago

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

sethrubenstein commented 1 month ago

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 commented 1 month ago

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

bph commented 4 weeks ago

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 commented 3 weeks ago

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?