1.2 First Look at WordPress Gutenberg

[SOUND] Hello, and welcome to this Tuts+ Coffee Break course on the WordPress Gutenberg editor. In this course, I'm gonna give you a quick tour of Gutenberg editor. I'm also gonna attempt to pronounce Gutenberg correctly each time, which might be a challenge for me. And I'll talk you through a little bit about how you can help make it better and how you can give feedback on it. So this is the page for Gutenberg on the WordPress Codex. It gives you a bit of an overview of what it's all about and also tells you how you can help improve it. And build the future. And you can do that by sending your feedback. And here there's a feedback questionnaire that you can send either to ask for support questions about Gutenberg, or to send your feedback on it. And you can also use these testing requirements to test Gutenberg. And the reason it's important to use this is so that everybody's testing in a way that's consistent. And helps the team that's developing Gutenberg to make it as good as possible in way that again is consistent. Now Gutenberg isn't yet part of WordPress core but it will be in a future release. And bear in mind that it's a very good chance that it will change in the meantime, partly because of that feedback, and partly because of the work that's still undergoing to make it as good as it can be. But in the meantime, let's take a look at how you can get Gutenberg on your site right now and give you a quick overview of what it looks like. Now the way that you get Gutenberg now, say I'm struggling with the word Gutenberg. These English people who don't know how to pronounce German words. So here's Gutenberg. It's a plug in right now. So if you install this plug in on your site, you will have the Gutenberg editor. I'm gonna have to slow down every time I say that word working on your site. So, let me quickly install that. So, I'm installing the plugin and I'll activate it on my site, once it's installed and then we'll take a look at how it changes the post editing screen. Now, I'm gonna open an existing post on my site. This post here, How to set up SSL in WordPress. Now, you can see that this looks quite different from how it used to. When I hover over things, I've got these icons here that show me that each element in my content has become a block. And if I click in it, I've got something here that looks a little bit more familiar, that looks a bit more like the old kitchen sink on the editor. But you can see I haven't got up here the tabs for the code view and the normal view. Over on the right-hand side, I have a slightly different looking set of what used to be metaboxes, and they used to look quite separate in the old editor. This looks a lot more like the customizer. So if you've been working with the customizer in WordPress, this layout will be familiar to you. So if I click on that, it expands each section. And that makes things a bit neater. It means I'm not scrolling up and down here. So if I'm in a block, which I am at the moment, I can click over here. And see what kind of block I'm looking at. Now let me scroll down and see if I've got any more blocks. I could add some more blocks, so let's click on plus here. Add a block, and I can select any type of block, so if I wanted to I could take some of the content from my existing block that is taken from my file And I could add any one of these as a block. If you're an experienced WordPress user, and particularly if you're a WordPress developer, you might be throwing up your hands in horror at this. But I can see how for less experienced users and people who are more visually minded this will make things seem a lot easier. And it also makes it easier for you to move things around. So let me take this content here. I'm gonna cut that and I'm gonna add another block, make it a paragraph block, and I'll paste that in. So you can see I've got an extra block here, which if I go up and down on the right hand side, whoop. I can select my blogs and I can move them around. So I can move my headings up and down. So Gutenberg is not only letting me create new blogs, it's also automatically creating blogs out of all my headings. So I could move this up and down. It won't make a lot of sense if I do. I won't save this post when I'm finished. And I can also add another block at the moment. Say, for example, an image. And then I'll add an image from my media library, let's see what I've got. A picture of somebody typing, and I can move that around, and we use that one there on the left hand side. So you can see I clicked the up arrow for that, and it moved it above that title. If I click down, it moves it down below. Now this gives you a lot of flexibility when it comes to moving things around in your site and dealing with things in a way that's visual. It also means, you've not only got those text and image blocks that I've just shown you, there are other ones as well. So a list becomes a block all on it's own. Hang on a moment, that's just added a block. So let's see where I've got a list already. Now, this one hasn't been recognized automatically from the existing content and set up as a block. And if I want to split that up, I can. I can convert it to blocks. So I click over here on the right hand side and I click convert blocks. And you can see Gutenberg has very cleverly separated out my headings. My individual paragraphs and you can see each time I scroll over one I've got these little controls on the left and the right hand side. Get another paragraph and list here. Another heading and the list, headings, paragraphs, and so forth. So it's really quick and easy to convert your existing posts into Gutenberg compatible content. I said Gutenberg and I didn't mispronounce it. And you'll remember at the beginning, I said that there wasn't the tabs at the top for the Text view in the code view. Instead of that you can just work on the code for an individual block. So if I click over here on this control, I can select Edit as HTML and then I can edit that particular block. So let's go back to it visually and let's take a look at a list that's got some code in it. Edit as HTML, so I can very quickly just work with an individual part of my text instead of having to look at the whole thing via code. Now if you're anything like me and you've had to dig deep into the code behind a long post. For example, if you want to add code tags around something like this, it can be really confusing actually trying to find the bit of text that you've been working with, and that you want to add the tags around. So this makes it much, much easier to work with a specific piece of code. Or with a specific piece of text that's got code tags in it. So, blocks are the thing that really make Gutenberg what it is. And I hope this has given you a bit of a feel for blocks and how they work. A block is basically equivalent To an element in your html. So if you were to have a look at the output markup for your file, you would see that each of these were at the same level. So you've got headings, paragraphs, lists and they're all about the same level within your html. Now let me see if I can split my list. Now I can't split my list further. But I can convert it into a shared block. So I can convert it back to share it to something else. Or I can turn it into a paragraph if I want to. So I then have two paragraph blocks, one for each of my list items. Let's undo that. And this is the really useful thing that Gutenberg has added. We've got an Undo button up here. There we go. So that's now back to being a list. And if I want to, I can add links. I can do indentation. So I can indent different items in my list. There you go. So I've got different levels of indentation, which is really quick and easy to do visually Or I can turn it from a bulleted list to a numbered list really quickly. And now that I've converted this into individual blocks. You can see if I go over here, it has paragraph blocks, and I can change them at the settings within my block. So that would change the whole block. And that can also be accessed via this Advanced Settings over here. So I can show that and hide it. So if I hide that, I get a nice, clean editing experience. So that gives you an overview of the main things that you can do with blocks in Gutenberg. You can change the type of block something is. You can edit the underlying code. You can duplicate them, you can merge them, you can split them up. And you could also move them around within your document. I haven't used Gutenberg on our live set yet. But running through it for this course has made me quite excited about how Gutenberg works and how it can help me with managing my own content, and editing my own content in my WordPress site. I hope Gutenberg will be helpful for you and I hope you found this course useful. Thanks for watching.