 Thank you everybody. Well, welcome to let's build a custom block in 15 minutes. As mentioned, my name is Nick Diego. I'm a developer at WPN Gym. One of the things I do is I contribute a lot to WordPress Core, both Gutenberg and also on the training team. I really couldn't be more excited to be talking to you all today. So this presentation is going to be broken into three parts. We're going to talk about some motivation about why I chose this presentation. We're going to build the custom block, and then finally I'm going to share some resources to help you hopefully build your own custom blocks. So why attempt this crazy challenge, right? Well, blocks are fundamental to modern WordPress design and development, especially with the introduction of full-site editing earlier this year. Blocks are really everywhere. Now historically, building custom blocks was pretty challenging. I remember a year or two ago, blocks require JavaScript and some amount of React, and personally, I find that much harder than maybe traditional PHP, and we just didn't have that many resources. Today, however, it couldn't be easier to start building blocks. We have a lot of great tools, some of which we're going to talk about today. And I fundamentally believe that every WordPress builder can add custom blocks to their own tool set. And hopefully this presentation today kind of encourages you to explore block development if you haven't already. So what are we going to build? Well, I put the question up to Twitter as you do, and got a lot of great suggestions, many of which could not be done in 15 minutes. But one of them was, can you create a block that displays a motivational quote? And it got me thinking, well, it's very similar to Hello Dolly, the original plugin written by Matt Mominway, which displays a random lyric from the song Hello Dolly written by Louis Armstrong. And to me, Hello Dolly, when I first started getting into WordPress, it showed just how easy it was to extend WordPress with a single file plugin. So I thought, what if we took that concept in blockified Hello Dolly to show just how easy it is to build a custom block? So that's what we're gonna do today. We're gonna build Hello Dolly block. So to do that, we're gonna use some tools. The biggest tool here is Create Block. And this is a package maintained by WordPress core contributors, and it allows you to scaffold a block, really do all the hard things for you, and get you really started building as opposed to all the setup. We also need a code editor, and we need a local WordPress development environment. I'm gonna be using VS Code today, and I'm gonna be using local for my local development environment. And of course, we need the original Hello Dolly plugin, because we're gonna strip, use all the functions that are in it to render our random lyric. So, excuse me, so let's start building. So the build process is gonna be broken up into 10 steps. The first step is we're gonna use that Create Block MPM package to scaffold our block, but we're not gonna build just any block today. We're gonna build a dynamic block. A dynamic block is one where the front end is rendered in PHP. In many ways, I think dynamic blocks are actually a little bit easier to build, and because Hello Dolly, the original plugin's completely built in PHP, it makes a lot of sense to build a dynamic block. And the cool thing about the Create Block package is it allows you to scaffold specifically a dynamic block. Of course, you will need Node and MPM. So if you were trying to follow these steps after, you will need Node and MPM on your machine. However, the process is very simple. It's just a single line, which we can see here. And so what we're gonna do is we're gonna copy this, and we're gonna head on over to VS Code, and we're just gonna start building. Now we're in a conference center, and the Wi-Fi is terrible. So normally what I would do is I would just come in here, I'm in the plugins directory of my theme, my local WordPress development environment, and I would paste this in, and of course I did not paste the right thing, but I would paste in that line from before, and I would run it. Now it takes about a minute or two to run normally. In here, I did it earlier, it takes about three or four. So we're gonna just kind of skip that, and we're gonna jump right forward. So imagine me running it. It would run, and it would scaffold our entire block, and you'd get all this nice thing, and it'd say code is poetry, and my block would be scaffolded. We're gonna pretend that it's running in the background, and we're gonna go on to step two, and then we'll come back and take a look at the block that was scaffolded using the Create Block package. So step number two is we need to go look at the original Hellow Dolly plugin. How was it built? Those are gonna be using some of those functions. So let's come over here back into VS Code, and I have Hellow Dolly already pulled up. Hellow Dolly is a single PHP file. Take a look at that. And now it's really two functions. The first one is Hellow Dolly Get Lyric. It has all the lyrics of Hellow Dolly, and it randomly picks one. And then we have another function, Hellow, just Hellow Dolly, which takes that random lyric, puts some markup around it, and prints it to the page. Now if you have never used Hellow Dolly, if you take a look at our local WordPress development environment, up in this top little corner here, you can see we have a lyric that says, well, Hellow Dolly. That's all the plugin does. But we wanna take this concept, put it into a block that someone can put on a page, and then render the lyric on the front end of their site. Now if my Create Block tool was running in the background, it would have scaffolded this block that we see here. Hellow Dolly block would have done all that for me. So we're just gonna activate it, again pretending that we actually ran the package. So when I do, I'm gonna get a folder that looks like this. And there's a bunch of folders and files in here, and we'll walk through each one. But before we do, let's go back to step three. So step three says, let's take those functions that we looked at in the original Hellow Dolly plugin, pull them over into our new block plugin. So we need those two functions. We need to paste them, and we need to prefix them, because we don't want to have any plugin conflicts. So I'm gonna go back to Hellow Dolly. I'm going to copy both functions. Now in my block plugin, I have my main plugin file, Hellow Dolly block, and I'm just gonna paste these functions at the bottom. Now to prefix them, I'm gonna start at the top, and instead of Hellow Dolly, we're just gonna do Hellow Dolly block. I'm gonna copy this, replace the reference in the original Hellow Dolly function. Now we've got to rename Hellow Dolly, and we'll call it, instead of just Hellow Dolly, we'll do Hellow Dolly block render Lyric, okay? Now we're pretty much done with that step. Let's go on to step four. Now what we need to do is we need to modify that render function, so it actually works in a block framework. Instead of returning that Lyric, we wanna just, I mean, instead of printing the Lyric, we wanna return the Lyric as a string. So again, these are little minor modifications, fairly technical, don't really pertain to building a custom block, but just to make this presentation actually work, we need to change a few things. And we're gonna get rid of this paragraph, because our block itself is gonna handle the paragraph markup, we just care about the Lyric, so we're gonna get rid of the paragraph, and we're gonna save. Now let's go on to step five. So at this point right now, we haven't done anything with actually like block stuff. We've literally just copied the functions from Hellow Dolly into our block plugin. Now we need to start looking at how the block was scaffolded using the create block package, and the first thing we're gonna look at is the template file. This is a PHP file that renders the block content on the front end of our site. Again, we're using a dynamic block, so we have this PHP file that's rendering our front end content. So we come over here inside of our source folder, we see our template, and right now it's just rendering some dummy content that comes with the create block, you know. This is the dynamic block. So we wanna replace that with our newly created Hellow Dolly block render lyric. So very simple paste. Now you might be wondering what this function is at the top here. This is provided by create block, and it's a function in WordPress that basically creates all the block wrapper attributes like classes, and all the stuff that you need for blocks. We don't need to touch that at all. WordPress will handle everything we need for it. And again, we see here, we have two paragraphs, so this is our lyric inside of the paragraph markup. Now one thing I haven't done yet is I actually haven't actually run our block plugin, and what I mean by that is when you create a block, the code has to be compiled. So we're compiling all of our source files into our build folder. Now before, when you had to set this up all manually, it's very hard to, not hard, but it's complicated to set up build processes and all that sort of thing. But the create block does that for us, and it even tells us what to do. We need to CD into our plugin file folder, which we've just done, and now we just run npm start, and this will compile, and it's gonna work, and it's gonna compile all of our code that we're editing inside of our source folder and put it into our build folder, and these are all the actual code that's gonna be run on your site. And you can see it was successfully compiled. Our template file here is gonna get updated, and our build whenever it runs here. Oh wait, I think I need to do one thing I need to do. I should start. While that's running, let's go on to step six. We haven't touched anything that a user would manage inside of the editor, you know, like in the block editor, what are they gonna do to edit their plugin, or their block. So by default, all this plugin does when it gets scaffolded is, and let's go over to a post and just check out what it looks like. We go into just a dummy post here, we can go in and add our Hello Dolly block. It's just gonna add some dummy content in the editor, and we wanna start editing this. In many ways, I could end the presentation here because we have created a block in under 15 minutes. It doesn't do anything, but that's it. Okay, so now we come back over here, and we want to change this edit function. So we're gonna update this, go into our edit function, replace, save, and you can see that it's compiling our code. Let's go on to step seven. Now, in here you'll notice a couple style sheets, editor and style. We actually don't need any of this because the styles are gonna be handled by our block itself. So we're just gonna delete both of these. Let's go on to step eight. Now, in our block right now, if you'll take a look at it, it doesn't do anything. There's no controls, there's no typography for your anything. Now you might think you might have to create all that yourself, but you actually don't because WordPress provides what's called block supports, and there's a block.json file which defines all sorts of information about the block. So instead of worrying about typography controls or alignment, we can just paste in some supports. So here what I've done is I've pasted in alignment, color, and border. We can go on to step nine, and I can drop in spacing like margin typography. I drop that in, and we're gonna save. So now we have all these supports that we maybe would have wanted in the block, but we don't have to code them ourselves. Relying on WordPress core supports, and we have our typography supports, and we have dimensions. Let's go back over here. We didn't save this, so now we're gonna save. Okay, so let's go on to step 10. Last thing we wanna do, let's just make it look a little prettier. We're gonna change out the icon in our block.json file, change it out from a smiley to an audio. And we'll leave that there. Let's change out the lyric, change out the lyric. Oh, sorry, the description. Save. Let's go on to the next slide. So now we actually need to actually play with our new block. And assuming everything went well, and let's really hope that it did, we should now be able to come over here. And instead of what I wanna show you now is I'm actually gonna edit my presentation directly. So this presentation was actually built entirely in block. So I thought if you're gonna do a block presentation, might as well build the presentation in blocks. So we're gonna come down here to our Hello Dolly slide, and we are going to, let's start with a quote block because we wanna quote our lyric. And inside of that, I'm going to create my Hello Dolly, and you can see I have my little audio file. Let's do some quick typography. We'll do font. Oh, actually we don't care about font family. Let's do, we'll do font size, and we'll do appearance here. So we'll do extra large, and how about medium. And then we'll change our quote over to a fancy quote, and I'm gonna steal some text here. So now you can see that we have our Hello Dolly block inside of our editor. I'm just gonna quickly remove this, and we're gonna update. So now if everything worked, and we're gonna hope it did, now when I'm back in my presentation, and I refresh, there we go. And it's actually not rendering our template. So let's do a little quick change here. Save. Now let's do a refresh. There we go. And now we have a Hello Dolly block. Okay, so this is our live presentation, remember. So now we're gonna go to our final slide, and we're gonna talk about some resources. So because this was built in blocks, it's actually live on my website. So if you go to just go to nickdiego.com, there's a link for the presentation. You can go check it out. And there's links throughout this whole presentation. So the resources slide's gonna be very quick. All these are links. I really recommend checking out the Create Block package. There's also some great how-to guides in the Block Editor handbook. And my favorite is just go to the Gutenberg repository. All the core blocks in WordPress are there, and you can see how they're built, and you can take those tools and take them to your own blocks. And then if Ryan Welcher's in the room, Ryan Welcher's an ever-developer advocate at Automatic, he's done a lot of work on the Create Block package, and he has Hello Blocks coding a custom block. This is an online workshop that he does almost every month. Highly recommend. He does what I did in 50 minutes in a much more greater detail and a much better job for that matter. Okay, so what will you build? I'll leave it there. Hopefully this encourage you to build custom blocks, and thank you guys so much for attending my working build stock.