 This is what Gutenberg is. It's the block-based built building as termed in WordPress. And this is Tom Noll from Human Made who does some absolutely amazing things with Gutenberg blocks. And if I get this right, it takes a second to come with this work. Yeah. He's going to walk you through how to actually build one. Take it away. Hey. Thankfully, I've been in shoes, sir. I'm Tom. You may remember me from such previous films as WordCamp Edinburgh and London and various other things. And if not, hello, nice to meet you. Lovely to be here. So I'm going to talk about building blocks. And I'm going to aim directly at the bottom end of the scale, learning them completely from scratch. I'm not going to go into advanced blocks. You won't be learning how to build the Taj Mahal or the Eiffel Tower. I'm just going to go with the really basics to kind of make sure that the foundations are in there. So building blocks, hopefully it's a very nice title. And I'll talk a tiny little bit about Gutenberg and maybe a little bit of what I see going forward. So as most of you are aware, there are blocks. And for a long time, there's been various different forms of content in WordPress. You have your post content. You have your widgets. You have your short codes. You have your ACF fields and other things. There are various plugins and frameworks and post meta options. And you have boxes in the options page. And you have theme mods. And you have dashboard widgets with various other things. And then you have network sites. And then you can pull things from other sites. And it's really big. I was doing an article and I had a big grid where I had every possible type of content along the left and loads of things like, how do you access it? Can you have more than one of them in that? It was a really big table. And to be honest, I don't remember half it. I don't expect anyone else does. Like, did you know attachments can have comments? You can, yeah. So we have all these hundred and one thousands of different kinds of content. And they all have different interfaces. And some of them have multiple interfaces. And some of them are old. And some of them are new. And some of them have multiple interfaces. But then you probably use the plugin that adds a completely different interface so that you can drag and drop them and all of that. It's a nightmare. And we have this new block editor. And you might think that's yet another interface. Why should I bother with that? I have my short codes and I have my widgets. I know in the past I've decided to abandon it all and just use widgets and sidebars for everything. And no, that's another story. But we have blocks. What makes that difference? And why should I be bothered about it? I mean, some of you probably have some things like, well, it's the newfangled thing. And I can charge a bit more to clients maybe with these fancy new blocks and new editors and interfaces. But I'm not gonna tell you how to make the fancy ones. You'll have to come to my next talk for that. So, blocks are the interface. And when I say that I mean in the future, everything will be a block. Now, it might be that underneath the behind the scenes that block is backed by one of the older things. It might be that there's some plumbing behind the scenes that plugs it into a widget or a short code, or it might be just a block, block. At the end of the day, when you're using WordPress, you're gonna see this interface. And so you kind of need to plan ahead and think of things in that point of view. And so I think it's really important to be able to just build a really, really basic block. And when I say basic, I mean, I'm talking like the hello world kind of thing. So you see people who have short codes, for example, and they add their function, it echoes hello world or returns hello world. And then depending on which option they went, they realized I did a good job or why isn't it working how I expected. So going forward, you need to sort of think about things in those terms, be it the paradigm, but this is kind of like the archetypal block that's a paragraph block. I have a few things about it. So you've got your main content area in the middle here. You have your side mover about the things there. And you have your toolbar there and a quick thing to change it into something else. And really we wanna build something that has maybe not as much complexity as this, because it has a lot of options in a block that you wouldn't need from those things. Like we don't need to make our hello world bold or italic or justifiable. And we don't know what we're going to put in our block because we have a lot of different things we could do. Lots of potential things. So the two main thrusts I'm going to go with today. There's the JavaScript-based block and then there's the more PHP-oriented-based block. So depending on what you prefer, you can get to pick and choose one. I know that personally I feel that the most innovative and the most room to grow is with JavaScript-based blocks, but that doesn't mean that you can't use PHP to build a lot of it and it doesn't mean that you can't mix and match. So let's build a very, very basic hello world. And this is just gonna be one single code snippet on the screen and I'm gonna walk through what each line means. It's gonna be entirely in JavaScript and all it will do is say hello world. So it's the simplest you could get. So to create a block, we register it. That's the register block type. We give it a name, some information and two functions. So you may have encountered it in the past, but very few people are really aware of it. In JavaScript there is a main WP object and hanging off of that is a place for all of the random WordPress stuff that lives in WordPress that's JavaScript related live. So there's a lot of things under there, data stores and things that make it easy to work with the REST API and all of that, but we're not gonna talk about that today. But if you wanna research that, that's just something to note down for the future. But we're looking at blocks. So there's a nice WP.blocks bit and it has a function that lets you register different kinds of blocks and the first parameter is basically sort of like the internal name. So you know if you register a custom post type or taxonomy or it will have like the fancy human name and then it will have sort of like the internal name. So there's like post or lowercase versus post of a capital P or translated into French or German. And I realized I didn't speak any of those languages so I don't have examples. But or if you're doing a post, you were like literally typing in a post you've got like the really nice one that appears as a title. So then you also have like the post slug which appears in the URL. This is kind of similar to that. And you'll notice it's namespace. So I have Tom Gen forward slash hello world because you might wanna make your own hello world block and you wanna be able to compare them side by side and see how rubbish mine is. All guys, I don't know. So that's generally the convention. You'll put a namespace that might be a company name. It might be your name. It might be my name. Please don't use my name. And then the name of your block and then you give it an object which are these little squiggly bits here. And it has some parameters. Basically telling Gutenberg all about this block. So some of them are pretty straightforward like the title. So hello world, pretty straightforward. As I'm going around in the interface that will appear or say hello world in the Inserter where I've got to choose from all the blocks. If I hover over it, it will say hello world and a little snippet on the side and it'll say hello world in the sidebar as well when I'm clicking on the block and it gives me more options. The icon, Universal Access Alt, that is dash icons. So whenever I go to insert that block, it'll have it in the list and it will use the icon that maps onto that name. And there's some really useful websites you can go to which basically have all of them listed out and you can just click on one and it will give you a handful of things at live it will give you the CSS for the SVG or just even just the name. And there's lots of different ways you can use those sidebar menus in the admin. But that's another topic, I'm not getting into that. And the category, you know when you click on the Inserter and it has the little sections that collapse you start with most used and then they have the formatting and the images and the layouts. This is basically just where that goes in. You can add your own but you have to tell it in advance that that category exists but we won't get into that today. As I say, we just wanna focus on the basic block first and then maybe go an extra step or two beyond that. And then there's two functions and this is kind of the meat of things. This is what really makes it work. So there's an edit and a save. And I know some people when they first get into this they muddle them up a little bit and that's why I have them different. So when the block editor looks at your block and it's like, okay, I have two jobs. I need to save it to the database at some point and I need to show it to the user because they wanna know what they're editing. The edit function is the bit that you see in the block editor. So if I launch up my block now and I register and I go into the block editor and I try and add this Hello World block I will see Hello World from the editor. But when I save it, I will see Hello World from the front end. And in a very simplistic terms, that's pretty much all there is to a block. I can return something a bit more complicated than this if I really want to with more elements, more tags and so on and so forth. But that's all I really need. In terms of the edit and the save, some people when they heard about the block editor and they heard it was built in React and they thought all our blocks have to be React now and all our themes have to be React and all our front end has to be React, it's like, no. React is very useful to know but it's not necessary to know because this is a really simple example. I guess in this case I could have just returned the string Hello World from the editor and not even bothered with any tags but that wouldn't be very useful in the long run. So if I wanted in my block to have little dropdowns or a button that the user could press and interact with, I would put it in this edit function. That's kind of like my little mini JavaScript app that implements all the little toggles and dials and things like that. And the save is just what it generates. Right at the end it gets saved to the database. It's just pure static HTML. And what gets done with that on the front end is up to the front end. That's totally separate. So if I wanna build a block that has a React front end, I need to then go on the front end and build a React application that takes in the HTML I've saved here or I couldn't just output HTML. That's what most of the core blocks do. And it's sort of how they work. There are other things that you can add in this list like this block can only be inside this other block or this block cannot be deleted or this block when you create it usually has these things or attributes. But we'll get to that another time. And there's lots of really good documentation about that. So this is what that looks. As you can see, I picked the layout category and that is in layout elements. I had a title of Hello World and an icon of Universal Access Alt and that's what that icon looks like. And the other blocks use very similar methods but that's basically the gist of that. And if we look over to what it actually looks like on the, well, I had an image of what it looks like in the front end but that's very well. So that's JavaScript. I'm usually working in PHP though and although I really like to try and do things with React and push myself forward with JavaScript I know that that's something I've been doing in the last two or so years and for the last 10 years I've been doing PHP I know it a lot better and most of my stuff is already in PHP. Why can't I use that instead? I have all these short codes I wanna transfer to blocks. Why can't, I don't wanna have to rebuild those in JavaScript, I don't have to. So I have two parts. There's a JavaScript part and a PHP part with the idea being that I extend the PHP part and it relies on something called server-side rendering. So there's a server-side rendering component you can put into the bit in the edit bit and then it goes and calls some PHP via the REST API and at that point you're back in PHP land and you have just a function that returns a string and you can put whatever you want in it. So in this case this is the bit that actually displays my block and I could copy paste my code from my short code into there. I could create a few objects and do a great big MVC Symphony level thing if I really want to. I could load twig templates. I could make an API call to some other random server that I have that was, you know, the customer had some other provider or whatever and display that. I don't know, it's PHP. As long as I return a string with some HTML it should be fine. In this case I've chosen Hello World because I'm simple and I don't really like having lots of content otherwise I get really rambling and waffly and you have two things. There's the attributes which we don't have any attributes in this block but if I were to have like a little toggle or a box or drop down that's where those would be. That's like my parameters or like the attributes when you have a short code callback or the options on a widget and the content if I have a block let's say like the cover block or the group block you can put stuff inside it. That's basically the content. So in this case I'm just returning Hello World and then I have a nice little sort of bootstrapping thing. So to tell it that I've done something in PHP I can call register block type and again this time because I'm doing a dynamic block using rendering the server I've decided to call it Tom Gen 4 slash dynamic because I'm very imaginative and it needs two things specifically it needs to know what function to call to actually show the block. So render Tom's block this nice little bit at the top and it wants a script to register so that it knows a few of the other things like which category it is and what it's called on the front end and the icon to use. So I register my script and I'm calling it block.js just because I'm not very imaginative and I have a nice block.js file in my plugin and then I have two dependencies WP blocks because it needs to know where to get that WP.blocks bit I showed you earlier from and WP element because that's an important part of things. If you don't include those you'll probably get a cryptic JavaScript error in which case it's usually easy just to have those things in. So I'll start with that and it runs on init so on every page load it tells WordPress I need to register a JavaScript file in my plugin pretty standard, not scripting bug specific really then I need to register a block type it's a dynamic block when that block is shown call that function and register enqueue that one and that's all the PHP so far and then I have a little bit of JavaScript which is very similar it's a dynamic block I opted for a megaphone instead of an accessibility icon and I've put it in the widgets category because I thought I'd do a bit of a change I've also decided to change the edit and the save functions a little bit so if I go forward there's my dynamic block with its megaphone and if I insert it I then need to change some things so this is my new edit function from before I'm just saying on the server there is a block Tom Gen dynamic and if I have any attribute to pass them along and that's what it'll look like now that hello world isn't coming from JavaScript it's coming from the server and the PHP and that little function that just returns the words hello world I could put whatever I want in there and it would do that and it would do it on the front end as well if I try and interact this I can move it around like a normal block the only thing I would notice every now and again it might look like a gray block of a little spinner and that's just WordPress going back to the PHP and checking what it's supposed to look like because it can't do that in JavaScript it has to go back to my PHP function so it has to make a request but that usually takes a split second and that's what it looks like on the front end it kind of just looks like a paragraph because I wasn't especially imaginative when I built my block but every time I refresh that it will generate that on the fly a bit like a short code but it's a block and I could put all sorts of fancy things in there I could put a great big embed that generated things in PHP based on another database table since I've seen some people use short codes for I could put a snippet of code which I know will never change and I don't want the client to mess around with it so I'm going to make it into a block and just put it in a PHP function I could do all sorts I'm sure you have imaginations but for me I like the words hello world sometimes though you need to sort of nest things into each other and in this case this is kind of similar to like group blocks or cover blocks where you can click inside it and then add more paragraphs and images and so on and so forth or columns columns is a good example and you can do this so I need to make a handful of changes first I need to tell it to actually display the inner blocks so just because I have a block and I know it has like contents inside it doesn't mean that the block editor knows that well it kind of knows in the data but it can't show it to you so we need to add this small bit at the end just to say after we've done our server render with the PHP we can then put inner blocks in there and we also need to tell it up here this is what inner blocks is so those two lines are the new bits and if you just want to build a simple single block that doesn't have any children you don't need to do this but if you wanted to have children this would be how you would do that then we have to modify our save function so that it actually saves those inner blocks as well so we just tell it take the content from all the child blocks and that's what you're going to save I've modified my PHP function to actually use the contents so it's not just Hello World anymore it's other stuff as well and that's just appending it on the end and then when I register it I also need to add WP block editor in the middle there just so it knows what the block editor variable is and it loads it at the correct point and that will generate something that can put things on the inside but if you don't want to copy paste all of these things or type it up from my slides or go in and try and figure out exactly how to structure this and you just want to start putting in the stuff there are other ways of generating blocks and if you have WPCLI you can run a command that will just spit out something that works for you so instead of writing all these PHP files and JavaScript files you can just fill stuff in so they call this scaffolding and WPCLI is a few ways of scaffolding things you can tell it to scaffold a theme and it'll give you a nice empty theme that doesn't do anything with an index PHP and so on and so forth and you can scaffold a plugin as well so you don't have to go in and create a folder and create a plugin file and add the little header at the top of the comments you can just tell it I want to plug in and it's called this and this is its name and this is an author and it will go ahead and fill out some things it might even ask you a question if you forgot to add a parameter but you can also do this with blocks which I'm pretty glad because it used to be the case that you had to use this npmnpxcreate start a block thing and I'm like I never really trust those they always have way too much additional stuff it's like when you first get into React and they say use create React start a thing and you end up with a URL router and a validation thing and a data store and it's like no I just wanted to do a hello world so I could learn the basics and now I'm stuck with 5,000 lines of code so there's a command that will generate it all from scratch for you and hands up who is aware of what WPCLI is and who would like me to explain what it is alright so usually when you're working with Wordpress you're using the point and click visual user interface in your browser and that's all fine and good and some people might then want to do other stuff so they might write a little PHP script that will publish 5,000 posts because they don't want to click 5,000 times or they might go and use PHP MyAdmin to look up the poster that they can write a query that would be a little difficult to search for in Wordpress or maybe they just want to do a lot of things but they don't have the time to go and do it 100 times or they want to do it in a way they can pipe into another command somewhere so if I had a command prompt or a terminal there is a WP command and you just type WP and then you type a sub command and some information about what you want so it's probably best that I just show you so this is what it would take to scaffold a movie block and then put it in a plugin called movies so I would open a command prompt and I would, if I had WP CLI installed go to my Wordpress install and type WP scaffold block movie where movie is like the internal name before that I mentioned like Tom Jane forward slash hello world or Tom Jane forward slash dynamic the title being what the user would see on the front end and dash dash plugin equals movies basically says put it in a plugin called movies and it will go off and it will do that and it will generate a few things so in this case it will create a few files it's created the movies folder and the blocks folder and it's given you a movie dot PHP which does all of the there's this style, style sheet here and this script here and we need to connect them all up and put them on the block editor and queue them at the same time and all of that jazz then there's a editor dot CSS style it while it's in the block editor and a style that CSS for when that block appears on the front end so you might choose to have them be the same file with the same contents or you might decide to let's say add extra padding around the area so they're easier to click on and edit when they're in the block editor but that doesn't appear on the front end just those minor usability and quality of life tweaks or just things to help people as they're going around and the block dot JS is a JavaScript block it doesn't do them very much it has a little bit more than my example in that it had some extra parameters and it adds a lot more comments the idea being that if you're not really sure about blocks and you want to really dig into and learn about things you can spend a good 10 minutes 20 minutes reading through that every little bit, all the looks and cronies they're all nicely labelled and put out and the same with the other files and at that point if in your plugin, let's say there was a movies forward slash plugin dot PHP you could just include movie dot PHP go to the block editor and refresh and you would have a movies block you wouldn't do very much it would just say something along the lines of I am on the editor when you're in the block editor and on the front end it'd say something like on the front end but at that point you would then start hacking away and changing things so my name is Tom there's my Twitter and my website I probably should block more than I do and I gather you probably have a lot of questions alright, you go first so so like that let's go all the way back until we have a full example on the screen so that I can explain without anything being missing so let's say I was building this with React I could say return and then just write the power tag's HTML but I know that everybody knows much about React or how to take that form of the JavaScript and put it into something that a browser would so in this case these examples like this I could just copy paste this into the console with the block editor to open and then hey presto, I would have block I wouldn't need to actually modify any files um but when it comes to React and I so there's a few ways to work with React and WordPress just as there's a few ways to work with React full stop there's one way which is probably newer is WP scripts and yeah that's really useful and that does a lot of things behind the scenes as well for example if you have a JavaScript file and it requires a few other things it will kind of figure that out in advance they give you a PHP file so you just include that and it will list them all out rather than having to manually list them out and it will also do things like WP script start and it will run a live server or it will build things in the background so that's one way of doing it in the past I've used a webpack config and put a load of things in a pack via NPM you use webpack? yeah I've always tried to use webpack whenever I can just because it's the thing that I've seen most commonly and it's the one that most of myself and my colleagues understand so it's just whatever you're comfortable with is what I would recommend but if you're unsure webpack or WP scripts is what I would personally recommend if you work with the WP CLI scaffold plugin that is just ready to go if you don't want to work with React technically as long as whatever is returned by that is good for you yeah it's kind of like WordPress way of sort of wrapping around it but without needing any extra step between writing the Javascript and running it yeah so I mean in this case technically that is still using React because of the way that underneath several layers down and that's how it would be sort of compiled under the scenes for that so the EL is a React command that wraps sort of I think one of the thoughts is that underneath that EL layer you could turn it into something else like a view or something else like in this case it doesn't have to be EL or React it's whatever is returned by the edit function becomes what is in the editor and whatever is returned by the save function becomes the interface so I think it was a very roundabout way sorry? I think it was a very roundabout way of doing things there yeah just I'm not really used to React as a WordPress but I'm not as Angular like I'm not 100% I'm not very familiar with Angular so I don't see why you wouldn't be able to build an editor interface with Angular for that block but I would just do a CDN and I would just type in my JavaScript code and it would just come out yeah so that EL is actually a React function so yeah, did you have a question? yeah I was just going to say when you're obviously controlling your run but if you're using an AWP is that safer in terms of like and you can walk into my good run update or if you run it back before so I've not encountered that myself of course never say never but the thing about the WPCLI scaffolding is it's kind of just giving you a starting point on the underscore screen you don't really necessarily worry that in the future WordPress will break the underscore screen because it's just like nobody actually uses it they just start with it and then it turns into what it turns into and I would think that if you're facing an issue where you've built something and it works right now and it doesn't work in six months time and something is kind of seriously broken there but you can find out the Gutenberg plugin if that's going to happen and make sure that by the time the next WordPress release comes around that everything is okay I've found that whenever I've had issues with Gutenberg maybe it's because I'm on a really odd system like I try to use it on a television with a little remote and if I raise an issue on the GitHub repo they're usually pretty good about responding and flagging and making sure that it does actually get around to fixing it and if other people piling with the same issue as they probably would if you're in that situation then yeah it's probably going to get more attention or maybe someone who's not related to the Gutenberg team but has been using it it's like oh you need to do this and in which case everyone's like and then they think about doing some changes so for example in 5.4 if I go back well actually it's here so you have to declare a save function even if you have no intention of ever actually saving anything at the moment but in 5.4 if you don't declare a save function it will just assume you want to do the default thing and fall back to that saving you having to type out an extra three lines in my case so there's lots of improvements to the API and things which are coming along and they're really thinking hard about it and making sure that the experience for everyone whether they're developer or a user or just someone debugging it is going to be nice so just be vocal if that happens it's kind of a gist wow no way that worked hello boys and that was a really good but that was last me and I didn't know that the scaffolding was doing it so that's a revelation and I thought I'll actually go back there's a lot of projects out there that try and do the same thing as the WP CLI scaffold but in other ways my only final comment and that would be so there's other plugins like ACF and they try and provide their own way the only issue is if you do that you're kind of stuck in the ACF community looking for support you can't go to the wider WordPress community and look at wider WordPress knowledge because you kind of specifically need to know about that bit of ACF so someone oh it's good oh it's an evolving thing who might say about the future but I'm liking where it's headed we're getting looks through the door so we do need to wrap this one up I'll be around in a day if you have any other questions and thank you