 Alright, hey everyone. My name is Rich Tabor and I'm a WordPress theme and plugin developer. I mostly lean on the product side of things and I sell on theme force and creative market and other market places as well as my own site. So last year at WordCamp US I was sitting in the crowd. You know, I bet some of you were also in there and just watching Matias go through his demo and I was pretty impressed. Just watching someone just go through and visually create something out of nothing whereas now in the visual editor it's much more difficult. You're adding short codes for things. You're going to add custom post types, creating stuff, trying to pull it back in. It's just kind of a mess. So I was just pretty excited and I knew at that point that I wanted to dive in and explore Gutenberg block development. So I did. So let's see a show of hands. How many of you have actually tried Gutenberg? In any sort of fashion? Okay, so about half. So out of all of you, how many have looked at the code behind Gutenberg? Okay, 40%. Now how many of you have actually started building your own blocks? Okay, we got one. So that's pretty good. You know, now is the time to really start exploring this opportunity and really to be a part of the next level of WordPress. So let's get to it. I just tweeted out all of my sides. So if you want to pull them up on your own computer and follow along, that's fine too, or your phone. So it's at Richard underscore Tabor. And my goal here is not to teach you necessarily how to build a block in the next 30 minutes. There's a lot of different concepts and ideas to kind of grasp to build a block. But what I do want to do is give you some ideas, give you some tools, some insights, and really to give you the confidence to kind of be able to go on your own and figure this out. And of course you can ping me on Twitter and you can go on to the core editor Slack group within WordPress.org Slack. And you can ask just about anything you want there. There's a lot of developers that hang out there and answer all sorts of questions. So what you should expect is we're going to go over the anatomy of a block, what exactly consists of a block, building your first block plugin, loading assets, trying to get everything up and running, some different ways to add options to your blocks using block controls and inspector controls, and then some additional resources that you can fall back on when you're trying to do this on your own. So first up, what's a block? It's editable stuff. It's just anything that can be editable. It doesn't necessarily actually have to be editable. It's just a block of content. And by editable it's you can add it somewhere or you can take it out. And it's its own dynamic piece of content. It's also important to note that they're almost entirely written in JavaScript. So if we look at the WordPress.org website, we can imagine different elements here being blocks like a hero area. This could be a block or it could be just a regular header title with some different extension added, or background color extensions added to it. We could have the language selector could be its own block and it could be dynamic. It could pull in languages based on where you're at, not just text. Then we could have the tagline, which could be its own custom block that you use within your agency for your customer's sites, or it could be simply just a style like the header block styled. Because when you think of things in the block approach mentality, you can really start to understand all the things we can do. It's not just paragraphs and headers and list items and images and galleries. It could be anything. It could be feature sets. It could be team members. When you have a website that has a picture on the left and your content on the right, it could be very dynamic. You can kind of extend outside of the reach of what you're currently seeing in the core Gutenberg plugin. So let's get up and running. The easiest way that I've found to personally get up and running is to install what's called Create Gutenblock. And Create Gutenblock is a zero configuration toolbox that you literally put on your machine and you can run it to simply download everything you need to get your feet wet with Gutenberg. Sure, once you learn things, you're going to want to go in and kind of tweak things and do things your way, but it's the best way to kind of get started. So to do that, you first need to install Node.js and Node package manager. If you don't already have them installed, I have a download link here. Second step is to open up Terminal and then install Create Gutenblock. Third, you're going to navigate into your local, so you're going to set up a local installation on your machine and then navigate to the WP content plugins folder and then run Create Gutenblock and then the name of your block. In this instance, the name of the block is just block name. And then you're just going to start it up. You're going to navigate into your block folder that's just got put there and hit MPM start and press enter. What that's going to do is install a bunch of stuff right here for you. You've got your main plugin file. You're going to have a readme that's just a demo for you. The important part here is the source folder where you're going to have your block assets, the block.js, editor.scss and style.scss. Then you have your blocks.js file, which is going to load in your blocks and then you have an init.php and common.scss, which is just standard stuff. It's pretty too easy, right? So I just mentioned those assets, right? So what are those? We have a few block assets to go over. The block.js is your actual registration for your block. It's the file that's going to load in the meat for your block. Without that, you wouldn't have a block at all. Then we have the style.css. In this case, it's the base style sheet. It's the style sheet that loads within Gutenberg inside the editor and also on the front end whenever that block is rendered. Then we have the editor.style sheet, which is the editor style sheet. This is pretty unique. It's the style sheet that only applies within Gutenberg, not on the front end. So think about it this way. You have a common shortcode that we see is a button shortcode. So we have a button shortcode right now that we are going to convert to a block. We converted it to a block. On the front end, we want to put some margin below it to match all the paragraphs that have margin bottom, right? But within Gutenberg, you wouldn't want to have that margin bottom assigned because Gutenberg does apply some spacing between blocks. So if you had a margin bottom of 35 pixels on the front end and on the back end, you're going to have extra space on the back end. So you would just set in your editor style sheet that that button should have a zero margin bottom and it would override your style sheet. So let's look at registering them. It's kind of hard to see, but I'm registering essentially all three scripts here. And again, I put these online so you guys could follow up on them. I have the block.js here, the block editor style sheet, and then the base style sheet loaded here. And I have a few dependencies which are pretty standard. They're going to load some libraries to help you build your blocks. So we're going to grab the handles, I have here just WCATL block editor for both the block.js and the editor style sheet, and then just WCATL block for the styles. And we're going to plug them in here. What we're doing here is essentially registering those styles and script to load whenever we need to. If we enqueued them normally like you do a theme style sheet, you would essentially have them loading on every single page and post no matter what. So using this method, they're only enqueued and used whenever you need to. So now we're in a JavaScript world. That's it for PHP. So wipe the sweat and let's move on. Block registration. Now that we've got our assets registered and ready to go and you've installed create, group, and block and everything's there, let's talk about block registration. Within that block.js file, you're going to start building your block. There's a register block type function and it takes two different parameters. We've got the arguments. We've got the block name and then the block configuration object. The block name is pretty simple. It's just a namespace slash block name and the namespace would be your vendor name, for example. Like I would use theme beans or my last name Tabor, maybe. And then the block name, here I just said block name, but if I was building a spacer block to space out content, it would be spacer, something simple. And names have to be structured as such and they have to be lowercase, afro numeric and they cannot start with a letter. Now the fun stuff. The block configuration object. So this object takes quite a few different properties. We have the title, which is the title of your block that you see within Gutenberg. For instance, the paragraph block is called the paragraph block. And here we just have the block title as Hello World. We have a description which shows up in little pieces here and there within the Gutenberg editor and you want to keep this pretty short, like a sentence, that's about it. Then we have an icon. So when you hit the little plus icon within Gutenberg, it's that icon you see associated with your block name. We have category, which is where your block is sitting within that inserter. There's a couple different categories, like common, layout, formatting. So you would kind of assign your block to where it should sit within that inserter there. And then keywords. Keywords help folks find your block when they're searching for it during the inserter. So they'll hit the little plus icon and they might search for Hello World or Elana or they want to say hi. It would come up, but if you were typing hi and I didn't have a keyword assigned, it wouldn't come up. If you typed Hello, it would because the title is Hello, but that's otherwise. Now we have the big ones. Attributes and then the edit and save function. Let's split these out because they're a little bit deeper. Attributes are the JavaScript object that holds all the data for your entire block. Think of it this way. For each editable piece of your block, you have to have an attribute assigned to that. It can be used to render within Gutenberg and then also pulled to the front end. And all of those attributes have sources. And this is how you define what that attribute actually is. So let's look at some examples. I have here a URL attribute with a source of attribute with a selector of image and attribute of source. It's kind of confusing, but let's talk it through. So what I'm saying here is that I want the URL to be the image's source value. Can you see that? So the selector is what we're looking for and the attribute is the source within what we're looking for. And that's how we're going to get that value from the attribute. And then for the text example here, we have a fig caption element, okay? And our attribute of caption is going to grab the text from that fig caption and save it as our attribute value. And third, I have children. Children is a little bit more complex, but it's the same idea. We're pulling the child nodes of an element. So in this example here, I have a content attribute, the source of children, and then for the selector, I have a paragraph. So if I have just one paragraph within my block, I'm saying that all the child nodes within that paragraph, so that's the bold, any formatting bold, italics, strike-throughs or breaks, any of that sort of stuff, is going to be the content attribute value. So when it's saved, it's everything you see right there. And that basically sums up attributes. There's a couple more attributes like HTML and queries, but those you can find on the wordpress.org Gutenberg handbook when you're starting to dive in and figure things out. These are just the common ones. So for the edit function, the edit function is everything you see within Gutenberg. It's how your block renders when you hit add and you select your block. And this is an example if you can see it from the verse block within the core Gutenberg plugin. So right here we have the edit function. We have some properties and we have some constants and the return. So let's look at this for the properties. This is the important part. And once you get this, everything else kind of falls into place. Okay, I promise. The attribute properties here that I've highlighted basically pull in the available attributes that we just assigned right above in the registration. Okay, and they can be used and manipulated through the elements that we're putting in there in the components. The set attributes property does just that. It sets the attribute to a value somehow through user interaction. In this case here, it's tough to see, but I have a rich text component with the tagline of preform and text, the pre. And I have an on change function. So essentially when the text changes, as you're typing in, we're going to update that content attribute. So that way it's up to date. And then we have class name, which returns the class name of the block, which is wp-block-your-namespace-vendor, or your vendor slash block name, but the slash is returned into dashes. It's pretty simple. It's just how it's used to reference your block. And then last we have isSelected. IsSelected is really neat because this is where we get some of the UX side of Gutenberg. Because you can show and hide elements that you're using within your block based on if you're selected on it or not. For example, if you're looking at the paragraph block right now in Gutenberg and you click on it, you'll see the bold, the italic, the strike-through and the link options pop up for you to use. You don't need those there all the time. You just need them when you're interacting with it. And that's where you would use the isSelected property. And this is what it looks like, the verse block within Gutenberg. And I've added a verse to it and then I bolded the top of it. It's just a simple rich text component with a paragraph attribute pulled in right there. And the isSelected part is pulling up my toolbar automatically. And that sums up the edit function in a very easy way. You can do a lot of really cool stuff like bring in different components. You can set resize little boxes. You could do almost anything there. That's where the cool part is. But to get started, if you understand the rich text component, that's how you are going to manipulate things a whole lot. Now the save function. The save function in one essence is similar to the edit function, but at the same time it's completely opposite. The edit function is everything inside of Gutenberg when you open up Gutenberg and add and click add posts. The save function renders whatever that block saves and puts on the front end. So all the attributes that are saved are now put on the front end. So it looks a lot simpler because we don't need all the components. We don't need all the stuff that you need within Gutenberg to make all the fun activities happen. So here all I'm doing is setting two properties, because that's all we need. The attributes and class name. I'm returning a pre-formatted text tag with the class name of the class name that we're using. And I have attributes.content, which pulls in that content attribute that we already assigned and that we manipulated by adding content into. And then we hit save. It saved it. This is our save function and then this is what it put out. Now in the future, when themes really start integrating with Gutenberg, they're going to style the Gutenberg instance that you saw just a second ago to look just like this. So when you hit save, there's no difference. That's the future of Gutenberg in themes because right now it's pretty different like the editor instance within Gutenberg, but it doesn't have to be. And there's already ways to do that right now. And that's the core of a Gutenberg block in like the simplest way. So what's really cool is I'm using examples throughout this presentation that are included in the core Gutenberg plugin on the GitHub repository. And that's because it's such a good resource to look at all the valuable code and see exactly how the like brightest minds on Gutenberg have done things. And you can pull those exact same things. If you're using yes next and the modern JavaScript, you can pull that exact same stuff and use it in your block, exactly the same. So now let's look at the fun stuff like inspector controls. So inspector controls essentially add extra options to your block. So right now in the paragraph block, we have a bunch of different options. We have the button group. We have range, toggles, colors, block alignment, text. And then I added a section from the latest post settings here, which includes a query control and select, which means you can actually select what posts you want to display within something. And this is, again, all of these are inside of the core Gutenberg plugin. So you don't have to recreate the wheel at all. You can literally do a command and search and find what you're looking for and then plug that in here. So let's look at the code behind this stuff. And let's see how it kind of connects to what we just did within the edit function. This is an example from the button block. I chose this because it has a couple or has quite a few less different controls and options than the text and the verse do. So we have here an it's selected property, which means we're essentially showing this only when the block is selected. We don't need to show these options if we're not using the button block. And we have a panel body and then three options. A toggle, a panel color and then another panel color component. So if you look here, we're also using set attributes and this is just a function up above that does the same thing. So we're using this set attribute property to, again, set the attribute of that attribute here, text color to whatever the value of this option is or this component that we're setting. So this is what you'll get right there. You'll have the toggle up top and then the two color options. So now let's look in some live previewing because when you're manipulating blocks inside of Gutenberg, you want to be able to see some live feedback whenever you're changing colors and such. That way you don't have to push, publish and see what it looks like on the front end because that's what we're trying not to do. Now we have a snippet of the edit function. So here we have a span, we have a rich text again because almost any time you edit text it's going to be using the rich text component. We have a couple different settings here but the important one is this style bit here because what we're doing here is saying that whenever the style of color is changed we want the background color of this rich text element to emulate that. So if we change it pick up red or pick green or pick blue the background color right here will change and the same goes for the text color and an update on the fly right there. So now let's look at the save function. We're doing the same thing here. We have this save function here. We have the attributes property up top and then we have button style. You can see we're also doing we're doing the exact same thing here. We're saving the button style constant here which has the button color options and we're saving it as an inline style for that button. So when you hit publish it looks just like it did on the edit screen. There you go. And that sums up inspector controls. There's a whole lot of stuff you can do with inspector controls but one thing to remember is you don't want to go overboard with the options that you're giving people and even so for clients you don't want to give them a million ways to do something. Sometimes you just want to give them one or two. You want to keep things kind of limited and that's part of the user experience side of building these blocks. Then we have the block toolbar. So the block toolbar is like I said earlier that little toolbar that pops up on the selected property when you select something and it has some options. There's block alignment toolbars. There's text formatting toolbars stuff that is built into Gutenberg but there are also things that you can do yourself. So let's take a look. Right here I'm returning the edit function from the button block and I'm using the is selected once again and I have a block controls component now with a block alignment toolbar component inside of it. So what that does it has a value of align which is important and then the on change is set to update the alignment using set attributes just like we always have and this is what we'll get. We'll get the block alignment toolbar which is those five icons over there and the cool thing about Gutenberg like I just said is that there are bits of pieces that are used inside of Gutenberg that you can just easily reuse or even are automatically assigned like the rich text component will automatically pull up the bold, italic and strike through. You can easily opt them out using your rich text component but by default those are put there because as a user you would expect to be able to bold something every time you type something. That's just part of the UX that they put already in place. So what you can also do is add some custom controls. Say you have a, right now the latest post block has a grid layout and a list layout option so you can show things in the list or side by side and the way they do that is by using the block controls component down at the bottom and now they're using just a toolbar and for controls they set up top two different options here we have the list view and then the grid view and at the same time their on click functions are setting the attributes for layout to list or to grid doing the exact same function except for now we're changing it to either list or to grid and this is what that looks like those two little icons there and you can set for the grid view icon and the list view icon you can set those to any dash icon available in WordPress or you can make your own icons but again you want to make sure you're conforming to the user experience offered by Gutenberg you don't want to have a a lot of stuff in the block toolbar right here because this is supposed to be kind of a on the fly editing decision you're like okay cool this would be great as a grid view or list you wouldn't want like I want this to be red I want this to be green or I want to have this font size or this spacing or this text all right here those are reserved for the inspector controls panel and a key part with adding these extra things like this or extra inspector control options is that you want to make sure that your block is following all the rules that Gutenberg blocks have already done for you if they're doing it a certain way you should probably do it too because you don't want your block to stand out in such a odd UX way that people are not sure of what's going on when they're using your block you don't want anything unexpected you realistically as a from a UX perspective you want your block to feel almost the same as if they were using a core block to have that same sort of feel and everything just kind of works the way they would expect it to and not have to relearn something because that's the whole thing with Gutenberg is we're trying to make it easy to do rich content and by easy it's also by keeping things the same or familiar so last up I've got some resources to help you kickstart your block development the Gutenberg handbook is pretty good place to just kind of dive in and try to identify things or if you're like what exactly is inspector controls you could just search for it there it's pretty good create Gutenblock is what I was talking about earlier about how to get started really quickly and just try to play around with it the Gutenberg examples on the WordPress GitHub repository is actually really really good and these aren't included in the core Gutenberg plugin but the good thing about these is that they have the ES next versions like the modern JavaScript and also the classic vanilla JavaScript versions of the same block so if you're familiar with one you can kind of relay the two and if you're not familiar with either I would learn a little bit about both but then start really diving into learning the new stuff because all the blocks within Gutenberg are written using the new stuff and it's going to be so much easier to try to identify what's going on using like the 20 or 30 examples they have in the block plugin now and then the last one is my blog I write a whole lot and I've been writing about Gutenberg because that's the hot topic and I've been writing about what I've been learning and it's been just fun to do and fun to share and I like getting feedback and such and I've got a few more posts lined up so you can go there so is your mind alone