Gutenberg Blocks CPTified

uh so to kind of paint the picture of what i'm going to talk about um if we remember back to before the block editor um where we built sites using classic editor using meta boxes making heavy use of custom post types things like that um let's say you had a requirement from a client that they have maybe dozens hundreds of testimonials that they have from their own clients their own customers and they want to be able to display them in their wordpress site in different places different pages and blog posts sales upsells different things like that uh in the pre-gutenberg days the way we'd probably go about that um if you're uh want to do custom code or you'd probably find a plug-in that does exactly this is you'd create a custom post type and with that custom post type you'd say okay we're going to have thumbnails for the featured images for these things we're going to have the content of the custom post type maybe we'll make that the testimonial the title might be this we might add a custom meta box we can get all this different information and then we'll give our clients different short codes and things like that and whenever they want to insert one of these testimonials somewhere into their site they can use one of these short codes that they created and say okay here's that testimonial and of course that worked um but along came gutenberg and kind of the one of the promises uh that gutenberg gave us was okay that's a way that you can do things for uh for your clients but it's kind of awkward right you're editing something that isn't exactly what the user is going to see if they want to get this particular testimonial they have to go back to the testimonials list somewhere over else in a custom post type they have to like copy the id or copy the shortcode or something like that insert it into their post um if they want to make changes they're going back and forth is kind of a pretty uh crummy experience in some ways and so what was cool about gutenberg is guniber gave us the ability to have blocks so we can now have uh creating like a block with a testimonial a testimonial pattern so for example welcome to the block editor um so let's say for instance if we were to do this uh right now with gutenberg or gutenberg i came out it would be a little bit different let's see if we can find a testimonial pattern i think there are some testimonial patterns um [Music] here we go so let's say this might be a testimonial that you could then say say okay we can replace this image with the one of the customer that we want we can give them their text here we can set the custom person who said it this and this is great right we have a really nice visual way of editing that testimonial it looks good on the site but now let's say we want to use this in another place maybe in another blog post something like that well we could copy and paste this and go to another one and try and keep the things in sync but of course gutenberg has that new feature or new feature gutenberg has that feature called reusable box so if we took all of these things let's grab all of those we can convert this uh into a reusable block so we'd say testimonial number one and then whenever we want to in our site we could copy and paste we can say okay let's insert uh testimonial number one as our reusable block and okay that works we can make the changes that we want to things like that um but that's uh kind of a bit limiting if we remember back to what we could do with custom post types one of the things that were powerful about them is that we could render it however we want we could use that bits of data in different places let's say we wanted to have an archive page on our website that would display all the lists of testimonials if you were doing this with reusable blocks we'd have to create a page with testimonials and we'd have to add every single testimonial reusable block to that page and remember to do that every time and then let's say we wanted to have a completely different design we'd have no way of doing that right because this is just a block it's just a series of different blocks yeah if you change one of the reusable blocks it changes all of them um so it would save that but this is just a text and this is just an image this is just uh some text here these are two horizontal lines if we wanted to change the way that all testimonials displayed on our site we would have to go through every single testimonial reusable block and change that um not to mention it would be kind of impossible to maintain if let's say we want to have two different designs this testimonial block how would we even do something like that that'd be pretty difficult um and i think it's kind of one of the holes uh that a lot of people have kind of talked about of well i want to be able to have the power of rendering all this information however i want to accessing it whatever ways i want to but do i still i still want to be able to give my client a rich experience where they're editing something in a wysiwyg fashion so i hope i've kind of sold the kind of like idea and the pain point there um of how things work right now with blocks and how in some cases that can be a limitation for things especially when you're thinking before of how we would do things with custom post types and stuff like that one of the new features uh that if you watch one of our what's new in wordpress uh videos i think for wordpress 5.7 if you remember that's when the reasonable blocks interface changed um so starting wordpress 5.7 if i make a change to this reusable block let's say let's add an exclamation point when i go over here to update i see this new panel that says okay here's the reusable block and i'm going to save now the reusable block but i could also make changes to the regular content of the post and now when i go over here to update you'll see okay i'm updating the page i'm not updating the reusable block i could uncheck that check this and so essentially what's going on here um is wordpress now is keeping track of all the different things that are being edited so right now we're editing this reusable block but then we're going over here and we're editing um this block and when you go over to save you're saving that whole page or whatever different blocks you want to and this was kind of like a minor feature that's introduced but it introduces some really cool functionality uh that we can take advantage if we want to combine these two worlds if you want to say okay i want to be able to give my clients a rich editing experience but i also want to be able to do things with this data in a smart way so what i'm going to do is i'm going to kind of give you a demo of different things that you can do with this functionality and then we'll take a peek at the code a bit at some point later this week i'll probably be uploading all this code up onto github and when i do i may i'll make sure to leave a comment on the meetup post um but yeah so let's dive into kind of like how that could work so i've created a custom testimonial block and the first thing you do when you enter a testimonial block is you can choose either to select an existing testimonial or you can create a new testimonial for now let's select an existing testimonial i'm going to select one here from john smith and you can see i now have this simple little testimonial it has an image um this is all a custom block that has an image that if i want to i can replace and pull in a custom one it has text that i can edit it has the name of the person place of the title all that kind of stuff but you can see when i inserted this and when i change that image we have a new thing over here in saving we have a testimonial section and it has john smith which is uh where this testimonial is coming from and so this testimonial if we look at the raw like code editor view you'll see that it's just a testimonial it's a dynamic block this isn't like saving this specific html here it's just a it's a dynamic block that saves all of its information to a custom post type entry and so we can take a look at what that looks like let's go back to here you'll see i have my testimonials custom post type and if we look at john smith we can see uh that whole block there and so this kind of functions a little bit similar uh to how reasonable blocks work uh to how reusable blocks work i mean you see i have my testimonial you can see the image that i updated over there has been updated here it's been updated everywhere i can make the changes to the text that i want to any of those things ceo of cool stuff and things and when i update this um it's going to update everywhere this is being used um and so yeah so what's happening under the hood here is that it is saving uh this testimonial content to the excerpt of this custom post type this is the title as you can see here if we go ahead and we change this title let's say we change this to jonathan smith you can see that those two are in sync this is the featured image so you can see we're editing the featured image we can do it through here but when i do it's updating the featured image for the post um this the ceo of cool stuff and things that's actually from custom metadata with a custom medicare that we've registered um so all this is going into a kind of programmatic place and let's that lets us do a couple of really cool things um so i'm gonna go over here uh to [Music] my sample page i think so you can see a couple of examples of this uh of these different testimonials in use and you can see what i'm able to do is this is the same testimonial data it's the same jonathan smith you see it's been updated but over here i'm presenting it a bit differently i'm being able to mix and match uh attributes so here this one has color so i can set a custom background color if i want and this is just affecting how this testimonial is displayed whereas the actual data here uh the jonathan smith part the lorem ipsum the ceo of cool stuff and things this is all the actual data that's being saved to the custom post type and we're going we're kind of getting back to that separation between data and ui and presentation uh the way they're editing it will reflect how it looks on the site we can take a look at that uh permalink we can see it looks almost identical uh that's a bug that i need to fix um because it's not a square image uh but yeah as you can see this is now the data we have this custom presentation that we're defining in this particular instance of this testimonial and that's how it gets displayed on the front end and of course then we can say let's go back to an image that is actually square we go to update we can see that we've updated the page and we've updated the testimonial and all back to normal and so this is a full custom post type and a regular post it even has its own page let me go back and show that um which means there's some other really cool things that we can do so we can see this is the jonathan smith uh testimonial on its own page you can see the url testimonials john smith um and this is uh just what that testimony will appear like i've done a little bit of editing because it's a custom post type i can use regular templates uh like you'd be used to before in a theme so you can see the template here is one that is specific to this custom post type and i've done that to remove the title and just render the block things like that but because it's a custom post type um if you remember from our wordpress 5.8 talk uh we talked about the query loop blocks and some cool things you can do about that so i'm going to create a new uh testimonials uh query archive page and i'm going to introduce i'm going to insert a query loop and i registered a block pattern for this so we don't have to do this entry ourselves we can scroll on over and we'll see here is our preview of what a testimonials query loop would look like so i'm going to choose this block pattern and you can see if we go into the query we're searching for the testimonial post type we could order if we wanted to if we wanted to we could filter by authors we could filter with a search keyword things like that and then for each testimonial inside this loop it's rendering the testimonial block um and if i wanted to i could even make changes to this testimonial here i'm not sure if it's a great idea but i could for instance let's say we want to let's remove this bold and italics when i go into publish you can say i've actually edited cine apple bombs testimonial and the same way as before where i can separate visual controls i can do that same thing here so you can see before we had that crazy looking testimonial for jonathan smith but here this is just a regular one if we wanted to change these we can say okay maybe let's hide the client information you can see the client gets hidden uh when you i have it set up so that when you're inside the block the client always shows uh so you can edit that information uh but you can see it's hidden here but so yeah let's say we wanted to disable the client we could then select our color we can say maybe we want these on blue we can give these maybe some text as readable let's take that and make it dark there we go that's readable and so then we have uh on our page here we have this testimonials query archive that has a list of all the testimonials and we can use all of that advanced query block functionality so we can say uh where are we go to gray loop and say okay maybe i only want one per page i only have two set up on this site uh maybe we want three per page things like that we can like i said we can do those filterings with post type and filters and stuff like that so you can make this really dynamic um but yeah so again these are uh custom post types so if we go over to let's find our testimonial again oops you can see here is our john smith testimonial back to looking like normal um this is a testimonial with an archive so we can see okay here is the archives testimonials this has all the list on the site and this is just a regular custom post type archive and in this case it's rendering every single block but because it's a custom post type we can do whatever we want so i've set up a custom page template uh custom template and you see this is just a regular wordpress page and kind of like in the old school days when we wanted to do things like this i set up a testimonials list template and if we take a look at what this actually looks like i can provide a completely different way of running this information so in this case this template i've decided to just render the built-in block quote with a site and that's it and because all of this is stored into a custom post type um i can make all that dynamic i can make it do literally whatever i want um which i think is really neat um so what i'm going to do now i kind of like to gauge how many people have explored building their own blocks if people get shining in the chat i'm just going to inform how i kind of talk about this custom code and how much we want to dive into it um or if we want to uh kind of uh just do a bit okay so i'll take a kind of brief look look at kind of what the code looks like for this like i said um i'm gonna be i'm probably turning this into somewhat of a plug-in that exists on dot org um but i'm also going to post up the code to github so you can take a more in-depth look but i'll kind of give you a brief overview of what we're doing that's uh interesting here let's go over to phpstorm actually hold on let me change something really quick okay screen share [Music] all right so hopefully y'all can see uh this code let me go into the actual thing that i want here [Music] okay uh so this is a regular block and i'm going to hop into me this over here and we have an edit function for our block and it's some things are kind of normal so you can see we have function edit we're pulling in our attributes we have our block props and then we start doing some things that are custom here so what this is working off of is some new functionality that was introduced um a few releases ago called entity providers and entity hooks um so what we're telling [Music] let me go back for one second so we've created this custom testimonial block and the way this testimonial block behaves behaves differently in different contexts you saw when it was inside the query loop that is displaying the current testimonial for that query you saw when we were on the testimonials page and editing a specific testimonial in that custom post type you can see that it was saying okay we're just going to assume it's this testimony so i didn't have to choose first which one i wanted to use and then everywhere else we're presenting an interface the user say okay select what testimony you want to display or create a new one and so the way we're doing this is we're having the same reusable function and this is kind of like the main bit of our actual edit function in this part if you've worked on custom blocks before might start to look a little bit familiar uh we have our block controls and a toolbar we have our inspector controls which is what we're using to say whether we want to display the client or not and then we have our editing stuff so we have the image that's displayed and we have ways to upload the image we can show we can drag and drop into that block that kind of stuff we have a rich text for the testimonial clients and we have our rich texts for the client name and for their like job title or position but what's special about this is we're using this function uh that i've called use testimonial prop uh but what use testimonial prop is is is actually using a function called use entity prop that is from wordpress core and essentially what this does is this says okay i say that you want to edit some kind of entity i'm an entity you can think of like it's a way that data is stored inside wordpress in a generic way post types are entities taxonomies or entities users are entities pretty much everything is an entity um and so what we tell you is entity prop is we have a specific kind of entity we're looking for which is our custom post type but we're looking for a specific custom post type instance uh which i call the testy and then we say whatever prop we want to listen to so you can see how we use this we're saying okay we have the status prop that i want to edit we have the title that i want to edit we have the content which i want to edit which is in the excerpt field we have the job title which i want to edit and we are storing that in custom post type meta and these just return the values and the setters that you can use like anything else if you've used for instance attributes and set attributes you can kind of use this similarly but it's a tribute that isn't stored uh to the attributes block json instead it's stored to a custom most type prop this is the title the excerpt etc and then you can see in our rich text and things like that they just behave as normal so we have a value we're saying this is the content the on change is the set content and so what happens here is we're doing a little bit of dynamics to figure out what's going on so we're checking what the current post type is and we're saying okay let's reach out to the editor store and figure out the current post type if the user is editing via testy post type so that's when they're in the user interface they're under testimonials they've selected the testimony they want to edit then we render um oops that's not the one i want to if current post type is a testy then we just render the article and we render the content which is that function i showed you before our edit function that handles everything otherwise we render our user interface for the chooser and that's the bit that i showed you first which says okay do you want to choose an existing testimonial and create a new one and we say to the user okay choose one if we don't have any id and then in this case we are using attributes so we're saying okay this is a block instance and for this block instance it has a particular testimonial id and so that's why we're storing in the attributes here we have some placeholders and then once we have the actual entity and we've determined its value we use this cool component called an entity provider and so what that does is it says to wordpress it says okay any components that are rendering inside this entity provider component any of those that are listening with use entity prop for this kind of post type this type of a testy give them information about this post id and so that means that we can say okay this is that entity provider here we're rendering the content the same way we did before and this whole thing is agnostic it just knows i use use entity prop and the rest of the block is saying okay in this particular instance you're editing this entity if you are editing the current post type that entity will be the actual post that you're editing so we don't have to write any editing prompt uh any entity provider and then this last one is a little bit special this is how we enable the integration with a query loop so we're saying okay we're listening to something called block context and what block context is is it's kind of a key value store where you're saying okay i want to listen for certain particular bits of information and my block is saying okay i want to receive information about the post type and i want to receive information about the post id and so when i have these bits of context i'm now rendering an entity provider like i was doing before but this time i'm rendering one that is specific to the entity that is being showed in that post template and then it's just the same as normal rendering an article with some content and so because this is a dynamic block i then have my render function and this is what actually spits out the html and so what this means is that if in the future for instance we want a new design for testimonials and we want that to appear everywhere or we have some new functionality i can make that change to this render function for this dynamic block and have it affect everything not need to do any updates not need any versioning anything like that and the last thing that i want to look at in terms of code to kind of show i can see this is how we're registering our custom post type um the important bits are we're marking this as public so we can get um urls generated and things like that um we're opting into having the title the editor the excerpt the thumbnail custom fields we're providing a template and so this is when you go to create a new testimonial if you create a new testimonial via the ui you'll be shown the testimonial template and we're locking that down so when someone edits that custom post type for testimonials they can't insert in other blocks and break things like that and all that bit is normal and then the only other kind of weird thing to be aware of is that we're also filtering the default content of a post and so when we create a new post of this custom post type if there's no content available for it and this is what's run with like get default post to edit we set up a fake block that gets initialized with this information and the reason that we're doing that is because our custom post type also has a custom controller and there are different ways that you could go about doing this but this is how i chose to where when you create a new test window which i realized i didn't demo for you but i'll do that in a second excuse me we're creating what's called an auto draft of wordpress and we're doing that by calling get default post to edit um and that's creating an auto draft so that if someone creates a whole bunch of testimonials in a row but it doesn't go to save them they get automatically cleaned up by wordpress um but yeah so i'm gonna go back to i just want to demo that one thing um to show you how that flow works um and then yeah we can open up for any questions uh if anyone uh wants to know how you can go about this yeah so if we go let's say to our new page let's go to a sample page we can look for our testimonial block we can create a new one and then we get this all these like kind of block play sort of stuff so we can say dorm ipsum this is my testimonial information and say this is maybe uh given by steve um ed honcho at wpmyc we can select our image uh let's edit this to be square i don't know we've set up our testimonial here and you can see we go to update and we have our testimonial steve bruner um and it's everything on the page yeah that's the flow that i didn't show you for uh creating a new one of these from scratch um but yeah i think that's pretty much everything that i wanted to cover um like i said i'm gonna be uploading uh this presentation uh uh onto github and all the code alongside of it uh at some point uh later this week once i get things into a little bit of a nicer place for people to look at things but i think the tldr is if you have done work with custom blocks before um i think this is something that anyone can really do um it's gotten a lot simpler with those changes in wordpress 5.7 um so that you don't need to do all sorts of weird hacky things that you had to do before but yeah i think it's a really great option uh when building blocks and you want to essentially blur the lines and have have your cake and eat it too of giving your clients really nice rich editing experiences while still being in full control being able to treat these things as data and render it in different forms we didn't even talk about things like how this can work for headless wordpress and things like that where this is all in custom post types and it's not like part of weird blocks that you have to deserialize and things like that it's just all available there in a structured manner for you but yeah so if anyone has any questions i'd be happy to field them great great job that was awesome anyone have questions for tim anyone here we go larry's asking how can i start off with the correct url for the knee up all right larry i'll email you i'll email you go to uh maybe someone else can answer that but i'll email you how you can find the right urls are to our meetup page anyone else have a question chris is asking jim can you speak more about the accessing of data without parsing through the box yeah so let me uh go back to this code and i'll kind of show how some of those work so let's go template dash and that's not the one i want i want okay so this is a regular php template that you would kind of use in any uh wordpress theme um and you can see how i've gone about accessing it's the same as normal so this is a custom post type so i am querying for uh all posts or i guess this is actually queering for five let's say number posts equals 100. um and requiring for all the testimonials and my custom post type we're having the basic parts of 2021 they get header the while have posts that familiar structure in our entry content we're just looping over those posts and then we're just accessing it like we would normally wordpress we're calling get the excerpt get the title if we wanted to have the information about their job title we would just i'll get post meta uh so like i'm saying like all this stuff is stored to uh the custom post type as metadata as native properties to the custom post so you can use all the functions that you'd kind of be used to get the excerpt get the title um uh getting post meta all that kind of stuff um and it it's kind of like back to back to how it was in the olden days uh let me see if i can pull up and so yeah you can see that at work in my render function i'm either pulling in the id that is specified when you go through the chooser or i'm choosing the current post and i'm just going through those things as normal calling get the title calling get the excerpt calling get post meta i'm using wp get attachment image all those things here's some like custom gutenberg stuff for getting block wrappers and it provides all the custom classes and things like that um but it's really just uh straight up wordpress stuff and it's just using the gutenberg front end as a gutenberg front end to provide a nicer interface for your clients to edit things with i hope that answers your question i think it did and chris is chris also yes just asking if you can access it outside the loop as well i'm guessing once you have that post id you can do anything with it yeah exactly once you have the post id you can do whatever you want um the render block is set up to pull in an id attribute so if you wanted to like you could call the render block directly you'd probably want to do that using the actual render block function that's part of wordpress um but yeah it's now just a custom post type that can do everything you want to do great wait what is your favorite anyone else has any more questions yeah i know steve we've talked about kind of like this kind of thing in the past of this kind of um breakdown between of like how good wear blocks can work and how uh custom post type things work i hope i hope uh it was useful to you as well um and chris is asking a good question i think the answer is probably a little bit of both very dynamic for static but so he's asking um he's been wondering about the blurring of the lines but when to use the cpt versus blocks yeah and i mean so i think so there are some parts where it makes in some some parts where it doesn't make sense um i think reusable blocks right now there's kind of an unfortunate where you can have a couple of reusable blocks right but if you have like hundreds of reusable blocks um it can get it unwieldy there's not really a way to categorize them things like that um and so i think in my minds at least everyone is free to kind of like approach this in different ways but in my mind i think that if the reason that you would want to store this not in a custom post type or excuse me not in a reusable block is just because the reusable blocks interface can kind of get messy for dealing with lots of things i would say that's not when you should use it it wouldn't surprise me to see a world uh in the next year or so and there are lots of improvements that are planned for usable blocks that give reusable blocks the ability to categorize things and stuff like that i think using a custom post type um makes sense when the actual data you want to do different things with um and so i think that makes sense for things like testimonials um it makes sense for things like maybe user profiles user bios like i think most of the things that you would have done custom post types in the past still makes sense to do custom post types uh now as opposed to like previously the option would have been maybe just do it as a short code um and you'd have a short code called testimonial and that short code testimonial would be something like bracket testimonial content equals this is the testimonial um author equals my cool client right so like this is how you might have done something like pre-wordpress 5.0 if you didn't want to go ahead and create a testimonials custom post type you could just create a testimonial short code and then wherever you wanted to you could copy and paste this and so i think where before you would have just used a short code like this i think that's when it makes sense to just use a block and then you have the cool added benefit of reusable blocks so you don't need to paste this all over your site you can just put and worry about changing this and now they had some typo here and you have to update everywhere else you get the cool benefit of reusable blocks to use these in multiple places but when you would have gone to the trouble of creating a custom post type in the past i think that in my opinion would make sense to use a custom post like backed block um but yeah and also to kind of clarify because i realized that your question might have gone i've been asking something slightly different is that i don't i i think realistically 99.999 of cases of custom post types that are done should be done in the block editor enabled and shouldn't be done using classic editor and things like that and i think with these kinds of tools and there are also things with acf blocks i think part of the thing that i don't love about acf block is that you're not getting that direct manipulation feeling that you do with like native blocks um and so that's what i like about this approach is that you're able to give that your client the best possible experience of like you're touching as you're editing you're actually manipulating in a true wysiwyg fashion um i think that is uh what's so powerful about this approach but yeah i do think that you should be using the block editor for pretty much everything and always be using blocks the question is really just are you using a block that is a custom block back to a testimony back to a custom post type or are you using the actual quote block that is built into wordpress and using reusable blocks using block patterns um and i think the time to using a custom post type ones is when you really do care about accessing that data in different ways because otherwise you can just use a regular uh just a regular block uh that's a dynamic a good number block doesn't have to back to a custom post type but backing it to a custom post type means you can do all these fancy fancy things of querying and getting in different places using it in the query loop block all that kind of stuff yeah i'd agree the query loop block i feel like changed a lot it changed everything yeah i think so and i think um uh full site editing is hope to launch in 5.9 which will really make use of the custom query loop block and things like that um and i i think there's a lot of really cool stuff that you can do there like we didn't show it i showed in my example of were for each query loop item it's using the testimonial block the custom testimonial block but because it's a custom post type you could use other things you could use the native post title block and just pull out the post title you could use the native featured image block and just pull out the featured image so i think the way those custom queries can do things really uh opens up a whole new world when i was first kind of putting together this sample plugin one of the things i was thinking of and you might have saw it flash up in a couple places it should that we have a testimonial list block that has those things of okay i want to display all testimonials in this category i want to display all testimonials with this that and the other thing and then i was like oh well i can just use the custom query block and it handles all that functionality um and yeah it's so powerful and i think people are we're only just starting to explore uh the different things that you can do with that else have any questions or we're just all looking forward to seeing the code the code i think i think i know i am um awesome thank you so much tim that was great

Channel: WordPressNYC

Views: 182

Keywords:

Id: 7MmJsJ_8F94

Length: 39min 38sec (2378 seconds)

Published: Wed Sep 22 2021