The Interactivity API in Action, a conversation with Seth Rubenstein

**[00:00:00]** hello today we're talking with Seth Rubenstein from the Pew Research Center he graciously agreed to come on the show and talk about the interactivity API among other things that they're doing to make the editing experience on their WordPress installation so much better Seth welcome thank you thank you for having me so tell me a little bit just out of curiosity how long have you been in the WordPress space how did you get into the WordPress space because I I see you're a contributor as well right uh I am yeah uh I've been in the WordPress space for a long time now um probably 20 20 years is as long as WordPress has been around I've been using it in some form or fashion uh I joined uh Pew Research Center about 8 n years ago to kind of uh Wrangle all of their WordPress sites into something more cohesive and um a couple years ago we started playing around with Gutenberg and here we are wow well you've been in it a long time and so you've seen the whole transition of what it used to be to what it's becoming now which is I think amazing what it's what it's become I did not join the word for space until maybe 20 2018 I think was mostly doing other types of web applications and then stumbled upon it and Elementary was sort of big at the time and started playing around with that and that was great but still it wasn't native right wasn't core and and so when I started hearing about all the fun stuff that was going on with Gutenberg I got really excited but I don't know if it's just me many other people might have the same might have **[00:02:00]** had the same thought at Gutenberg started coming out there was a lot of I don't know if bad press about it but I just think it was people complaining like they complain about everything and if you're outside L right if you're outside then it sounds like oh maybe they have a point maybe it's not good and so I really didn't try it so the fact that you guys have been like doing this big jump from two years back in in such a big project is is great because it's such a mind opening way of doing things once you figure out how it works yeah absolutely yeah and so yeah so the reason I I reached out was that I was seeing some of the posts that you were putting on Twitter and some of the facets based stuff that you were doing and using interactivity API which I'd love to dive into if we have a chance and and things like that and I think this the idea of the call was to see if we could shed some light for other people to see what's possible and see that it's not so complicated as it's made out to be by some and and just show the sheer power of what modern work WordPress can be without needing to sort of stretch out for a third party Builder that makes sense sure absolutely you know I'm happy to dive in I think fast is probably a great example of kind of the interactivity API I think at kind of a scale can I share my screen actually let me do that and I can walk you through a little bit how this works yes I'd love to do that this looks correct here we go **[00:04:00]** okay so I guess uh just a littleit background um we were coming from um a 12 site WordPress multi-site um a couple years back um and if you saw my tweet from a couple years ago I think we're and I kind of started advocating out there for Gutenberg and showing what's possible because as you said there is a lot there is some bad press there are people I think out there that um are Die Hard old school WordPress people and they're upset they have to learn JavaScript now and I think that's a big point of uh kind of conflict um so I just wanted to show what was possible when you could go all in and we've we've done things like the quiz Builder chart Builder etc etc we wanted to go a little bit further and go all into full sight editing so uh a couple weeks ago we launched a new website fully collapsed done multi-site now down to one site which is great for us managing it but also for managing the design and templates and everything else else um so you're looking at the homepage um okay let me just real quick open up another browser window and I will log in when just to get this clear while you do that you you were in a multi sight environment and now it's no longer multisite or it's still multi sight but it's one it's one site on the multi site smaller subsites for for internal stuff but um okay so let me refresh should be logged in um so we do a few things uh in our WordPress installation to make things a little bit easier on editors and stuff one of those things you'll see is that we customize **[00:06:00]** the admin bar pretty heavily uh so we kind of give context around hey you're looking at something do you want to edit the template or the content so um okay so anyways uh here we're in full site editing now we're in the site editor Okay cool so this is the full site um we've had to create kind of a lot of blocks to support that um so one of them is kind of we have a a content type called homepage that lets you schedule out tomorrow's homepage or next week's homepage or whatever oh and so this block pulls in the content for that uh whatever the most recently published homepage is pulls that content in on the homepage template um so it's a way for us to kind of editorialize uh templates um but of course the real story of this show is facets and the interactivity API so um there's kind of a lot of things that play here um this requires kind of a couple different blocks um and I don't want to scare people away because this is a complex system um at play but that doesn't mean the interactivity API is necessarily complex to begin with um so to break it down what we have is a block called facets context provider what this does is when you hit up any of these archive pages that has this block it qu queries are facets API in this case we're using facet WP to handle a lot of the facets okay uh right now and we get that facet information back and that feeds that information through block context down to any of the blocks inside of here so for example core query uh public or kind ofe query block here you **[00:08:00]** know it passes down these are the post IDs that should be that you should be returning from the faceted selections um and then in our facet templates uh themselves just open this up uh you know this is going to it tells our facet template block here are the facets that you have available to you topics uh this taxonomy this date yada y y uh and then the user our editors our designers can create templates for those facets so you know they would select um sorry let me like oops sorry clicking around a lot um in one of our facet Temple blocks um oh there are no facets found because we've filled them all up um okay but that's how that kind of information works so the the higher up block provides all the information to the editor about uh what options you have available to to make templates uh and then on the front end that renders out those options so let me show you what that looks like um oh and then the other thing of course is um all of these blocks are interactive um so you'll see here we've we've kind of made a suite of uh form input blocks here we have form input checkbox um we have form input select which is just a select drop down um we have uh I think this one's just select boxes text boxes we also have a password box uh text area etc etc okay and for us for our implementation of the interactivity API what's Central is this attribute that we extend to all interactive blocks by a filter you'll see here probably you notice this little panel interactivity API this a custom panel we put on any block that has interactivity **[00:10:00]** okay and it does two things one you get a talle say yeah this is interactive great and then two a namespace so what this does uh is it lets you drop in say a checkbox block the checkbox block by by itself does nothing you know it you can style it you can pick its font size and maybe what the checkbox color is and all this sort of visual stuff but you click on it it does nothing that's just like an HTML checkbox element okay when you put it into another block for example facet template and give it a name space of the facet template facet template tells the checkbox block hey when you click on something this is what you should be doing so in this way what we are creating is a components Library effectively out of blocks um so we have a bunch of these kind of primitive subblocks they can be plugged into other higher level interactive blocks and then those do things so let's take a look for those who have no idea about facets and searching could you do a just do a brief explanation of what facets are and why someone would use something like facets WP high level like completely high level just sure sure um facets are complicated both computationally they're expensive and kind of cing all the stuff you want is is hard and and creating interfaces for them is difficult too MH um so what facets are is you'll see her on the right hand side this is uh our blog home template this is just the front the home template right a listing of all the posts um for us we have a bunch of different custom post types and like I showed you **[00:12:00]** we have a variation of core query that will pull in multiple post types at once and then our facets let users drill down uh onto you know the 16,000 posts just right here that we have so maybe you want to find something from the last six months um that's a report and you'll see here that these things are kind of live updating as we go uh and maybe it's about the United States um and lastly it's in our kind of economy work and so you saw there all of that was updating in real time no Pages being reloaded um and the counts on the right are being updated in real time too you will see we do have a few little bugs here this is very experimental um brand new um so we're figuring out some issues with facets and kind of selections and stuff so the way that this works is let me reload the these kind of facet templates has a and you probably see it here in the markup I think a WP router region if you're unfamiliar with it the interactivity API also ships with this interactivity router functionality and and that comes with two functions you can use prefetch and navigate and So What by by setting a router region on a markup using the interactivity API what that says is it signals when you use navigate or prefetch if there's a difference in the markup here rerender it um what this lets you do is make single page JavaScript apps basically out of out of blocks um so each of these facet templates basically will re render when there's new data so you know if I if I pick past month and if the formats fastet template has new **[00:14:00]** data that it's fetched from the background then it will rerender here um without having to reload the page and this is how we update the counts live as you select them it's also the reason why we also have a little bit of a kind of a race condition bug here where you select something and one of things things it's selected but we'll figure that out you're using the bleeding edge anyway so it's it's to be expected but it works great it's fast it's performance it's very fast it's very fast and it's very clean yeah the added bonus to this on performance of course is if you're only rendering what's changed then when you know when we select new results here we're not load we're not rendering the whole page to get a new page of results we're only rendering what we needed and we're only on the server side rendering a server side what has changed so across the board you're using less server resources as you hit these uh facets minus the initial calculation obviously on the facets a very complex database and caching strategy to keep those in check um so that's that's how that works I mean so each of these is a block um each of these values is an individual block um the way that works I showed you in the site editor is you kind of set up your template and then we say oh you dropped a checkbox block here well we know we have four values for this template let's pop out four four checkbox blocks with the correct values and stuff from our data um okay same thing here for these radio and and select and all that stuff um and then each of these have **[00:16:00]** kind of a common set of handlers uh here let me expand the mark up a little bit and you'll see them um so for starters oops you see here um this is the form input checkbox uh block um and on it it has a onclick Handler um it's looking at the fastet context provider uh in actions for the on checkbox click I'm sorry action I I just see the suin date range is it my screen oh that's weird what is why is it doing that let me stop and restart my screen sharing that's weird that's fine whole window how about that there we go ah yes now I see it okay perfect okay good so yeah so this is a individual block that's being rendered uh server side uh based on all the the data that the facets context provider is providing okay um you know we set up we set up our template we said this should be a checkbox so it's outputting for checkboxes because of the value and then on these uh we have some kind of common uh handlers uh so you'll see data WP on Mouse enter um you'll see the target Nam space attribute I mentioned earlier that's what this is so you know if I wanted technically if I wanted this uh to respond to something else I would just change this out to you know sa platform mail transform uh maybe that's one of the things right um and when I click on this it's going to pull that functionality from the mail chm form and not the fastest context provider and so this lets you kind of plug and play you know this block now does this this block now does that based on how it's **[00:18:00]** being used and that's why you created sort of this subset of very basic components that you can then just use generically for anything you want yeah yeah the the block itself is extraordinarily simple it's it has a few color attributes and style attributes and you know you can type in a label and that's that's it that's all it does um it's not until it has a interactivity Target names space that all of these little directives and click handlers do something um what's the scope of of the interactivity API so let's say you have you have these right there they're next to each other right but then you have some lower and and as I saw these are all in this sort of sidebar that is just like a pattern right uh but they could also be anywhere anywhere on the page right so is the context the whole page or is it just the content of the block so for for for this particular template is mostly the whole page it's everything inside of this facets context provider block um that's higher up actually if we look for it this block so everything that's everything okay yeah so it doesn't you know we don't the Mast head isn't in there and the footer is not in there okay but everything that's in this Block H is aware both on the server side uh in in each block it has block context for the blocks that opt into it which are just the facet blocks um they're aware of it service side and then of course in the interactivity API the stuff in here is aware of its context so one of the things I like to tell people is that kind of to think about **[00:20:00]** the interactivity API is that the same way that you have block context in the editor and if people are are aware of this you know you can do uses context and provides context and pass an attribute down through blocks um the interactivity API kind of lets you do that with functionality and with data uh in a kind of similar fashion different syntax and everything but a similar fashion so it kind of brings that idea from the editor and the server side stuff into your client side applications okay so that's why you have the facets provider that you mentioned earlier starting to make sense so that facet provider is not really a block that does something specific layout wise it's just a container but just context provider like when you're doing a react application you might rep everything with an authentication provider right and so right or you might make an actual context for your react application with all of your logic and and functions and stuff and then you'd wrap your react application in that the same thing's happening here we're just making little interactivity API context providers effectively okay so okay okay so it could extend if you want it it could extend further it doesn't have to be just in the content within that it could be the whole page like I imagine I haven't gone deep into the demo for the you know the trailers demo for the movies the movies one yeah whether it has a little player your theme mhm your whole theme could be an inter could have an interactivity store right and so you could put all that in there and then every single everything would fall under that could reach into okay interesting and so this one **[00:22:00]** specifically why did you choose in a project like this to create go through the hassle right of creating your own facets UI um you're still using facets of up for some of the backend logic but but the all the UI stuff why go through that process instead of using a search plugin like why would someone go for that well for us um it it it it's what made sense projectwise right like we knew so I guess to back up a little bit this is as as impressive as I think people have found uh the new site and stuff to be and everything we're doing here this is the start of our year um the we have much bigger plans for the rest of the year and one of those things is we build as an organization we're news organization we build a lot of kind of editorial interactive things Maps databases kind of scroll Jacky scrolly Telly editorial featurettes okay we have developers that do that that requires coding time we want to do that all in the block editor um we want to get to a point where designers and editors are just building out those kind of interactive featurettes in the block editor and not having to code anything um to do that you need some some foundational technology and a lot of the stuff that we have here for facets and throughout the site you look at MailChimp forms that's also using uh these form input blocks we've created and the inter interactivity API um you look at a bunch of different areas on the site um this kind of interactivity API foundational things are research and development for us of how we're going to do those other things down the road **[00:24:00]** and so that's why we decided you know this is actually a good complex situation we'll learn a lot from this where we are learning a lot from it um and it'll inform us on our plans for the remainder of the Year okay that makes sense yes and this is perfect because I think for editors this is fantastic like you were saying you want to do some inter interactive experiences or interactive courses or anything that just shows data in multiple places without having to give them a different like clunky interface to do something or have to them to repeat things um like for okay go ahead I think you have I'm not I'm not sure familiar with um um our quiz Builder and CHP Builder no I very interested to hear about that I can show you those these are the next two big things of ours uh on the docket to get uh converted to the interactivity API they're the last two kind of big remaining things let me give you a demonstration of that um yeah so yeah quizzes are a big one like a lot of quizzes are a big one people want to have quizzes or polls on their site and you always have to reach for a third party tool that might not be exactly what you really need right my uh my first week at the center was um stabilizing um the site it was just crashing under the weight of quizzes there was a popular science quiz and it was just taking down the site so we uh we spun up a quick gravity forms spased solution we used that for years um we launched this three or four years ago now um kind of early on in um **[00:26:00]** Gutenberg so okay one let me show you the front end of a quiz um okay and then I'll show you the back end and I think you'll kind of get an idea of how cool this idea of building interactive products in the editor can be uh so I'm just going to pick uh these things don't read into any answers I'm giving people um I'm just randomly clicking stuff um this is by far our top product um it's I mean every single day it's the number one traffic item um let me just but it's you know we also have a a lot of other quizzes we have um we do a number of them so providing producers a way to quickly build those quite frankly having to bug me was a lot of the impetus for uh for building this so of course um right now this isn't using the interactivity API okay right now what you're seeing is actually kind of a very primitive concept for hydrating uh and rendering a kind of react driven block Lock application this I wish the interactivity API existed 5 years ago when we built this this is what I needed um part of the problem is that when the way that we're doing it you know it's kind of rigid right like the quiz inter the layout is the layout with the interactivity apis I just showed you on the facets and stuff you could drop those wherever you can move these things wherever you want so I'm actually really excited about getting this converted so here we have the results page this is a custom results page for this one quiz we have some blocks for some other um some other quizzes um but let me you **[00:28:00]** saw the interface let me show you what it's like these so in the back end um you'll see uh we have a pretty similar interface to what you're going to get on the front end so editors can see kind of what what it actually is going to be like for someone to take this quiz oh so it's like a a quiz question is a block basically mhm that's right uh quiz question is a block and answer is a block um it's all blocks I mean if there's one thing I can tell people it's it's just it's all blocks whenever you encounter a roadblock how do I do this build a block um how do I structure this page or this this data for this application make it into blocks um this is much better than like even learn Dash or whatever I mean you have to you have this other interface that you have to learn and put things in and then see if it looks the same way in the front and and so just having it here yeah block edits are so much nicer so yeah so this is you know how we build quizzes uh it's it's very visual um from a management perspective for managing content it's it's much more enjoyable and easier to kind of hey if there's a problem you just click in and you know you change the the text or whatever you you you click here you change the answer whatever that's so much easier than like a bunch of wpcl statements or like a settings page or something like that right um the same for charts um oh charts big we're a news organization um our bread and butter is kind of infographics and charts you **[00:30:00]** look at any one of our posts they're full of charts um so we also do a lot of interactive charts let me show you what that looks like um I'll actually open up one I'll open up one chart and then I'll show you uh kind of what that looks like in a whole product so uh let's just see what would be a good chart um sure let's check this one out are these here we go are these designed here oh wow so they're literally made in the block editor they're made in the block editor so uh we use something other than CT table because cor table is a atrocious block I'm sorry for anyone who's working on that it needs a lot of work so we use a table called flexible block uh flexible table for what it's worth we also have uh We've also built a table based based on the Fantastic uh handson table react um Library so this is something we're going to be using more um we also support this for our uh chart editor so that we can more easily uh work with tables so just for what it's worth uh so yeah tables are important to us um so we use a block called flexible table block for managing the data for this and then as you update your data you'll see here your charts get rendered in real time and there is a enormous amount of configuration and color options and everything you could need for professional charting uh tool this is all done in the block editor um wow and so for you know designers you can imagine this is a pretty great tool um all of the the the design and brand guidelines and rules are **[00:32:00]** programmed into this you can't make a chart that looks bad you can't make a chart that doesn't adhere to the brand guidelines um and I think that's that you know that's one of the other powerful things of full sight editing is that when done right that's true of your entire site um you don't need to worry about like oh well what is a maybe a producer is going to pick a wrong color this or that the other thing no they're not um sotic the other cool thing about that yeah go ahead go ahead go ahead let me pull up this other page go ahead and ask question you are you're really giving all the tools the editors need just to them directly in in these and and that's one of the reasons I wanted to talk to you because this is a a a publication that has all of these items right you have quizzes you have charts you have tables which is data that typically if you're building like a journal website or anything like that it's very complex because you have to decide oh I'm doing a had need a graphic designer to build these and then upload them as images no really I want them to be selectable so do I need starting software which starting software will it mess up my performance so having it here being able to create it in in inside is is great I think it's it's eye opening for people to see what's possible if you bu yes yeah um you know for every naysayer out there about Gutenberg I I kind of try to run through this whole Litany of things that we've built um look at the end of the to day what Gutenberg **[00:34:00]** has provided you is your very own customizable figma except it's attached to the world's most powerful content management system um that's kind of incredible um so for I mean there are things to complain about sure but like the level of customization what you can do here is it's just unheard of um yes so yeah here's a here's a page with multiple charts in it um we use uh if people have not explored I I also recommend people explor for the WordPress entity system um this lets you kind of quickly pull in stuff from the rest API and edit things um so we have a component that we we use that handles this so you'll see here I showed you a chart a chart lives in a single post type okay uh makes it easy to reference in multiple posts here um I'm pulling in multiple charts into this post um and so just like when you're dealing with template parts or reusable blocks when you use the entity system in this way you also get the added benefit of hey when I go to save this fact sheet it's going to let me know I have a bunch of other posts that I'm referencing do you really want to update that um and that's all just kind of built-in functionality from entities oh wow the other reason to use entities is um you will gain WordPress sync functionality so another big part of this project for us which I really can't show you right now um every single thing we've built was built with entities in mind meaning that when phase three does come online and we get realtime collaboration we're good to go all of our blocks are ready to be used by multiple **[00:36:00]** people at once and it's actually really cool to see uh when people are doing it we've had a few kind of internal beta tests um wow we're obviously waiting for the full thing to come but um so how does how do these connect like if you have this table and this chart are they you mentioned some of them will have interactivity API some not yet how is how to show it here are is it just constantly pulling through the rest PR or is it just client based while you see it and then it saves it uh yeah it's it's not constantly uh but there is kind of like a heartbeat check you know it's it's looking for did is there an update to send um the fetch is once and then once there's new data it would update that nice nice yeah so um this and the quiz Builder that I just showed those are kind of our next big things to get onto uh the interactivity API one of the things I'm excited about that is is the kind of idea that we can server side render a lot of this stuff um we are experimenting with right now these charts get are svgs um use a backend or framework called visx for this but uh there's a possibility that we can render these svgs server side and then just add the interactivity on top so that once again page performance boom it just loads it just loads it just loads there's nothing blocking it once the page is loaded um so that's that's the big thing I think that you really gain with when you go deep into the boxes you can do a lot of the server side stuff that you weren't **[00:38:00]** really able to do before or at least not easily when you're working with the interactivity API for example and you're getting stuff back are you getting full markup back already rendered or is it rendering it on the client Side based on like Json data coming back uh it depends on what you're using right so the facets uh that's rendering server s side uh or at least the markup is changing server s side the interactivity API is reading that reading the diff and then if there is uh rendering at the desk um we do have other applications where we're not doing the server side stuff where we're doing a lot of that calculation client side and then obviously in that case um we kind of have like well actually to give you an idea um these these uh checkboxes and radio inputs are rendering server side um for the select box this is all rendering client side so you set up a template with the interactivity API and you say you know here's my list and each item should have this value whatever and then in this case for this item uh the interactivity API is running this all client side oh okay so you could do both you could do both yeah depends on what your needs are um so it's very flexible oh wow this is this is very impressive I it seems there are some very simple things that WordPress has added that are very Advanced behind the scenes but at the end of the day they seem simple like yesterday I was I was working with the block bindings API Uh custom source custom sources I didn't know they existed until I read the full article I was like what and so **[00:40:00]** you can do so much and like you were saying earlier the fact that an editor can now just go in and grab a bunch of things and design a full flow just using blocks and already pulling from everywhere is building something like this great yeah yeah it's so easy to get started with just I mean so we had built a whole Suite of blocks to display staff people and their photo and their job title and this and that the other thing and uh in two hours I read the block bindings API deleted 10 blocks and um so now when you come down to like these are all block bindings this is just a core paragraph block bound to our staff API this is the sore image bound to our staff API you click on one of these um on this template block binding block binding block binding block binding block binding it's great that's that's that's five blocks I don't have to manage you know to manage a function that Returns the data so yeah they are amazing here for example or in the previous one you have multiple authors right and so you're using block bindings but you're showing multiple authors so are you do you have like a block that okay I'm I'm curious like because sometimes you the binding for the paragraph and then the image but are you doing like a pattern with the two bindings H well you know how that goes with the block recovery let's do this let's say mini bio so the way that this is working is uh no surprise here once again we have yet another kind of context provider this case it's our by lines query block this queries all this queries the current **[00:42:00]** post for the by lines taxonomy um and then renders out each term with this template that you've created um and so for block bindings inside with the block bindings inside that's right and so uh down here if I come to you'll see the template uh for this case is like this image um we just pass what value to fetch we want the photo um and the block provides the ID to the block bending function and then that just says oh go get you know the name and photo for this staff person and that staff person M oh that's so neat do you do for attachments for example that's another thing that always blows my mind I I saw you had attachments there but then you also have an attachments page you obviously from what I've seen you obviously don't have people uploading attachments multiple times probably just put it there and then have access to them how does that work this was a little tricky with the site editor because it's just not where it needs to be with support for this um there is an attachment template in the site editor um so the way that this page works is I think most people probably turn off attachment links we've kind of historically used them they're good uh SEO references for us and they're just good to have a link directly to a chart um so we we do use attachment Pages um and then in our attachment template um what we've done is in core post content we have a little filter that runs and it says is this the attachment page if so don't return content return an image um that's something we're probably actually going to commit back to the Gutenberg **[00:44:00]** project because it's kind of annoying and i' prefer that to be in core it's what it needs to be um maybe block bindings will resolve this because you know potentially you could just drop an image block and bind it to the attachment ID I don't know we'll see um and then yeah then we have a custom block called attachment info this grabs all the attachments um associated with the parent Post in this case uh teens in video games today um it Des grabs the parent ID for the attachment says go get all the other attachments which there are a lot for this post oh yeah so are these are these ref are these um places where this appears or are they how are these the attachment info how are these related to the attachment oh they're really related to The Post uh so this is just one attachment for this post this is going to show us all of the um images attachments for this for this whole post we also have this concept of multi-section post so you'll see we have one here and then we have a couple other child posts and their attachments also get rolled up in that nice and I imagine for that table of contents that you were doing there the table of content is probably very interesting too you're not using the table of content block evidently no we are not us the normal table like we do have our own kind of data structure for post and stuff and so uh po we call this a post report package where a PO you know we have a main post and then you have child posts for kind of ancillary information um and we build out a we **[00:46:00]** build out a pagination based on that information this is not the normal one so yeah this is a custom block it also is using the interactivity API um in maybe a surprising way um so we have a table this block here um it's wrapped in a group block that's sticky which is obviously great um we also have hidden which you can't see right now a table contents block right here that will activate when the screen size gets to a specific oh W this is using the wp on window resize Handler and the interactivity API to measure uh window width and you set a threshold on the block of when you want this to activate and it activates at that time um and so that's a simple interactivity API uh uh directive uh and then clicking it just adds a class uh is open or is selected something like that also simple interactivity API um so so neat once again wherever wherever you see something that you're clicking on and it's doing something nine times out of 10 that's going to be the interactivity API on our site right now wow well in that by the end of the year it'll be 10 10 out of 10 that's amazing so I'm glad I reached out about the interactivity API specifically I think these are outstanding examples of it being used I feel we're still missing a very clear and concise tutorial of how to use Theory API in multiple scenarios um they're great there's some great writeups but are I don't know I think still for many people it's one of those things where you're like I want to try it but it doesn't click it's like oh where do I where do I start with **[00:48:00]** something that's basic but not too basic you know how some of those examples are are just just too basic and so it doesn't give you the context that you need to really understand it well hopefully I can offer something there soon uh I am working on a blog post for the WordPress Dev blog that'll go into a little bit of what I've just shown you and maybe a little bit more in-depth code examples on how you can get started with the interactivity API uh kind of at what we're calling it uh Atomic blocks um taking kind of the idea of atomic design M as you saw down to blocks right you know these small primitive blocks or uh that kind of you put them together to make an organism they do something um so we'll have more to share on that soon and hopefully a a somewhat of a tutorial for people nice well I really appreciate your time Seth I this was very helpful I think it'll help a lot of people to see what's possible both within the the Gutenberg um system and also specifically with the interactive API and I'm very looking forward to your write up on that as well I I think we're going to learn quite a bit there I I hope we can speak again sometime soon and and talk about some other very interesting stuff that you're up to absolutely right thank for having me it