Interactivity API: Getting Creative with Atomic Blocks

**[00:00:00]** hello welcome today we're talking again with Seth Rubenstein from the Pew Research Center if you didn't watch our previous video I invite you to watch it it was a lot of fun Seth went into how they are using the interactivity API to really create a wonderful experience for editors in the platform was for search for quizzes and polls and other things and it's all very exciting so today we're going to dip a little bit deeper into what's possible possible with the interactivity API and how you might want to structure things to make it easier for you as a developer designer or even the editorial team to work with the platform welcome Seth hello last time we we're looking at some of your exciting views uh within the editor itself both for search for the facets part of it and for the quizzes and even for the charts and the tables which is all very exciting so a few questions came up while I was rewatching the video and some of these are related to the interactivity API some are not but let's get started with the ones that are so my main question is when you were showing me your screen inside the editor you had this little toggle that enabled interactivity for a specific block which I think is a great idea I had never thought to do it that way because when you're starting to work with the interiority API first you have to get through the gist to it and then once you figure it out everything is SED in the code but just exposing that as a toggle so that it's free for people to decide to use it as interactive or not I think was like a golden idea how **[00:02:00]** did that come about how did you decide to to enable that so the first thing that we built when we were exploring the interactivity API um we built one kind of custom block you know you click on it it fired up a alert just to see what it would do the other test was how could we take over existing blocks specifically core blocks and even more specifically core button um and how can we kind of add interactivity to it um when we started doing that we realized well not every button needs to be an interactive button some of them are just going to be links and so it's really it was just that simple it was just well sometimes a block is going to be static it's just going to have one thing it does you click on it and there you go and it's not going to be interactive and so that's where that really came out it was that we need to have you know some of these blocks are going to be interactive but they're also going to fall back to kind of a more static State when you started that exploration did you initially extend core blocks to add that sort of interactive functionality to them or what what were youing yeah so for so we really only focused on core button um just because it made the most sense our our primary kind of focus was getting some form elements together we wanted to be able to make login forms and registration forms and all sorts of other forms and so having a button was key uh so core button was really the only core button or core block that we focused on adding interactivity um and that's pretty simple **[00:04:00]** to do we we just used the PHP filters to add you know supports interactive true to the block and then we change the markup on a render block um filter and so at that point you're adding interactivity to the button and is that specifically for like use in forms how does that relate to its surrounding yeah I guess it's better to say that we add interactivity support to core button rather than adding interactivity um you know in that panel one of the other things that I that's in there beside the little checkbox that says this is interactive is this field for Target namespace um it's that really is probably the most important field there because that's what tells you click on a core button you gave it a name space and it says oh this button should use this interactive name space for its onclick Handler um that's really I think the kind of the magic of kind of our Atomic interactive block system um and that's how core button does things uh in our uses so if we put it into a login form we set its name space to the login form and the login form has a function on click when you click on the button it runs that function you put core button in another form registration you set it to its namespace the registration form tells the button when you click on it do do this thing and so really it is these kind of higher level interactive block applications that are informing these subblocks like cor button and other uh kind of homegrown blocks what they should do when you're inside of this block I see so do you have for the forms for example for the login form **[00:06:00]** is that a custom block that you created that has fields and then or can have fields and then you just use the core button inside it so you don't create your own button and then you just tell it what the name space is going to be for or that matches that one so in this case I think we're going to get to that that big question of context versus state so here we're talking about context where the the button are you getting it the name space of of the let me ask this try to make it in a clear way so does the form the custom form or custom block for the form does that have its own like I don't know MailChimp or login namespace right uh or or PWC plugin right and then as you use the button when you enable interactivity support do you give it the name space of that one because it's going to be contained within it and it's going to its ancestors so are we using context well it's a it's a mix of multiple things really um so I guess there's really three kind of things that you can use in the toolbox to communicate across blocks on a page um with the interactivity API we have state and context and also confusingly on the server side we have block context right so server side blocks can share information with each other and they can pass down values and so on and so forth you can kind of do the same thing with the interactivity context um which is like react State except it's very specific to that one instance of a block so five button blocks on a page uh right um they might be in **[00:08:00]** a login form and a registration form and the login form and registration form will have state they will have interactive State because well there should only be one login form or one registration form on a page if there were multiple login forms on page they would share all the same state so any values you put in there would would be shared cont context is specific to that one block so let's say you have two login forms well that butt button if it has its own block context its own interactive context it's going to only have values for that one instance so those two blocks those two instances of a button block for example would have their own uh kind of context State this is where it does get confusing confusing I think with the interactiv API um I can kind of show some I think examples to illustrate this if that would be helpful okay that would be good yeah share my browser okay great okay so um context uh I thought this might be a good example of this um me open up something like this right okay so this is a simple post for us a simple report um you see two blocks here these are interactivity powered blocks they're just little collapsibles um and if we go inspect this real quick you are going to see data WB context it's got a little ID and a simple is open true or false right okay so if this was State both of these blocks would share that valuee that's a problem right right we don't if I click on is open here I don't want the other one to be is open so of course to give an idea of do this is **[00:10:00]** a good example of kind of atomic blocks this is a promol block with a MailChimp form and inside the MailChimp form is a form field uh sorry a form input text block and a button block let me show you that real quick up go okay so you'll see here just open up this pattern okay so here's our promo this is our MailChimp form block this is the block that has interactivity okay okay uh this is a text field Block in here you'll see it's got the name space Piercy block MailChimp form for the so that it knows about its actions and call backs and everything right okay and then here we have button it also says Pierce you uh form and we have a small capture block too okay that that works that way so uh homepage um to the way this works is all of our form blocks uh form input field core button Etc they use State the reason for that being um let's say and I have a good example of it here let's say you want to capture someone's email address they're they're entering your email address on one sign up form but you want to make it easy for them to quickly sign up for all the others right well okay by using State for the input block we can share those values across interactive instances right um we can be in one block and say store PC block mail chm form whatever values and we can get those across instances because state is shared at a higher level across the page where context is kind of instance to that block right so let's you know this button has let's say this button has context I can't access the context **[00:12:00]** for that button over here in the other one um I mean you you maybe could but it's very difficult and it's not very it's not like foolproof whereas I can't access the state for this so what we do is we use WP interactivity state which is a PHP function and we you know say here's the target namespace for the thing and then we give it kind of a randomized ID so that each of these elements can be in state on the page so that we can access them so what that means is as I type in an email address here you'll see down here it also is getting filled in and that's because this is form input text with a name of email so it has a very specific ID within this is also text email exactly and so you can see here how they can kind of interoperate with one other while also having separate kind of applications entirely right right this doesn't share the same state with this right I still need to come over here and say actually yeah I am going to sign up for this one email I they're at the same email but you get the idea right so the fields are sharing the state but the button itself is using just the action for the context of that individual form so when do you use context when do use State there is no rules for this it is what you need um so what we have found I think with kind of atomic blocks is that it does make sense to make your most Atomic blocks to have state so that you to use state for their values and things so that you can interact with them in **[00:14:00]** other uh interactive applications on the page pretty easily if that makes sense I hope that helps kind of no it does it does so so just for for anyone listening the the the the context is localized to that block from for example or maybe it's ancestors right and then state is if you want to do it like here where they're completely separate but you still want to share State among them um and then you you might want to use the value in one or another place like in the demo of the trailers where they have the little like button and you want to show how many likes at the top they're using State they don't have to be within a special container and that's what sort of uh brought up the question from last time where you showed me you had this the facets provider and I was wondering okay so do we need to add a provider in the whole uh page or is it because we're trying to sort of localize scope right and so that's what initially brought up these questions which is which is actually followup do you if you could use context so we've explained context and state right if say you're using context because you know you're inside something else and you can because it's an ancestor right because you have a container or something let's say you have that maybe in your facets one would there be a reason to try to keep it as scoped as possible like maybe you have subsections in a form or something would you at some point have try try to have context that's just localized to a smaller unit instead of the whole thing yes and I can show you an **[00:16:00]** example of that that there are good use cases for that too so let me just dive into um our user account system this is entirely comprise the blocks um so we'll go to the first page here which is the login page and let me just open up our whole profile page so here we see user accounts controller um what this really does is it has some query bars and some rewrites and it just based on what you L you hit on this page we're going to load one of these blocks okay so if you hit SL profile profile login it's going to load the login form if you hit the page profile registration it's going to load the registration form and so on and so forth oh the same page it just the same page but just a different we're loading a specific block yeah um so if we look at uh I mean really login it's a good example password um passwords are very interesting field because it does something it's not dumb um you don't just put a password in here and that gets hoisted up to the higher level context we're going to be doing things like checking your values uh do they meet our requirements are they the same so wherever you know where we're doing the password registration or reset um this uses context in of itself but then it does communicate what you're setting as your password higher up to the higher level application in this case uh reset password kind of is its own thing um so here form input email is just a this is just a visual kind of thing and here's the actual uh input block and you'll see its namespace is PC user account **[00:18:00]** reset password if we come down here to the actual password field you'll see the password field which has its own interactivity it does things like the conditions checking and making sure you have the same password it has it's it's telling you know hey use this namespace reset password even though it does have its own interactivity and I'll show you the code for this in a second um and then we come down further and you'll see here that this password field oh isn't pointing to reset password it's pointing to form input password which is this block this block so when you type in something here this block is controlling the conditions and interactivity of it however this then sends in information up to reset password and then this sends information up to the user accounts controller and so on and so forth right okay and so this is where kind of context really comes into play um so if we come account um yada yada yada um me just type in some password words give it some there we go I'm at the conditions I don't know what I type so it's not going to it's not going to be the same thing this okay and think oh quick question while you're doing that I don't want to interrupt your password generation but if you I see the validation okay so so everything here is is as you were explaining and then you have this little to section at the bottom right for them to accept the terms right there I imagine the terms are then within the context of the form um well I mean this is just a not the terms but the the but the so checkbox so i' I've entered a password **[00:20:00]** here um obviously I need to have like some values and stuff but you'll see sign is disabled um so we've entered a value we've entered values into um form input password um form input password has communicate back up to the user registration block which encompasses all of this and it say it stored that password and it said hey they can continue but there's still one condition that needs to be met we need to agree to the terms so this is form input checkbox uh it has State um and when you make a value change it's going to communic that back up to the login form the uh uh capure block has its own thing it's run up um to the higher value and and so on and so forth but I actually need an email right um so that kind of gives you an idea there of those those Communications I think yes and if you'll give me a second I'll show you some code too to to highlight this a little bit to so if we go to the controller here for all of the user account system um you'll kind of see it doesn't have a whole lot really um all that really controls is is the user signed in right that's that's what all these other blocks need to know is the user signed in and if they're not it needs to provide us a simple function for them to sign in um so that's that's user controller or the controller um the ones that goes around yeah the one that wraps all of these kind of user account blocks um okay and then like let's go to the registration oops and here you'll see on the registration form it is using **[00:22:00]** context um so this was a matter of state is accessible uh globally and you can lock it that this is a this a functionality they add in the last couple months you can lock State originally we couldn't do that so there is kind of I think a security uh concerns that you should be aware of for state and context too right State you could technically modify on the page context you can't because that's instance to that block so here on the registration page I don't want a malicious actor to be able to change these values when someone's trying to sign up for an account so we've made these things context okay so there are so once again there is no clearcut when you should use State when you should use context there's a lot of I think considerations uh for when you should use them and they they do different things um you know there's different feature sets for both like I said state is a little bit more accessible context isn't there's pros and cons to both of those um and then from here um the registration form this is where a lot of our uh kind of Click handlers and things you know right when a text field changes on the first name or last name this is what's running on input change um when someone does click a checkbox like the um agreed to terms you'll see if name is agreed to terms then a context agreed to terms etc etc so you can kind of see how those things connect um and then on on password change that's like the the password form the form input password Block it's uh you sometimes it's just easier to show the code than explain **[00:24:00]** what's going on yeah because there's a lot going just sorry let me go to the render Okay so sorry you um here you'll see what happens on input change you'll you might have remember just a second ago I showed you the registration form also has its own oninput change Handler that's to handle all of its other text Fields this handles only the text field for what's inside of it um okay okay does that make sense so we we've kind of standardized a set of names for these actions and it's really go add your name space to that block and we're assuming obviously that your the name space block has a action ready for you but they are kind of a standardized set of names okay so in this case if you if you have like the password one that then goes into its own little thing it will use this input change not the other one because you namespaced it locally correct correct to the closest one and then down here um sorry uh you'll see on value change so the form input password block it does this conditions checking and it makes sure that you've duplicated your password correctly once you've met those conditions we send the password value up to higher up and that's what this is going this what's happening here so on value change we look and say hey is there a value great if so let's go into our Target namespace store even though this has its own interactivity we still need to hoist this value up um and if that store does have an on password change function itself send the value there right um and so that way form input password has its own functionality to handle its **[00:26:00]** logic and then higher up if the registration form needs to handle passwords differently or a reset password form needs to handle passwords differently they can without affecting how the core you know password block works right it it only needs the one thing you put values into it it checks it and then it returns that value up that's all it needs to do and it's the other higher up blocks that determine okay well now that I have the password what do I do with it do I send it along somewhere do I store it temporarily whatever right okay so anytime you need to do anything related to a password you can use that one that exactly like it's a react component anywhere right we just Dro that component in with all its functionality contained and then the higher Ops are going to be the ones that do the decision and what what to do with that value that you've now set nice nice and so in the context right there well the namespace I mean right there I saw you had the namespace as a parameter right so instead of hardcoding Nam spaces you are receiving whatever you have in that field there so that these blocks are completely Dynamic yeah and so namespace actually is one of those things that gets set on context to almost all of our blocks because that is where on that instance we want to say in this instance use this name space um so that's just an attribute on all the blocks any block that has uh support interactivity set to True gets uh these attributes added programmatically and uh yeah I mean whatever you set there that's what it's going to use wow that is that is a **[00:28:00]** great way to handle it I think so I it's it's very different from the typical approach and I like it because it's very logical it's flexible but it's also specific you know you're not going to run into an issue where oh I dropped a I dropped a button block into this interactive application and it's doing something else entirely different no it's not it's saying exactly go do this on button click action inside of this other interactive store so you don't have to about that inheritance kind of problem that you do kind of run into with this um because there is other ways to go about this there are kind of ways that you can say add additional functions or override functions in stores um I just found this to be a little bit easier to follow to know what exactly is going to happen when we drop a block somewhere okay and when you decided to follow this structure of creating the atomic block system how how did that go about is it just like you just created a bunch of feel like HTML dumb elements with some supports and things like that and then decided okay these are going to be the blocks that we're going to use everywhere or yeah I mean it was kind of an iterative process I mean at first we knew okay look we need input text we need a radio button we need checkboxes and those were kind of the first three and and once you make those three well we realized oh well actually you know checkbox and radio are the same thing they're just a different visual treatment so we comb we made that into one block input checkbox it has a style radio um same **[00:30:00]** thing for text like oh well text area is the same thing as text effectively so on and so forth and so we just made that input text and has a couple different uh Styles you can choose from so yeah at first we started with kind of like I would call them the most primitive kind of HTML form elements um and then from there more complex things um a selectable dropdown um that one was actually quite technically hard that took months to of rewrites and trying different approaches to get that to work uh you saw form password um that one we're going to break out a little bit further because it does have that kind of conditions checker thing off to the side there to me that seems like that could be its own interactive block with its own settings you know you go in there you set what the conditions are and yada yada yada and then you could drop that into format pressor but you could also drop that somewhere else I could have see that being used elsewhere so it really starts off with you make a block I think you make an interactive block you make a full application of what you want to do maybe you make a full form and then you start abstracting away and you say well what can be Atomic here what can what's reused um and break it down to its most simplest form and make interactive blocks from those that's smart is the do you think this is just for something like forms or do you see this type of design system used in other oh yes types of oh yes um like I said I really look at these like react components um we **[00:32:00]** really heavily used semantic UI react for years all throughout the site models forms you name it um and I see this as the replacement for that um I can I will show you something besides a form um at let's see if this is gonna work today um okay so another kind of components to the user account system for us is data sets um it's kind of our bread and butter they're really important to us and we want to be able to track who's downloading this who's using our data and other things okay um so you'll see here um let me just open the template working okay so uh in the sidebar here uh I have a block called content gate should be self-explanatory what that does um if a user's logged in they see what's inside of this block if they're not logged in they don't see anything or in this case we do have a little toggle here that says if they're not logged in display a login form okay now the login form isn't isn't managed here that's a actually like a pattern um it's just this once again it's blocks it is the login form block you know like I showed you with all these different sub blocks and things um so that's kind of hardcoded as a pattern and then we just call it in when you're not logged in okay but inside this content gate is a data set download uh block this is using core button with our interactivity stuff you see here it's saying the name spaces data set download same button but you just placed it inside the data set download block that does something specific correct so you can imagine how useful that is right I **[00:34:00]** mean if if if why build a bunch of different buttons that do one specific thing it's one button block and it's styled a very specific way um maybe we have some you know we don't have a lot of we don't have a lot of very uh stylized buttons that PE research pretty basic but you could imagine there's a lot of different pre-built styles that you might have that you want to maintain and so right now I dropped it into something and now it does something different I could drop it somewhere else it does something different and all by setting the name space so here on this page uh we got the content gate that's an interactive block we got the data set download that's an interactive block um and when I log in you give me a moment whoops where is [Music] my password manager so I can open that example okay external count all right so let me why create a download data set one specific to the data set I know this one's really important and that's probably why but versus having like a download file generic one that's that's used for many things well that's because this is a very specific use uh applic application um when you click this we do a couple things um you'll see here this is the American Trends panel and I probably should have signed with a different account um all products all of our ATP data set products require you to agree to legal terms before downloading them other data sets you don't need to agree to legal terms so when you click this button we check have you agreed is this an ATP data set have you agreed to the legal terms if not **[00:36:00]** throw up a modal with a form for you to accept those legal terms and give me another moment and I will tell the account system that I have not agree to those terms and I can show you what that looks like ah excellent of course um let's okay right and let's go back whoops okay so now I told it that I have not agreed to leave legal terms so when I click this if my local is working correctly we should see a pop up or not because it still thinks I've accepted the legal terms well suffice to say um what's supposed to happen here is because I've not accepted legal terms as a a modal is supposed to pop up okay that too is a block um and I think I can show you an example of that um is the modal being a modal a block and then it just contains whatever you want or is it a a specific block for the data set it's just a modal and in its content has a very specific data set download legal acceptance block um so there's actually uh one of these we just did that has a bunch of models that I think yeah okay so um here are even more interactive blocks um here you see the uh this is a is this quote block uh the media text block I think um and rap taing this uh image is our popup controller block so we use this in forms um we use this in content here you go you see this is popup video inside here is the content which is just you know media text with some text in an image and then there's the actual model I'm going to open **[00:38:00]** here and inside there is a video press um okay Block in the ATP thing this is ATP legal form block um and me actually go back so you can see that on action so you can apply this popup video to anything like you can have an image you can have figure you can have whatever but if it's inside that then you can also have a model within it that when you click it it does that instead of okay that's that's pretty neat and so I wish I could get the demo working for you um well I can probably show you the code too to give you an illustration of that say download block here we go and so we're doing something I mean we use blocks in the editor we use blocks hardcoded um so here you'll see you know if this is ATP then we need a model and so we have a little PHP function we've created that will just create the block markup for the pop-up controller um and you'll see here we can pass in Block markup to the content and that all gets rendered and we're just passing in this data set uh ATP legal acceptance block and um let me come over to the view um you can see here here's that block it's pretty simple it's just uh you click accept it's a rest endpoint sends all your user info that we need and sets that you've accepted that thing so it's not just input blocks it's it's a whole Suite of interactive blocks there's modal blocks there's accordion there's other so you saw there we had a little block that you signed up for you log in that then take changes the state of the block and **[00:40:00]** now it's a download block and then when you click this if it is an ATP it throws up a pop-up modal block and they're all interactive and communicating with with each other that's so great so you can have any combination of what we've talked about within each other so you maybe have like an accordion type view with a multi-step form that could work together because it's just again it's just the forms it's just the form fields and the state then you can that is that is so cool it's that's a great great way to handle things that's again different than you build the modal once right you build the modal once and if you do it well enough that's it now you can use that Modo block everywhere programmatically via PHP or in the block editor however you want to use it it's very personal that's great so even like if you want like your gated content is great that example because Learning Management systems or video platforms right they want to have the option to have the video that's there always but it's locked you have to be registered or you have to have a certain tier but then maybe you wanted to sometimes be free or be available right but but you could just always just wrap it within the correct container and based on that not only the video but everything else that you want can be conditional right oh yeah I mean a long time ago it's funny you say I built I mean very long time ago I built one of the first Learning Management systems on WordPress decades ago now and you know I imagine today if I was building a learning management system with box that would be **[00:42:00]** great right you have a Content gate and you could conceivably wrap this in the site editor too you could make whole templates use this right you get a template you get this version of the template if you're logged in you get an entirely different version of the template if you're not logged in um you could do a lot with that yes yeah I think it it if you were to do a learn management system it would be completely different than how they're structured loud like if you look at learn Dash or lifter or anything like that they work but it's a little cumbersome to work with and everything is in the back end and it's very different from what you're seeing we talked about this briefly last time compared to what you showed me in like creating your quizzes and everything right there yeah it would be a completely reimagined experience for working with the actual thing and even like how you work with progress within the courses and the content and now with interactivity you could very easily have it where as people Advan you're keeping share that progress across you could be watching a video go look at the syllabus somewhere else and the video can keep playing right yeah you can just do so many things yeah this is so great this is so great so last time you talked about the tables and the charts and this brought up a question many many questions really but a big question is you you said you were using what was the name WP no it was table some I don't remember the name but you were using a table block right that exists to sort of lay out the dat data and then **[00:44:00]** you had your charting tools internal tools that actually do the chart and so considering the interactivity API how would one do it there to where What's Done in the table which might be a separate block than what you're using to control the chart right how how does the chart get the information of the block especially if you're using thirdparty tools right that is block context server side block cont I mean well there is client side block context as well obviously in the editor but that is all uh block context um we use that I mean I can explain a little bit how that works uh let me oh so the way you get attributes for example from a block right that's that's contained in the block itself so then let's pull up is it is it similar in that sense where where you can programmatically get access to it yes um so let me show you this let's just take a look at this one probably have some good charts yeah yeah here we go okay so this is CH Builder um this is this is all blocks um so the way that this works is um we have the table block we have the CH Builder block okay basically what happens is when you make value changes here they get communicated to the Chart Builder controller block and the the line chart is the controller that's the controller so we have um so for every type of chart we've made a variation on our controller block line Pi area bar whatever to make it easy to quickly create one um this is what contains all the data really um and it communicates that down to chart Builder which is kind of the visual layer **[00:46:00]** and this is where how all these settings for the visual side of things uh live colors and colors Keys padding all that stuff that that get that lives here on the chart Builder um block itself and then the controller is what tells chart Builder here's the data you should use um the table is really just an interface to edit the data um okay you know well and displayed a little bit on the front end but for the most part this is just to edit the uh the information so when we come here you know the the controller block says use the CH Builder block first and then put the table Block in um oh it does show the table we do show the table so put that here in this data tab um so that one's pretty simple actually I mean it's very complex what it's doing but like it structure is actually pretty simple but it's interesting so you could have in theory any type of table block because the the data contained within it if it's done properly it's there in the block right you don't need a table block at all really um okay that's I think kind of the best part of this um so to show you so you just need the the data reference data into the tri Builder controller okay yeah so it could be just an object or an array and that's it or like you were doing here uh using a table so but in this case is that table a table that's built by your team or is it like a third like a just a a table that exist are you hooking into it yeah for that for that one instance of that chart **[00:48:00]** what you just saw there that was an editor who went in and built that table I mean probably was a CSV delivered by one of the researchers and they just dragged and dropped it in there so it's not like a lot of editing um but then when we come over to here you'll see uh this very big database product that we have um this is not block ified yet that is going to happen later this year um but a lot of this is just PHP even so what you're seeing here is our tabs block being programmatically built with PHP uh and then rendered as a block this is CH Builder um it's not the same table you see there's a little bit of a different interface but this is the chart Builder block and we're just passing in data from this database in programmatically for the selection and it builds their chart so that way we can use chart Builder editorially and content but also like a component we can use it programmatically wherever we need oh okay so you could put in something else as the source that goes and fetches from your data warehouse whatever and pulls it in doesn't have to be the localized stable that's there m and then I saw you had something called synced charts oh yeah oh yeah um let me share that again this one we do a lot of these and this is actually something I I'm surprised by because I just have not seen really anybody else in the WordPress space pick up on this um The Entity system and WordPress is exceptionally powerful and actually very easy to use so this block you know we've got our Shir Builder controller and it's contained in **[00:50:00]** this synced chart block okay what this is It's template part it's reusable block okay all it is is it pulls in a specific post type um and you know reference a post ID uh and it pulls in the contents of that post as blocks and then it lets you edit those so you've seen this before right let's say um change a value here when you go to click save oh what's that you've seen this before this you've seen this whenever you make a change to a pattern or whenever you make a change to the typ of part um this is WordPress entities and so we've said use this post type chart and what the ID is and so it's letting you know hey you've made a change here do you want to save that that lets us do obviously is it lets us put the chart in multiple places at once and edit it from multiple places all at once so there's kind of one universal source of Truth for that chart um so so are these charts I'm sorry go go go go ahead go ahead are these charts a post yes like once this is created this is there's the a chart right and you can use it somewhere else so if we open up the code here of you it's not just a block it's it's a it's reference to an actual post all that is in this post is just this chart block with a reference that's it it's the actual chart post where this chart lives so if I click on this we have a nice little handy dandy open a new window um so this will open up just that chart and if I want to I could go **[00:52:00]** um edit this kind of on its own uh kind of separate we'll let that Lo here so you can see that so here's just the chart right um and any changes I make here so this is the post of the chart which has this and then when you're seeing it over there you're just seeing the contents of this post there now what's great is because it's using entity The Entity system this is all ready to go for real-time collaboration that means I can have editors here or you know designers making a chart that is their job after all to be making charts they can come in here and really find two these charts while I can have editors in here writing content doing whatever and those values will change in real time now obviously that's not ready to go today WordPress syc isn't live for everybody you can turn it on and you can kind of see that in action in a rough way um but you'll see I I edited the chart a little a little bit we have a little less value here so when we come over here we see that that that value is dipped um and I didn't need to load in the chart or something it's just pulling it in automatically this is so great so we do that throughout the system we do that for charts we do that for quizzes so that you can you know a quiz lives on its own but you could if you want to embed that in a post um we do that with all of our kind of content types okay so you could are these do these always have to be a post or or can you create a little **[00:54:00]** chart that's just an instance right there yeah yeah no you can make for that block I could drop in just a chart here it's just a chart block it doesn't get saved anywhere else except just this one instance yeah okay but when you when you want to use it okay but the main entry point is the main the main entry point is the sync chart right go look for a chart or maybe I need to make a new chart okay okay so you created there yeah yeah and I said you know what kind of chart it is let's just say it's a column chart it's going to go so that will create a new post that contains that pattern of the table with the pie chart or column chart the column and then and then embed that in here yep so here we go we've got the it's it's went and made a chart post called it Seth's test chart and because they selected column chart we drop in a template uh to get started so it's got the column chart in the table some simple settings wow and that's using the entity system yeah that is using uh use entity records and use entity props this is great yeah I have not heard about the entity system except from you last time I think it is not represented properly yeah it's like the interactivity API nobody was talking about it and they started to talk about it and then nobody got it still and they're sort of getting it now uh I'm among those it's I think the entity system is going to be great that's oh yeah I mean if I can if I can geek out on anything for you all for **[00:56:00]** one more minute it is the entity system um I I would say look if you're looking for a complex concept to dive into do this before you do the interactivity API The Entity system is gonna it's gonna just open you up to do so many cool things just so many more powerful things that you just couldn't do before yeah how does one learn about the entity system where should we honestly the WordPress de blog there are some great uh examples on there on using the entity system there's some great examples on using it for getting postmeta from a a post and and changing values there's also some good examples on there on how to query a bunch of posts using entity records and then lastly uh just look at the source code for template part or or pattern block uh in the get Gutenberg GitHub repo um because they're using that it's a it's a few lines of code to get started with entities really it's very simple people just haven't done it yeah I'm I'm looking at the docs here I'm GNA link them in the video but I see so you can query a post of a certain post type you can query by post Ty some arguments or by specific post ID it it uses almost all the things you would expect from WP query so why use WP query at all well like in this context well really this is you know I'm sure someone will chastise me for saying this on the Gutenberg team but this is WB query for the editor um use inty records is WB query for the block editor inite editor that's what it really comes down to okay okay so this is a better better **[00:58:00]** way or might might be a better way to do it if you are in this space of of building interactive experiences in in the editor this is so cool I will I will definitely look into it and we'll have to talk more for sure about entities and how they work I'll try to get uh going for it we have a lot of other cool things that are just are not even live right now that we're just waiting on WordPress sync to launch um one of them is one of my favorite things that I worked on last year was um we have a editor panel that shows uh you know we have reports and they might have sub chapters which are just other posts that kind of get associated with that and with the entity system it's great because when it's when the WordPress sync is live I can have all these different Post open and that sidebar panel will be changing across all the posts as I'm updating one post because they they share that information and that's just that's just one I think really cool use case Beyond is like putting stuff in the editor it's the entire interface can use this WordPress sync system and entities is to achieve real-time collaboration is this so would you do I don't know if you're doing it now but in the future then would you do it for let's say figures as well like figures on a document images in a in a publication is it better to do it that way instead of like oh I just put an image here it's better to just have it as its own thing and reference it yeah so I wish images used it this way there is **[01:00:00]** obviously a little bit of a performance overhead because you are doing a query right so when we load the page we do have to query charts and say get this get this chart so I definitely think for images it makes sense to statically put those in the the post that they're in but yeah I mean you could if that's the that you need to do right like you have a central kind of store of images and you're going to use them in a lot of different places multiple times we don't do that you know the images we upload are that's for that one post that's for that okay yeah um whereas things like charts and quizzes that that that we do share across post that makes sense so but yeah I mean if you you know if you had an image Library situation where you were using images a lot I think that making kind of a little entity wrapper block for that would be very useful because that way you edit once propagates everywhere right that makes sense that makes sense yeah mostly because I'm just thinking like pure research it's it's a publication right you have all these and then you you have well you're using attachments right that's why you have an attachment page that's that's the way you alternatively show the image people that use an actual attachment template yeah most people I think kind skip attachments um but yeah we actually have an actual attachments template so we drive people to that ah that makes sense okay okay which yeah so that way if we edit the image we can just say hey you have the link to the attachment page go there you know yeah okay that makes sense **[01:02:00]** that makes sense wellow this is great I'm glad interesting so so so many more questions popped into my head but I don't take I don't want to take too much of your time I really appreciate the time Seth to go over this uh with me again in more detail I hope we can talk more about entities and other fun stuff a little ways down the road but again congratulations on everything you're doing on PE research this is a fantastic way to handle things and I think a lot of eyes are going to be open to how one can streamline the editing process keep everything in house don't have to depend on so many of these form plugins which sometimes you need to it's fine but if you have the talent and the resources and you can just build these CU sometimes it's just a form that you're going to reuse everywhere where you don't need all the bells and whistles you just need that right and so a lot of these things um can just come into your own code base and make everything safer more secure more performant which is is a big thing in the WordPress space So yeah thank much one more thing as a as a leader of other developers if that's if that's your role uh this approach will save you uh you know this helps you scale up your development offer efforts as a team um you you're not repeating yourself and you kind of have structure to your to your blocks to your applications kind of gives you a path forward of how we're going to structure things so if you're a leader of a Dev team I I would suggest that you kind of take this Atomic **[01:04:00]** block approach it will save you a lot of headache down the road oh yeah hooking into that how do you manage the documentation for all of these do you have like a story book kind of deal or we have a little subsite called Dev docs on our main on our main site and you just go we have you know site editors so we've made a nice little documentation site and you go write release notes and de docs in there nice nice of course the solution is WordPress yeah well but it's it's a it's a the correct way to do it I I think a lot of people ask when working with clients and things like that like should I use WordPress or something else and most of the time the answer is well it depends of course but it depends if you're doing something what I would say before is if you're doing something that you're using 50% of Wordpress or 60% or 70% and you're just tweaking some things to make it work to what your use case is then perfect use WordPress don't use anything else if 80% of what you're doing is it's custom and it's not what WordPress is supposed to do don't use WordPress you you get it you're still going to custom code everything just just build a react appliation or LEL or whatever you want to do but it's coming to a point with all these things where I'm like oh okay we have to start looking at some new very interesting use cases for WordPress because now we have the option of yes yes you're saving yourself the hassle of authentication author ation um roles we've got um the databases you can create your own tables which **[01:06:00]** you should for a lot of things and you can with the know how many times you hit a web page and they're loading every single component and everything that they need where with this you only load the tabs code when Tabs are on the page you only load the video player code when the video is on the page um that to me that that was one of the first things with block I was like wow this is awesome like this solves so much trouble CSS you know yeah like you only build the CSS and assets that you need on the page like that's huge it is that's one of the big ones for me too because all these plug you need you needed to get another plugin to get rid of all the code that all the other plugins are loading in every single page load and all the libraries and everything so with this well and even if if you're going to make a react application you need to figure that stuff out yourself too WordPress just takes care of all that now for you does it for you yeahh yeah this has been great I really appreciate it Seth and we'll look forward to another conversation about I look forward to talking with you again thank you for having all right oh where where can people find you Seth if uh because I you're very active Community Twitter's a good place I'm at Twitter at Seth Rubenstein so you can find me there and I post stuff all the time about little crazy ideas I'm working on WordPress some of them never see the light of day but some of them are interesting excellent all right I'll link that in the video notes **[01:08:00]** as well thanks so much Seth thank you have a