 Welcome to camp Boston. We are going to continue with the Gutenberg track here and I'm going to be talking today about the basics of building a Gutenberg block. There is a link down here, AmandaGiles.com forward slash WCBOS18 and that will get you a copy of the slides and also the ability to download the code that we're going to look at today. So a little bit about who I am. I have been an independent IT consultant for over 10 years. I've been working as a programmer for many, many more than that. I've been working with WordPress as primarily a theme developer since 2009, although I do build the occasional plug-in. I've been speaking at WordCamps since 2014. I think WordCamp Boston was... I spoke in WordCamp Boston 2014 and many since then. I love coming here. I live right up in New Hampshire and I founded and run the Seacoast New Hampshire WordPress Meetup. So if you live somewhere north of Boston, maybe check it out. We meet in Portsmouth once a month and we cycle through user topics, developer topics, and Divi theme topics. In 2016, I founded a web development agency. We focus specifically on WordPress and development. We pretty much farm out design and other things. A couple of just fun things. I'm a kettlebeller. I got to be a poem expert. However, I am a longtime WordPress developer and since I create themes, I thought it was really important to figure out how to build Gutenberg blocks. I'm also very curious and very determined. So I'm going to talk to you a little bit about Gutenberg and then we're going to dive into some code for a very simple block to give you a feel for how it comes together. So Gutenberg, you've heard a lot about it. You probably know this by now, but in case you've just come in, Gutenberg is a new editing experience for WordPress and the idea, as Tammy talked about in her keynote, is that the editor is just the beginning. The framework that Gutenberg is going to be expanded upon to do things like the customizer and other parts of WordPress. So the editor is just the first step. And it's named, of course, for Johannes Gutenberg who invented the printing press with movable type in the 15th century. So people looking for history on him are probably highly amused when they come up with all of this WordPress stuff now. Gutenberg is very different. As you've already known, I sometimes give this talk to people who are brand new to it, so I'm going to kind of try to move through this to get to the code. But currently our WordPress editor is just a block of text. As you know, it's the tiny MCE editor. It has a lot of little options, but essentially it's one big block of text. Gutenberg changes that by breaking it into blocks. It's, as I mentioned, going to be more than an editor replacement. It really changes, reimagines the way that we deal with content in WordPress. It's a very different way of working with it and looking at it. So with your current theme break, probably not. I'd still test it. Wherever your theme is normally showing the tiny MCE editor, it's going to convert it to a Gutenberg block. And if your theme or builder doesn't even use the tiny MCE editor, so if you have something like Divi or another theme that has its own page builder, you probably won't even see Gutenberg because that editor is going to replace the standard editor in the same way that Gutenberg does, but you're not going to get both. You're going to get one or the other. So the goal with Gutenberg, there's been a lot of questions of why people are slowly coming, well, not slowly, but there's been some contention as it was developed and I think people are moving over to it as it's become more stable. The goal is to really make the editing experience a lot more intuitive. So we're all used to using that tiny MCE editor and it seems normal to us, but as we get more and more people coming to the web as we democratize publishing, as we like to say in the WordPress world, it's really important to give people a more intuitive interface and people are getting more and more used to that as the web has gotten richer. One of the great things I like about Gutenberg is that it also exposes invents, like YouTube and Instagram posts, things that if you knew about, you would use, but if you didn't, they're pretty invisible. So Gutenberg really makes a lot of things more accessible. I'm actually going to skip this video right now. So the video is really just going to be a, it's a series of kind of going through and creating some blocks, which I think you've all seen at that point. So in the interest of time, you can check it out later. You've probably seen most of you in basics of how you work with it and add the blocks. So in addition to just the standard text block, which obviously converts, it builds a lot of other things in there. So lists, images, galleries, quotes, it includes column layouts, it includes the embeds, as I mentioned. It even includes accessibility warnings, which are just fabulous. So when you pick, for instance, on the paragraph block, when you put in a text color and a background color and they don't have enough contrast, Gutenberg tells you right in there. As soon as you pick it, it tells you. And as soon as you change it to something with more contrast, it removes the warning. So it's not only a useful tool, but I think that it's going to help really raise awareness of accessibility issues, even though it's just a tiny piece of what it means to have an accessible website. And the other cool thing about it is it allows you to save and reuse blocks in multiple locations. The big question, of course, is when Gutenberg will appear. We've had that question for months. It is available as a plug-in now. And as Tammy said, it apparently has all of its features in. We are really just in a bug-fix mode. So it's expected to be merged in as part of WordPress 5.0. And the current 4.98 beta version, which I think is beta 2, has the Gutenberg call-out. So it's going to start encouraging people to actually try Gutenberg and use it. I think that's going to help us flesh out the end of bugs, but the last of the issues that might keep Gutenberg from fully launching into core. If you don't want to use Gutenberg, there will be the classic editor plug-in. Who knows for how long, but it is available. You can install it on your site. And it can help with the transition, or if you have a client who's uncomfortable. If your site is in Gutenberg ready and for some reason it doesn't work well, it's alternative as a short-term fix. If you're a theme developer, you can continue to develop as you normally do, but you could also build blocks for Gutenberg, and that's the focus of this talk. We'll hear from, actually later this afternoon, we'll hear from Zach Tyrell about his experience with the events calendar and how they've been readying for it. And him and many other plug-in and theme developers have been readying for and working with Gutenberg for months. So it is going to be a big change, but the WordPress ecosystem has had a lot of time to adjust and they are doing everything they can to get ready for it. So the basics of Gutenberg blocks, what you need to know is that they're built almost entirely in JavaScript. There is some PHP that we use to bring in the files, but essentially it's built over React to JavaScript library. Now it isn't actually built directly in React, we use an abstraction layer over it. One of the first decisions that you make when you decide to build a Gutenberg is that you need to decide whether to write your JavaScript code in what's called ES5, ECMAScript 5, or a newer standard. ES5 is the 2009 standard, which is pretty much supported by all browsers. So if you write in that standard, you are able to write in that and load it directly to your site and you're good to go. But there are newer standards. ES6 came out in 2015. And since ES6 came out, they've been working to issue a new standard every year. So ES8 is the latest one. I know that ES9 is under, I think, future review at this point. So each of these new sets of JavaScript has more features, but they're not necessarily supported by all browsers. When you're using ES6 or something higher, you need to use some kind of build program to essentially compile it for compatibility with all browsers. If you use ES5, you get out of that. You don't need to bother with that. And ES9 is just a general term that's used to refer to the next standard that's being worked on. JSX is another component in building Gutenberg blocks, and it stands for JavaScript XML. It's an XML likes syntax that works with ECMAScript. It's easier to write. It will seem very familiar if you've been writing XML or HTML tags. But, again, this does require a package manager like Node or Gulp or something to handle the compilation. And the Gutenberg block tutorials that are out there, some of them have examples in both, either the ES5 or the newer ES9 or ES6 and up, but not all of them. So if you are building something and you're looking for an example, just make sure that you need to essentially decide which kind of JavaScript you're writing first. I have horrible luck with package managers on machine. I have a Windows machine, and they work, and they work, and then they don't work. I decided just kind of for the greatest accessibility that I would do this all with ES5. So if you're not comfortable with package managers, or you, like me, have a gremlin for package managers in your computer, this is code that you'll be able to use without going through the extra build step. And it's very similar, but there just are essentially syntax differences. Just to give you a little example, hopefully you can read that. So on the left we have an example of an ES5 syntax with no JSX. And you can see it looks pretty much like standard JavaScript. If you look over on the right with the JSX, you see something that looks a little more like an HTML tag or an XML tag in there. But you can see how the data is mirrored. You're still going to be setting the same kind of attributes and values, but the syntax is going to be different. And if you look in the Gutenberg Handbook, which, if you haven't, I highly recommend, that they thoughtfully put all of their examples in both ES5 and ESNext. And so anytime you see a code block in the Gutenberg Handbook, you can click on this little toggle and it will switch. And it's also just a really great way to see the differences, but also, again, make sure you're looking at the right example for whichever format you're using. So we are going to build a Gutenberg call-to-action block plugin today. Very simple, but we'll give us an idea of how we construct it. This is what it's going to look like on the right. That's what it looks like on the front end of the site. It's got a title. It's got some text. What are you waiting for? It's got a button. So that button has some text and that button has a URL that it needs to when you click. Super simple. The nice thing about Gutenberg is on the back end, this is what it's going to look like when we add it. So when I add this call-to-action block, what I see is a box that looks very much like what it looks like on the front end, and it's giving me some helpful placeholder text here. So you can see where it says enter an attention-getting title. If I click there, it's going to turn into an edit box. When I click enter your pitch here, it's going to turn into a different edit box where I can enter that. And if I click on the button, I'm going to be able to type the text for the button. Now the only thing missing here is the URL for the button to link to, and you can see that is over on the right-hand side in the... I'm not sure what they're calling that. The properties window on the right. And as soon as you click on a block, if it has fields like this, they will appear. So you notice there's two tabs on the right-hand side, document and block. And when you're not focused on the block, the document tab is up and it has your standard post-level fields that you can change. When you click on a block on the right-hand side, you will see any settings that are specific to that block. So in this case, I put the link field over there. I could have put it in the center part of this called action block. And when I first built it, that's where I put it, because I didn't really know where to put it. And I was like, well, I know where to put all these other fields. But obviously, if I put the link on that block, it doesn't look like it's going to look like on the front end. It has kind of lost that appearance. So I moved it over on the right. And we'll look at all that. Once you put in the code, this is what it looks like. Even though my placeholder text was kind of lighter in color, once I actually put in values, it is highlighting it here in the same styling that is shown on the front end. Building a plugin, five steps. Super easy, right? So the first step, obviously, in this case, we're building a plugin. So we basically create a plugin file from scratch or using your favorite boilerplate. And then, just like any plugin, we're going to register our back-end editor JavaScript where all the magic happens and our CSS. And they're also going to register our front-end CSS and possibly JavaScript if there is some dynamic action happening on the front-end. In our block, we're not. The only thing is a click, so we don't need any front-end JavaScript. And those scripts, unlike a normal plugin where we would register and enqueue them, these ones were actually going to just register them and then we're going to register our block type but pass it the handles for these files so that it knows that these are the files that compose our block. Once we've done that, that's all in PHP, then our very last step is in our JS file, we are calling register block type. And that is going to have all of the code that runs our block in the editor. So, steps two, three, and four basically happen all together. I've put them all in one function. You can see at the top that this function is tagged to the init hook. So, we don't use an enqueue hook, a special enqueue hook or anything, we use the init hook, but we register our scripts in here. So you can see my function GBCTA block registration. And you can see right after the beginning I'm registering my block.js file with a register script. You can see the script handle up there. And then I'm registering my editor CSS, again with a different handle using wp register style. If we continue scrolling down in the same function, now we're registering the front end CSS. And then the last thing that we're doing is we're calling register block type. This part's a little confusing. So this register underscore block underscore type is the PHP function that WordPress is expected that ties all of our scripts together to make the Gutenberg block happen. So the first thing I pass it is a handle for the block. So you can see down there it says GB-demo forward slash GB-CTA. And then I have an array where I pass the handles for the three previous files that I register. So the editor script, the JavaScript file, the editor CSS, and the style is the front end CSS file. That's pretty much it in the PHP other than your standard plug-in framework. Before we get into the JavaScript part, there are some JavaScript libraries that come with Gutenberg, and they're global libraries, and they are what you're going to be using to build your own blocks. Certainly Gutenberg comes with a lot of blocks and all of the pieces that are in those blocks are accessible for you to use when you're building your block. So WP blocks has a bunch of components and functions that you use to build blocks. The editor has a lot of specifically the editor-related blocks, such as the rich text. Element is actually the abstraction layer that sits on top of React and React DOM, and it's used inside the elements to create the blocks. Components are reusable components. There's also internationalization and a date library, and there's probably some others, but these are kind of the big ones that you'll probably use. I should mention while we're on here, if you go into the Gutenberg repository, which there's a link to later, there are great descriptions of these libraries as you click in. All of the remakes in the Gutenberg library have some really great information on helping to understand them, and there's a lot of resources online. But if you're also very code savvy, you can go right into the code and start digging around. So in our blocks.js file, the file where, like I said, all of the magic happens, the main call is your register block type, and it's a single JavaScript call. In this example, I've put it all in one file. You could certainly break it out into different components, different functions that are being called in. For ease of review, I just kept it all in one file. But this function is going to be creating, specifying the general information about the block, how it's going to appear in the editor, the title, the icon, the category. You can specify up to three keywords. It's also going to have the definitions for any of the dynamic data fields that are being stored, also called attributes. It's going to specify the output and the functions for the editor function, and also, I actually said front-end display and function there, but it should say for the save function, not the front-end, so I will correct that. And we're just going to, I'm going to go from the top of the file and not going over every line of code, but I want to give you a feel for all of the pieces of it. So right at the top here, we have our function. We have five libraries that we've chosen to include, and these five libraries correspond, if we go back a few slides here, they correspond to the dependencies on Gutenberg JS libraries there. So I put in those five libraries as dependencies when I registered my blocks at JS, so they're available for me when I get to my JS file. And then right in this function, right off the bat, I'm just creating a variable for the element create element because I use that a lot, and it's a lot shorter. In the other spots, I basically tried to keep the name of the library so that you can get an understanding of where these pieces come from. So the first thing we do is call blocks.registerBlockType, and we give it some standard information. We give it the handle, which should be the same handle that I used when I called registerBlockType a few slides back to update that. Then we pass it some information, like I said, the title, the icon. So the icon, you can pass an SVG file, or you can pass the dash icon name. And if you pass the dash icon name, you just need to pass the bit that comes after the initial dash. You give it a category. There's a set number of categories. There's, I think, five of them. Embed, common. There's a few others. And keywords. You can specify up to three keywords. This is a really shortened version just to give you an idea of the structure. So that's the beginning part. The attributes are going to be all of that dynamic data that we want to store. The edit is going to be the backend editor. And that can have multiple, it can have a lot of action in it. But in the end, what it does is return the element that is being essentially constructed on the fly as you work in the editor and as you change content. And then the save. Again, I mislabeled this. It does not handle the front end, but it handles once that data is saved to put into the WordPress content field. So because this is a JavaScript application, it works in a different way in that it has what's called, I believe, a post state. And as you're working in it, it is constantly running this code and updating what you see and running the JavaScript. And then only when you go to save does it go to save it into the content field. So the edit function is basically evaluating and running while you're in the editor. And then when you go to save your post, the save function is what's going to actually store the final code into your content field in your database. And then at the very bottom here, you can see the references to the libraries that I put in. So I'm passing those in so that they're accessible in my function. I think these are slightly out of order. So this is the beginning part of that function, but with actual content in it. So here I do have the handle for my block register type. I have a title in there. Notice that I'm using the internationalization library so that even if I don't think it's going to be translated, I have the door open for it to be translated. I'm using the megaphone dash icon. There we go. The block categories are common, formatting, layout, widgets, or embed. So there's only five of them. Don't make your own up. Has to fall into one of those. And then you can specify up to three keywords. And these are how people can find your block. So if they type in the text field to try to locate your block, just picture two years now when you have hundreds of blocks in your WordPress installation, you can type. And these keywords are one of the things that will help bring up your block for somebody who's looking for it. Then the next thing would be the attributes. So this is the dynamic data that we're storing. So in our simple example, we have our title, we have our content, we have our button text, and we have our button URL. So we have those four pieces, and then we have a little bit of information about those fields. Most of them are pretty straightforward. You can see just a string, a URL. When we get to the content, it's a little more complex. It's an array of paragraph tags. And then we get to the edit function. And there can be more dynamic things that happen. In this case, the only thing that's really happening is I'm re-saving, I'm re-generating the HTML for the block every time. So this is a little dense, but essentially the return is creating an element. And you can see right at the top there, it's creating a div and it's using the class name, which comes, is auto-generated from the handle that I created for my block. And then the way that these element blocks work is that you nest them in the same way that you would nest HTML elements. And that's essentially what you're doing. This EL is the create element, is creating for HTML element. So here I'm creating the title block with a tag of H3. I'm giving it a specific class. I'm specifying whether it's inline or block. I can put a placeholder in. So this is the placeholder text that we saw when we created the block. It says enter an attention getting title. That doesn't get saved. It's just a prompt for the user. Then we have the value, which is our attributes.title that we defined earlier. We have a set focus and we have an on change. It's going to get the new value that's been typed in and it's going to save it to that attribute. So every time you are pressing another key in that box, that attribute is being updated in real time and refreshing and being saved in the, essentially kind of in the memory of the page. This continues for the content and for the button. We're going to skip past those because they're just very similar with different tags. The next thing that we have is the block URL. This is a little different. We're not creating an HTML element in the same way on that side. We're actually creating an element over on the right hand side in the panel. So this code you can see looks a little different. We still have that wrapping EL create element, but we are using inspector controls and we're creating a field. Again, we have a title. We have a class name and we have some information about what kind of field it is. So you can see down near the bottom, it's a URL field. It also has a label that appears above it and it also has an on change function that's addressing, that's saving the value as you type something in there. So again, the code is intricate if you're not used to dealing with this kind of JavaScript but at its most basic level, it's not super complicated. You can go out and write this right away, but I'm trying to show you at least the structure because it's not too difficult, I think, to get in and start playing with it. After the edit function is the save function, this is what runs when you update the post. This is going to be what actually, this is the HTML that gets saved into your content field. So in this case, the save function is also returning an element. I'm returning it pretty similarly to what I showed in the edit area. When you look at the code later, you'll actually see one of the differences is that, for instance, here you can see the link for the button and I'm putting an anchor tag around it. If you go and look at the edit and you look at the same spot for the button, I'm not putting an anchor tag around it because I don't need it to be a link in the editor, I just need it to be a button. So there are slight differences in my case. In your case, the differences could be vast. Your edit function is likely to be more complicated. It's likely to have other functionality that might be running in it. But your save function is really just the output. What's going to save in your post in the database, which will then, of course, be displayed on the front end. Piece of cake, right? I didn't get a chance to go through and update these links. I originally created a bunch of these links in March, so they're all still really great links, but I promise you that there are even better Gutenberg links out there. But I'll go through them pretty quickly. There's an intro to Gutenberg which is about Gutenberg that's kind of the official one. The Gutenberg handbook is more of a developer's take on it. It's that I showed you a screenshot from it where they have they break down a lot of the elements and they have the syntax, the code of those formats. There's a great Gutenberg white paper from Human Made. You have to give them your email address in exchange, but it's a wonderful document to give you kind of an overview. The basic use of Gutenberg, the Gutenberg source code, the Gutenberg.news site is a great reference. They are updating all the time and they have, you can go there and read articles or tutorials. You can filter it down however you want. Some links for theme developers and articles somebody wrote about what's going to happen to my custom fields. When I was playing around as a theme developer for custom post types you have to make sure that the editor is enabled. That's when you're registering your post type and you're specifying which elements which which elements should be available for your post. That's not the word I'm looking for. You need to make sure editor is in there. If editor is not in there, you're never going to see Gutenberg. But if you have editor in there then you will see Gutenberg once Gutenberg is enabled on your site. Then you also have to show and rest to true in the registered post type plugin. At least that was true a few months ago. Some plugin examples here. I will save the transcribers fingers by not listing them all but you can see them here. These are all links so if you download the slides if you visit the website click these and visit them. Create GutenBlock is a CLI tool that somebody built that basically does a lot of the work for you of setting everything up. And WCLI does scaffold block as well. So there's lots of great tools out there. Some React and JSX resources that you can check out. Some other articles, again these are from a few months ago so I'd like to go update them but I didn't have a chance to. And there's a Gutenberg theme there to demonstrate for developers though I think there's a talk on that soon. Some online classes these are paid classes. Zach Gordon and I can't remember the other gentleman's name they both have classes up there. And then Udemy has a bunch of classes that are on Gutenberg not a bunch but like five. The state of the word demo you've probably seen more Gutenberg today than you've probably, the demo isn't as exciting now as it was then. And also Morten Bray and Hendrickson did a great talk about Gutenberg at WorkCamp US so that's a link to that. And that's what I've got for you. Thank you. Finished with about eight minutes for questions which is like a record for me so hopefully it wasn't too fast. Well I'll be here all day and a day after party. No questions? Thank you. Feel free to hit me up afterwards. Ooh, yes? Question, yay! I'm learning JavaScript. So the question was how much time I spend on learning JavaScript and JSX. Well I've been working with JavaScript for 20 years but I'm not somebody who works a lot in the JavaScript libraries that are out there I'm the kind of person who writes JavaScript for a theme and I write a lot of jQuery and I get things done but I wouldn't call myself a power user so 20 years is probably the right answer. Coming from a theme developer background I probably spent two days like reading through examples and putting together code and pulling my hair out a little bit and putting it back in and getting it to this state so probably 15 to 20 hours? I might be slow, I don't know. There's a lot of great examples out there and I think part of the trick for me was that I wanted to do it in ES5 and so some of the articles weren't as helpful. I just kind of wanted to make it as easy as possible to come in and use the examples if you weren't comfortable using a package manager even though they are wonderful. So I think the question was how would it affect sites using Divi? I believe I mean Divi is obviously preparing for Gutenberg but I believe that Divi's editor will just proceed Gutenberg. You will still see the Divi builder in your themes. I'm not sure if there's anything in their themes that's really going to use Gutenberg but certainly they're looking at it but my understanding is that the Divi editor essentially replaces the normal editor in the same way that Gutenberg does so you won't get both, you'll get the Divi editor. If somebody else knows correct me because like I said okay, I'm not an expert I just play whatever I can. At the top of the Divi editor it'll ask you if you want a new standard and it's like pretty Gutenberg today it'll ask if you want a standard editor or if you want a visual builder and if you have Gutenberg installed it has the third option. So just to repeat that for people watching the video Gary Thayer was kind enough to say to point out that since Divi has buttons already at the top of the editor that you use the Divi builder or the standard editor that if you have Gutenberg installed there is an additional button there so there probably is some interaction there or there at least are just accommodating for it but if you're used to using the Divi builder you'll still use that in a Divi site. Just a couple more minutes, anybody else? Thank you very much.