 All right, so welcome everybody. My name is Nick Diego. I'm a developer advocate at WP Engine, also a contributor on the WordPress training team. And today we're gonna be building block, building custom blocks in WordPress. So I'm gonna share my screen. So this talk, I actually presented at WordCamp US, which some of you may have seen. And so bear with me a little bit, but we're gonna basically be running back through that presentation. So I wanna give you a bit of context. So at WordCamp US, I gave this presentation in 15 minutes. We built the whole custom block in 15 minutes. The purpose behind it was really to show that it was possible, I guess, to create a block in such a short period of time. So the idea behind this on the workshop is to go through it at a more legally pace and kind of allow you all to ask questions, kind of answer some, go through each individual piece in a little bit more detail. Because while the presentation at WordCamp US was a bit of, I guess, performance art to see if I can get it done in 15 minutes, here we'll actually be building it in real life as you maybe normally would if you're gonna do it on your own. So I hope that after this workshop, plus if you had watched the recording, you should be able to at home kind of replicate these steps and build your own custom block. If we have time, I'm also gonna take the example and extend it a little bit further. We're gonna add some, I'll talk about them in a bit, but block attributes, which was not covered in the WordCamp US talk. So at the end of it, the goal is that everybody should feel relatively comfortable enough to try building your own custom block at home if you haven't already. So it's great to see all sorts of folks in the chat. Feel free to use the chat for questions. I'm gonna stop kind of at designated increments to check on the chat, check on the questions, and then I'll answer those as we go. So before we begin, just making sure everyone's in the right spot, we are building a custom block in one hour. There are some links in the description of this meetup that might be helpful. For example, the create block tool, I'll go completely through the create block tool, some links there to the documentation on that. So let's sort of get started. So what we're seeing here is actually, my presentation from WordCamp US, which we'll walk through. And it was a surprise at the event, but it's not a surprise here. The whole thing is actually built in blocks. The whole presentation is built in the block editor. We're doing a presentation, we're doing a workshop on blocks, might as well do the presentation in blocks as well. So that's why you might be wondering why I'm referring to these slides. I just took it over from my presentation at WordCamp US and we're just diving right in. So again, my name is Nick Diego. I'm a developer advocate, WP Engine. And I wanna kind of set the stage about why both the talk at WordCamp US happened and why I wanna do this on my workshop. So let me stop here and say, how many people, put it in the chat, yes or no, how many people have built a custom block before in WordPress? Very curious at the answer. Okay, I've got a couple of yeses, a couple of noes. Noes are creeping up on the yeses, tried and failed. Okay, great. So we kind of have a good mixture of folks. So those that have built a block before this might be a bit redundant or a bit simplistic, but hopefully this shows you a way to scaffold blocks very quickly. But the long and short of it was is that block development is really becoming the foundation for WordPress. Now, of course there's page builders and the classic editor and all that kind of stuff. But if you wanna build with the new stuff, especially this coming out in 6.1, it's primarily block based. You can have your own opinion if that's good or bad, but that's kind of the direction things are going. And traditionally blocks were pretty challenging to build. I remember about a year and a half ago, I tried to build my very first block. There was very little documentation. You had to do all the steps yourself and it was hard. But today block development has gotten easier and easier, especially if you're trying to build simple blocks, like very simplistic functionality. Of course blocks can be as complicated as you might want them to be. But to build like simple blocks that a client might need or something just to add a little bit of extra functionality in WordPress should not be challenging. When I really believe that if you're somebody that was already maybe writing short codes or writing widgets or coding classic themes and you already are doing that level of development traditionally in WordPress, you should also be able to build custom blocks as well. And I really feel strongly that creating the tools to empower folks to build custom blocks and build with these new modern techniques is really important, especially for each individual's, it's a valuable asset to their tool set, but it also encourages on-boards folks into some of the new ways to build with WordPress. So that's kind of why I did the talk in why we're having this conversation today. So if I'm gonna do a talk or if I'm gonna do a workshop, you need to have an example, right? And so I put this out on Twitter and I got a lot of great suggestions that were never be possible to do in such a short period of time. But one of them stood out to me and it was basically a block that would randomly generate a motivational phrase. And this really got me thinking about the Hello Dolly block or sorry, I'm not block, Hello Dolly plugin that was included with WordPress. So the Hello Dolly block perhaps shouldn't have been included with every version, with every WordPress installed, but the idea behind it was that it's a single file and it generates a random lyric from the song Hello Dolly by Louis Armstrong. And it was to show you how easy it was to extend WordPress. A single file with a couple of functions could add this niche functionality to WordPress. And if you were a plugin or aspiring plugin developer it showed you, oh, this is not too harsh. The single file does something kind of interesting, it's not too hard to extend WordPress. And so I was like, well, what if we use that same concept of using the Hello Dolly plugin to show that building some custom functionality in block form isn't maybe as hard as it used to be. So in my presentation, what we'll do today is we're gonna build a Hello Dolly block, we're gonna blockify Hello Dolly. Let's see, can you make your browser take up full desktop so it's larger? Absolutely, there we go, there we go. That better? Okay, cool. Okay, so now, so we're gonna blockify Hello Dolly. So in terms of building, as I was, I don't come from a technical background, I kind of learned all this stuff myself. I always kind of like to know what demos are using so I can replicate that on the end. So we are gonna be using the create block package, I'm gonna talk all about that soon. I'm gonna be using, you need a code editor so I'm gonna be using VS Code and for a local WordPress development environment which you also need, I'm gonna be using local. But when it comes to code editor or a local WordPress development environment, you can use it whatever you want, but those two are the ones that I was most familiar with and that's what I tend to gravitate towards. And we're also gonna be using the original Hello Dolly plugin by Matt Mullenweg and we're actually gonna be using basically the whole thing, all the functions in it and then using that functionality in our block. So yeah, and VS Code and local level three, so feel free to check them out. Full disclosure, local is owned by WP Engine. So, but it is a free resource as well and VS Code is owned by Microsoft, so. Okay, so let's start building. We might as well just jump right into it. So the build process for this little example is broken into basically 10 steps and we'll add an 11th if we still have some time at the end, but the create block package is an NPM package and you will need, in order to replicate these steps, you will need Node and NPM on your machine. You can download Node, so here, I might as well just do this right now. What's the command for new tab? Sorry, I have to jump out of full screen mode. So if we go to Node here, so if you don't have Node on your machine, you can just go to Node.org and you can just download the current version onto your machine. Node will include NPM, so you just download Node, include NPM and you should be good to go. One other thing is I want to mention Node and, okay, yeah, that's all we need there. So yeah, so if you don't have Node on your machine, you can install it here. I won't be going through the whole steps of installing that, but it's fairly straightforward. There's also some resources, I believe, on the in the block editor handbook on how to get started with development that also kind of walks you through installing Node, but it's very straightforward. It's actually the easiest part of this whole thing. So, sorry, just full screen, non-full screens messing me up here. So, okay, so once you're assuming you have Node installed on your machine, it really is a single line of code to scaffold a block with the create block package. Okay, so what we can say full screen and if we need to hop out, we can. I think we should be good now. So the create block package, basically one of the biggest challenges of building a block in WordPress is that a block is written primarily in JavaScript or includes a lot of JavaScript. And then specifically it's written in React, a JavaScript framework called React. Now, in order for that code to be usable, it needs to go through a build process where you write the code in like a legible fashion and then there's a process that takes that code and compiles it into an illegible fashion but then used on the front or on in WordPress. Again, I'm not an engineer, so that's my very non-technical explanation of build processes. But creating build processes and doing all that pretty technical stuff is hard. At least for me, it was very challenging. And so the great thing about this create block package is that it does it all for you. And we'll see that as we walk through this. So you install node, make sure you have node in your machine. You would navigate to the plugins folder. You open up your terminal. And again, for those who haven't used terminal, I was one of them, it's a little daunting to use terminal for the first time. You'd navigate to the plugins folder of your local WordPress development environment. And once you're in that folder, the plugins folder, all you do is you'd run MPX and then we have WordPress slash create block. And then I'll talk about what variant and dynamic mean in a second. And then we have hello Dolly block, which is the slug for my block. So let's stop talking about this in the abstract and let's just actually go and do it. And you can kind of see how this is going to work. So I'm going to hop over to VS code. This is VS code. And let's zoom in a little bit. Okay. And one of the things that I've already done is I already have my hello Dolly block that I've already created. I'm just going to delete this and we'll start from scratch. So what I'm going to do in VS code is I've navigated to the folder and now you'll see a bunch of other blocks here. These are just a bunch of other folders here. These are just the other plugins in this local WordPress development environment. And you can see that I already have the hello Dolly plugin installed and I have Gutenberg and a couple others. What I'm going to do is I'm just going to open up the terminal, new terminal. And you can see that I'm on my local machine and I'm in that plugins folder. Let's see here. I got permission denied. Where did you get permission denied, Lydia? Well, she's answering that in my plugins folder. Interesting. Oh, okay. That's interesting. Well, let me copy it here. Sometimes you might need to do, I think it's what, sudo? And then you run it. And then if you do that and then you hit enter, it's going to ask for your username and password for your machine, your computer. And if you plug in your password, it should run. I'm not entirely sure why the permission, it's permissions are locked down the folder on your local WordPress development environment. But if you run sudo, that should work. So this is the line, I'll post it in the chat. So what is this doing? I'm going to remove this sudo because I don't need to use that online. So what is this doing? It's basically reaching out and it's going to install or use the create block package. And it's going to create a plugin with the slog hello Dolly block. But we have a flag here for variant dynamic. So let me explain what that means real quick. So there are two types of blocks in WordPress. There are static blocks and dynamic blocks. So I'm going to hop back over here. I think if I do, oops, that's creating a new tab. All right, I'm just, sorry, Catherine, I'm just going to make this bigger because I can't navigate in full screen mode. Okay, so there are two types of blocks in WordPress. There's static and dynamic. I just have a sample page here. And I think it's really important to talk about the difference between static and dynamic because the create block package can create automatically for you either a static or dynamic block. And that's going to matter as you move forward. So if I was to type a paragraph and just say hello there and then let's use the social icons block and we'll just add the WordPress icon and we'll give it a dummy link. So we have two blocks here, right? So one of them is static and one of them is dynamic. The paragraph block is static. What that means is that if we look at our code editor here all the markup, all the HTML markup for that block is actually in the block editor saved to the database and rendered on the front end. It's static in the sense that what is saved here in the block editor is what you see on the front end. A dynamic block is actually the front end content is rendered in PHP, rendered server side. So if you see here, we have the social links block. We have the UL for the link for the list of individual social icons. But in the middle here you see that we have a social link block and it has some a URL and a service which we call attributes and we'll talk about those in a minute. So these are block attributes assigned to the social link block but we're not actually seeing any HTML markup. And the reason is because WordPress and the block editor using this definition will render our little WordPress icon. We update this and go to the front end. On the front end, excuse the theme here but on the front end we have our little WordPress icon but that markup is handled in PHP. It's not actually saved in the block editor in the markup for the actual post that's saved to the database. So that's the difference between a static and a dynamic. Dynamic or rendered, the front end is rendered in PHP and all you see inside of the editor is this definition but you don't actually see the markup of the block itself. Whereas static are what's saved in the editor is what's printed on the front end. Now, static blocks are traditionally harder in many ways to build because they require, this is a very subjective state but I find that they're harder to build because generally requires more JavaScript to build and you have to pass what's called block validation. So if you've been using the block editor for awhile you may have come across times when a block will show up and it says block validation error and it gives you a little button to restore a block. You can very easily run into validation errors inside of the editor when it comes to static blocks. That's because WordPress needs to know how that static block needs to be saved to the database. Static blocks are really powerful and great to build but they're just a bit harder to build. Whereas a dynamic block because everything is rendered on the front end in PHP you can then change how that block behaves kind of on the fly. So today we are gonna be building a dynamic block for really two reasons. One, I find them a bit easier. If you're new to block development I find them a bit easier to build. And two, HelloDolly the plugin that we're trying to blockify is entirely built in PHP. And so we might as well just use dynamic because the front end is rendered in PHP so we can just use the functions that come with HelloDolly. So the question is where is the URL for each dynamic block the social icon stored in the database? Okay, so that's a great question. So if you see here there is the URL for the social link. So the attribute would in this case the link and also the service that is stored in the database. So this whole piece is stored in the database. What this does is then on the front end, the front end or sorry, a service in PHP you receive those attributes and then say, okay, here's my URL, here's my service WordPress now render that markup using, you know with your SVG icon and all the front end markup that's all done in PHP but you're passing these attributes to the block. We'll see that once we get to attributes when we do our example in a minute. Okay, so that's just a quick, very brief primer on static versus dynamic but we're gonna be building dynamic today. And the reason I wanted to call that out is because the create block package if you just simply pass this flag variant in dynamic it will scaffold the block in such a way that it is dynamic. Now, if you're interested, there is, you know the full documentation which I'll provide I'll just provide a link right now. The full documentation for the create block package has all the different ways that you can configure blocks. You can do it in a very basic way like we're doing here or you can get really complicated and, you know create templates and just all this really cool stuff but a bit beyond the scope of this presentation. Okay, so let's go back and what we're gonna do here is I'm going to hit return. Now, what this is doing is it's scaffolding the whole block. I skipped this step at work camp US because it takes a bit to install. And as you can see here, when I hit that return it created the folder over here. So it created my hello Dolly block folder and it started to create some of the files but it's still working and it's starting to pull in all the necessary files that it needs in order to scaffold the block. So this will take a minute to run and while it's running and it tells you takes a couple of minutes and while it's running we're gonna hop on over back to our steps and hop over to step two. So, okay, quick question. Are variant related to block variations? Nope. So variant that defines do you want a static block or do you want a dynamic block? And in our case, we want a dynamic block. And I believe that the documentation here, yep, so variant choose a block variant defined by the template. So that's static or dynamic. You may be actually able to extend this with templates. I have not explored that. The variant functionality is actually relatively new. New version of the create block package was just released I think a few weeks ago but this is always being developed and being made more and more powerful. So always new stuff to check out there. But we were pretty simple like we didn't define categories and all sorts of stuff like that just kept it very simple just the variant dynamic and then the name of the block itself. So while we're waiting for that to finish let's just take a look at the Hello Dolly plugin the original Hello Dolly plugin and just look at how it's built. So here we are and this is our Hello Dolly plugin. It's a single file. I'm going to zoom in a little bit more. So the Hello Dolly plugin it basically has a singular function that has every lyric to the song Hello Dolly. Then it basically takes a random, picks a random lyric. Then there's another function called Hello Dolly that takes that random lyric and then just wraps it in some markup. And if you never explored the Hello Dolly plugin before you can take a peek here. So when we have the Hello Dolly plugin installed you can see it right here. It renders a lyric and I can refresh the page and you can see that it keeps updating the lyric every time I refresh the page. So it's generating a random lyric, very simple in many ways, very pointless but it shows some interesting functionality. So we really have two functions we care about. We have the one function that basically takes the lyric and wraps it in some markup and then we have our other function that just takes all the lyrics and picks a random one. All right, quick question here. If I use the create block packages to create two separate plugins does it put the WordPress scripts in common or do I install them twice? So it installs them twice. So each folder and you can see here in our Hello Dolly block folder we have a folder called node modules. This is all the components and everything that it needs to scaffold the block it will install them twice. Now, if we were to deploy this plugin to the public you would never include the node modules. We'll talk about build processes in a second but when you're doing development you need all of this stuff in the Hello Dolly block folder but if you were gonna deploy it you would remove all of that for you to play it. We'll talk about that in a second. All right, so we've taken a look at the original Hello Dolly plugin we have our two functions and let's go to step three. So now we're gonna do is we're gonna copy those functions over into our block. So here are two functions. Here's our Hello Dolly block and you can see that it completed. We now have all of our stuff in the Hello Dolly in the Hello Dolly block folder. And come over here and we'll just do a quick copy paste. This is less exciting more just and I'm gonna drop this at the bottom of the file. Now, before we continue let's just take a look at this file. So this Hello Dolly block file is the main file for the plugin. It has at the top it has the plugin name all the information about the plugin and then it has some functions. The first one is and this is all created for you. So in many ways and often you don't even need to touch these functions. So it has one function that's basically registering our block type. You can see register block type and the first variable is it's referencing this build folder and we'll talk a little bit more about that in a second and then next it has a render callback. I told you that with dynamic blocks the front end content, all the content from the block is rendered in PHP. So that's what this render callback is doing. The render callback function we can see below and this render callback is basically referencing again another file in that build folder called template. So let's take a look at the folder structure real quick. Node modules you never need to touch that's all just added when you run create block. It's all the packages that are required for the build processes and whatnot. But our two files we care about is SRC which stands for which means source and then our build folder. So the build folder all the files that are actually used for our plugin the source is where we actually make all of our edits. So you'll notice here that there's this template file. This template file is what actually appears on the front end. So this is where we're gonna end up putting all of our front end content but what I'm gonna do now is I'm going to we're gonna open up a terminal we're gonna navigate using CD. So now we are navigating to the folder of our new block, Caledon block and I'm gonna run npm start. And what this does is it takes all the files that are inside of our source folder and it processes them and updates our build folder with all those files. So you never actually touch what is in your build folder you edit everything inside of the source folder and then you run npm start and watch this. So if I make a change here and I say this is a test and I save this, just watch the terminal it's gonna update and what that does it's gonna update the template file in my build and you can see it here, this is a test. So any change you make inside of the sources will get processed and put inside of your build folder. Now PHP doesn't need a lot of processing it's just really copy and pasted but when it comes to our JavaScript files like edit and index, we can see that here and we'll talk about the edit file in a second but this is kind of readable, readable code but if we go over to our index file you can see it looks a lot more messy, right? There's a lot more stuff in here but imports and all sorts of stuff which you'd never code by hand but because we're doing this here we have our nice source file or we can actually see what's going on and then the build processes process all of that and put it into our build folder. This is one of the hardest things to do when you're first starting out is figuring out all these build processes but all we did is we ran that one line the create block package created all of this for us and all we ran was MPM start and you can use control C to stop the MPM start and when you were ready to deploy this or finished with it, you just run MPM build. Now, remembering all these commands is challenging especially when you're first getting started the create block package has in the documentation I forget where, yeah, it tells you all the different ways so all the available commands it tells you what MPM start does, what build does, format, all this stuff. So always refer to the documentation has all the information that all the different commands that you can run when you're building out a block. So what I'm gonna do now is we copied over our files to the main plugin file I'm just gonna hide this terminal real quick. I ain't gonna run MPM run start in the background because any changes we make we wanna make sure that those are built appropriately. So in our original file, we just copied over the files from the HelloDolly plugin but we need to update the, we need to prefix them appropriately or else we'll get a PHP error. So I'm just gonna do HelloDolly block to make it unique to this plugin. We need to update that file here and I'm just gonna rename this to render lyric. Let's stop right here and just take a look at our block because our block is fully built in many ways we built a custom block doesn't do much yet but we have built a custom block. So I'm gonna come back over here to my plugins page I'm gonna give it a refresh and make sure that we have our HelloDolly block. It is activated. We go over to posts, go to HelloDolly and remove those blocks we created earlier. Now if I search for HelloDolly I can see that I have my HelloDolly block. And here it says hello from the editor. If we update this, let me just change this template to blank. And now you can see this is a test, right? Well, I just added this as a test, remember? So when I was over here in that template file I added this as a test. So again, this template file because we're doing a dynamic block where all the front end content is rendered in PHP which is from this template file. Anything we change here, this is a new test and if we save this now back over and we refresh this now you can see that this is a new test. So because this is rendered in PHP I find it very flexible especially if you're coming from a PHP background where this is all this PHP we're just writing whatever we want here and it's rendering on the front end exactly the way we wanted to. So what we're gonna do now is we're actually going to finish off this front end template with our HelloDolly block content. So come back over to our steps. So what do we need to do? We've already prefixed all of our functions but instead of we want them to function a little bit differently with inside of our block. So this is just kind of procedurally updating the original content. So the original HelloDolly block prints out the lyric into the admin instead of printing it we just want it to return a string. So we do return S print F and then instead of a paragraph we don't need the paragraph. We just want to return a span. Now what we're gonna do is we're gonna take this lyric function we just go on to step five and we are going to update the template file with our random lyric function. So if you go like this echo out our lyric function and we save this. Again, I have MPM run start in the background so every time I say this is updating the front end file and then I go over here and I refresh now we have a random lyric from HelloDolly that keeps updating every time I refresh the page. So we basically done the front end stuff we've handled how the functionality of HelloDolly and all we did was we just copied over the files from the original HelloDolly plugin we dropped them in and then reconfigured them slightly and put them into our template file. So you can imagine we haven't even touched the editor yet we'll do that in a second but we've handled all the front end work that we need to do. Now you could get crazy you could design anything you wanted here in the PHP file and had that rendered on the front end and that's why I find so appealing about dynamic blocks especially if you're coming from like a PHP background because you can apply those same skills that you have from PHP directly into this template file and really get really creative and render whatever you want and you're not even dealing with JavaScript yet which I find traditionally more challenging. Can I do with images instead of like you because it's PHP you can do whatever you like so if you had a random image generator or whatever is it you can to your heart's content you can do whatever you like within this template file and then we'll get rendered on the front end. Now let's take a quick look at the editor so the editor has some different text here but in many ways this is no maybe not advised from a user experience perspective but you could just have a simple little block that basically says something like this block is gonna render a random image generator you could create that not even worry about the editor okay not a great user experience but then on the front end handle all that complex image generation or random image generation or whatever you wanted you wouldn't even really need to worry about the editor if you so chose again it would be nice for a user perspective to see those random images in the editor or that UI in the editor but you don't necessarily have to you could kind of treat a custom block like a short code like short codes of old again not something that's the greatest user experience from a functionality perspective you're really just trying to get something out there in a block interface stuff something you definitely can do and that's why I think that dynamic blocks are really interesting and powerful especially for those that are coming from maybe a strong WordPress background and building things in PHP you can kind of translate those skills to dynamic blocks okay but we haven't talked about the editor yet okay a good question here did you say that earlier that dynamic blocks are less prone or less fragile than static blocks so again a little bit of a controversial statement but I believe that's true because because the front end is written in PHP we can change whatever we want in the PHP and that automatically gets generated on the front end now the static block all that content is saved within the database so in order for you to change how a block looks and feels you know add functionality to a static block the user has to then go into the editor and update that block which then gets saved in the database and then put on the front end dynamic blocks provide you a lot of flexibility to make changes after the fact so if you were building a site for a client and maybe they needed to change in the future to one of their blocks sometimes I find that dynamic blocks are really useful in that case because as a developer you have the control to make the change and that change will immediately go live and you don't need to worry about someone having to go into the editor updating the block saving again and then it gets rendered in the front end because everything is in PHP it gives you a lot of control so something to think about there are pros and cons to both but I do think that dynamic blocks are very appealing when things need to be changed in the future or you can anticipate changes that need to be made in the future okay so let's continue on here to the and start looking at the editor because we're not going to do much in the editor it's going to be fairly straightforward but we do need to talk about the editor and how we so the editor is managed by this edit file before we talk about the edit file we should look at the index.js file so this is kind of the the main file around our block and let's just look at the kind of the anatomy of this file for a second we have you're importing the register block type function we are importing some style sheets we're importing this edit function this edit function is coming from our edit file we're importing metadata which is coming from block.json which I'll talk about in depth in a second and we have this register block type so the register block type is pulling in our metadata name again I'll talk about that in a second and then it's defining our edit function so you never have to touch this file if you are just want to get to building you never have to touch this file because the create block package scaffolded it for you I have many plugins that I've built where I just let create block do its thing and never touch this file so I didn't want to show it to you but we're not going to touch it at all first thing we need to talk about is block.json this is basically all the details about your block and you can start to see them here so we have the name of our block and this was created by the create block package we have the version number we have the title we have category the icon description this is all basically the metadata behind our block and we also have some things called supports which we'll talk about in a second and you can see that we're defining for example the text domain the editor script and these all relate to the files that we see in inside of the source folder and so this is basically the heart of our block all the definitions are in our block.json we won't change this we'll change this in a second but not quite yet but let's head on over to our edit function now our edit function I think I alluded to it a second ago sometimes you don't want to necessarily add all that functionality to the editor this may be on the front end and this is going to be a great example of this instead of basically creating a random lyric that shows up inside of the editor we don't really need to do that that's only something on the front end so what we're going to do is we're just going to provide some dummy text that gives the user an understanding of what this block will look like so we're just going to do well hello dolly and we'll save this again I have npm run start in the background so every time I save it's going to be building my plugin for me and if we come back over here to the editor and we refresh now you can see it just says well hello dolly this is basically some filler text just for the user as they're inserting the hello dolly block they have some context okay here's my lyric but we're not doing the whole dynamic generation inside of the editor because it's going to be random whenever somebody sees it so we're just going to pick a dummy to make things dummy some dummy text to make it a little simpler for us so let's go on to the next step here now you'll notice some styling right oops we have this blue styles and then on the front end we have again blue these styles are actually coming from the editor CSS and the style CSS these are two style sheets editor CSS is specific CSS that only is applied in the editor so sometimes you'll need specific if you have a dedicated user interface or something specific in the editor where you need some custom styles the style.css file is applied to both the editor and the front end so if you have styles that need to be applied to the block both in the editor and the front end you would have add those to the style.css file and then if you just needed it for the editor you would apply it to the editor.css and then create block package adds these handy yeah informational titles on each so you can remind yourself we actually don't want any styling so I'm just going to remove both of these we don't want any of this blue styling at all alright I'm just taking a quick look at the questions here where is the URL for each dynamic block stored in the database? Dynamics can be attributes or stored in the post itself in attribute okay so the for like the social icons stored in the database like the links and stuff I'll need to follow up on that about the where is the URL for each dynamic block I'm not a hundred percent sure on that question I will Rob you can reach out to me after and we can dive into that but I'm just going to move on right now and next I want to show you supports because I think that this is one of the biggest level up moments for me because if I had a block like this let me refresh now again we don't have any styling we don't have any functionality it's just this basic block and I wanted to like add typography control or add color control in the past you would have to code all that yourself you would have to create you know pulling components to build a color picker and do all those manual work yourself well one of the great things about WordPress and I encourage everybody's building blocks to leverage the functionality that's included with WordPress you can define dedicated supports to your block to your third party block and that's what we're going to do here and I'll show you how that works so what we're going to do is we're looking at our block.json file over here we saw this section for supports and there's one support that's automatically added it basically disables HTML so the user can't edit the HTML usually for a lot of custom blocks you want to have that set to false but we're just going to drop in these supports and these supports basically give us alignment they give us color and they give us border now there's a long discussion about these experimental tags hopefully soon they'll go away but for right now we have to include the experimental in front of border but let me just quickly save this and we'll come back over here and see what this does so now when I click on hello dolly automatically I have color border I also have alignment so we could change the text here set the background and this is all handled for us by WordPress we don't have to code any of this all we did was just drop in these supports so if you need some basic things like color and typography and whatnot you can do it all with support so let's finish off our supports and we'll add typography and spacing here save let's actually save first refresh so we got border we got here we let's do some typography why don't we change it to about sanser and we can also change the font size now I am using Gutenberg in which is has like a lot of the latest features of WordPress so a lot of the stuff like a lot of the UI here will be included in 6.1 but here we go now when I update this remember this is what the front end of our thing of our of our site looks like I'm on a blank page so I've removed all the other you know headers and footers and whatnot just so we can really focus on the content when I update this and I refresh now you'll see that we have the styling now there is a I think it's in my theme I have a thing that's disabling background padding so let's just add some padding looks like this there we go so we didn't touch I just want to hammer home this point we did not touch our template file at all we just have our lyric we added these supports and what this does is it WordPress adds all the necessary classes and inline styles to support these supports and then over here you have get block wrapper attributes this is a function provided by WordPress that basically takes all the classes and everything that's needed to render these styles and does it all for you so it's very easy just to if you're building something simple relatively simple you can register all these supports make sure you're just using the get block wrapper attributes function which again this is already provided to us by the create block package and you're good to go now you have all your supports and you can change anything that you want yes so Catherine's asking just to be clear if you add another instance of the block anywhere else instead you have to reset the styles yeah we can do that right now so let's add another hello dolly block and again these styles are not set now I wanted in this demo I wanted to be able to control everything from the user controls if you wanted to specifically define styles that you didn't want people to change then you would use these stylesheets so let me refresh here so let's pretend that for example like if you were building something for a client and maybe they had brand styles or something really specific that could not be controlled within the editor there wasn't a control for that you could just hard code this so if we wanted to do how about I don't know border color I don't know green let's do this this is going to look horrible but we get the point so now if I set this as border color and I refresh now we have a green border so this is not something that again a user applied so if you want styling that is always on you can hard code that in the block styles and if we refresh on the front end we'll get the same thing we have the color so that's what those stylesheets are for but in this example I basically set it so a user could control everything one of the cool things about user control so there is border control inside of WordPress so if I do border radius here I can override the color so you could also set some default styling within the block itself and then allow a user to kind of override that on the front end but again completely up to you you could remove the support just have your styles inside of the style sheets and I you know there is you know as mentioned in the comments here you can also create a block variation for the block style so you could create a dedicated that's beyond the scope of this talk but you could create a dedicated block variation where it was a hello dolly block that had some of these attributes already applied actually I'm glad that was brought up because if we take a look here at our code let's just see what's going on here we have this is this is the basic hello dolly block of nothing and you can see it's just the definition for the hello dolly block we don't see any markup anything the one above of course has padding color and typography and those are all stored as attributes these are all block attributes that are stored by WordPress these attributes are then passed to the front end and they are passed through this function automatically and then that's what's generating all of the classes and stuff on the front end but if you wanted to you could pull down the attributes and again a little bit beyond the scope of this but you could pull down the attributes and do all sorts of interesting things with attributes within your templates I don't want to stray too far into that because we could be here for three more hours talking about that but yeah all the attributes all the styles that are applied in the editor are attached to the block and then stored in the database which is then passed to the front end and then you can render them I would also like a permanent ID for the block I have used I work around for creating a text attribute yeah I mean yes there are ways that you could it would be custom but you would there are ways that you could add dynamically a custom ID but that's not something that's included with WordPress directly itself all right so we've added our supports now let's do some little final finishing touches so we're going to head on over to the block.json file and what I'm going to do here is I'm just going to update the icon so this icon if you just there's a you can provide a slug here and this will pull from the dash icon's icon library it's pretty limited but you could also pass an SVG so if you had your own SVG icon you could place that there and we're just going to update the description a little bit update the description again every time I save it's rebuilding our block it's refreshed now and we can see here now that we have now that we have a little audio icon and the description here is been updated so the block.json icon and description are mapped over to the icon on the block and then also the description when you add the block all right this is looking pretty good and then this is just a slide with the active plugin running and here are a couple resources so I don't think we're going to get to talking too much about customizing our block with attributes I haven't added any custom attributes to this example but what I have is first of all this presentation is available on my own site because it is completely built with blocks I'll just put this here so people can reference that and this is a more advanced version of what I built today so this github repository so the difference between this block and what we built today is I added a block attribute which we're not unfortunately not going to get you today but if we come over to our source file and we look at our block.json we have an attribute called text align and what this does is I basically copied the functionality in WordPress so if we have a paragraph the text align option that allows you to text you know align text for example in a paragraph that's actually stored as an attribute so you can see this here if we go to code editor paragraph align right we change this to align center you'll see that this updates align center so I basically in this example I basically added the attribute itself as well now in order to work with custom attributes you actually have to add the user interface inside of the editor which requires us to use a bit more javascript and so if we come back over here to the source file we look at the edit function you can see that I have this block of code which is not present if I go to my editor here so my editor here is very simple which is this but in this example I have block controls alignment and block controls so I'm not going to go too far into this now but what this is basically doing is it's creating the UI so that I have this little button right here that allows me to change the alignment now the beauty of this is the fact that in my example in my github example I'm not actually coding everything here I'm not defining the text I'm not creating the buttons I'm not doing a whole lot what I'm doing is I'm pulling in a component called block controls then I'm pulling in another component called alignment control and then I'm just setting my attribute you can zoom in a little bit here so what I want to touch on with this is that a lot of times when you have to build more complicated things it doesn't mean you have to code everything yourself you just need to make use of components that are already provided by WordPress so block controls and alignment control are components that are used within the block editor and you can use in your own third party plugins so what I'm doing up here is I have some details about this so you can check this out if you want to I'm just pulling in the alignment control and block control components from WordPress block editor and I'm just sticking them into my third party plugin and it gives me all the controls and the beauty of this is that if WordPress in the future decides to update the alignment control functionality or update the block control functionality maybe change the design a little bit it will automatically be updated inside of my third party plugin which is really great because instead of having to code everything yourself and whenever WordPress updates you got to make changes you're already getting those automatically so um going back to our resources page again we have of course have the create block package there are some great how-to guides these are all linked on the presentation on my site but the one I really want to stress is the Gutenberg repository so the Gutenberg repository GitHub repository and the link in there goes directly to the block library inside of the block library in the Gutenberg package in the Gutenberg repository are all the core blocks that are included with WordPress and when I was trying to add this attribute for alignment I didn't come up with this myself I just saw that the paragraph had that functionality I went over to the paragraph block I went into the edit function and I said oh how are they doing alignment control and you can actually see it right here we have that block control and alignment control and if you check out my repository for the the advanced enhanced hella dolly block I literally just copy and pasted it I understood how it was used in the paragraph block took that functionality put it into my third party block copy and pasting is beauty I mean you need to understand how it's working and how it's being applied but I really encourage you as you're building custom blocks as you're beginning to explore this go look at how it's being done in core it may be overwhelming at first but if you isolate different pieces of it and start to learn how some of this stuff is built you can really just take a lot of it and put it right into your plug and there's a benefit to that because not only does it make it easier for you but from a user when this alignment control is added it's going to look just like the alignment control on paragraphs so users already learned how to change the alignment on paragraphs they come over to my third party plugin and it's going to have the same alignment controls creates a consistent user experience and it also makes your life easier as a builder now this is only an hour and there's a ton of other great resources on using the create block package much more detail and I wanted to call it some of them another one which Ryan Welcher another developer advocate does is called hello blocks coding a custom block this link here which actually let me just copy this link this is that's a 404 sorry question and the thing was saying that this link is a 404 oh shoot it's not public okay thank you thank you for calling that out thank you so much for calling that out look at this real-time fixes all right now it should be public give it a try again and we should be good sorry about that thank you so much for catching that I would completely miss that and continue to talk about it so I did want to so again calling out the hello hello hello blocks this is a great video where Ryan Drip dives much deeper into using the create block package and I assume that there's going to be more content about that in the future so we are literally just at time so hopefully this was a bit more informative than my you know 15-minute crazy speed talk at work camp US but if and I so I really encourage you to go out and try and build blocks if you're struggling building blocks and you want some help or questions just feel free to reach out to me this is the area of building with WordPress that I am most passionate about and I really focus most of my time on so I encourage you all to go build and if you need help just let me know so thank you guys so much for for attending this presentation is recorded and it will be placed on WordPress.tv it may be a day or two before it goes up and we'll and I'm interested you know leave feedback in the comments I traditionally have done more content based on more basic building with WordPress you know how to do columns and whatnot and I still will do that content but if you're interested in seeing more maybe developer oriented content like building custom blocks or you know and that sort of thing let us know let me know let the training team know because we're always trying to tailor our content to our audience and what people are interested in yeah so let us know and we will keep making content that the community wants so thanks so much hi everybody have a great day and I will see you on the next one