FREELessons: 17Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 A Quick WordPress Gutenberg Tutorial

In this lesson we’ll talk about WordPress Gutenberg, the platform's new content editor. Gutenberg is a relatively new addition—it became available in WordPress version 5—and you can use it to edit posts and pages.

You’re going to learn how to use WordPress Gutenberg blocks, which are individual pieces of content you can simply drag and drop to build a page, and we’ll also take a quick look at the former editor which is now available as a plugin. Use this WordPress Gutenberg tutorial to help you get the most out of this powerful new editing system.

Related Links

3.2 A Quick WordPress Gutenberg Tutorial

Welcome to lesson number six, where we'll talk about Gutenberg. This is the name of the new and improved editor in WordPress, and it's a relatively new addition. It came out in Version 5.0, and you can use it to edit posts and pages. Now, in this lesson, you'll learn how to use the Gutenberg blocks. Which are individual pieces of content you can simply drag and drop, to build a page. And we'll also take a quick look at the former editor, which is now available as a plugin, let's go. Now, before we start, I just wanna mention this. The Gutenberg editor has been covered numerous times here on Tuts+. And I've linked a couple of those videos in the lesson notes, so make sure you check those out. In this lesson, I'm gonna give you the quickest version possible, while showing you the essentials of working with this new editor. So Gutenberg is the default editor now in WordPress. And you can access it by going into editing mode, on a post or on a page. We're gonna be working with posts for now. So the way Gutenberg works is that, on this left side here, on the canvas. You have an exact preview of how the page will look like on the front end, okay? Same colors, same fonts, same everything. However, when we hover or click on individual elements in the page, we have some extra options. For example, when I hover on this paragraph, it tells me on the top left corner here, that it's a paragraph, okay? And when I click on it, we select it, and we have some options here on top. For example, I can change text alignment, I can make text bold, italic. I can create a link or, I have some additional options here. Or I can click this menu button, and I can choose to duplicate it. I can choose to insert a block before or after the block I just selected. I can edit it as HTML, which does this, basically. Or I can add it to something called Reusable Blocks. And of course, I can remove it altogether. Apart from these options, when you select a block, because that's what this is called, a block. We also have additional options here, on the right side. Now, these options depend on the block. On a paragraph, for example, we have a starting text here, telling us, hey, this is a paragraph, and a small description. Then we have text settings, I can choose the font size, or I can edit that in here manually. I can choose whether or not I want this paragraph to start with a drop cap, and I also have access to some color settings. I can choose from different colors, or a custom color, and I can choose the text color here as well. On the Advanced tab, we can add an additional CSS class that we can later use to style this even further, so that's a paragraph. Now, to add the new block, we can very simply click this little button here that says Add block. And Gutenberg, by default, comes with a lot of blocks that are organized in these categories, all right? So we have anything from, common typography blocks like paragraphs and headings, to code blocks, to buttons, columns. We have some widgets here. So let's do, for example, I don't know, a column, let's click this, right? So now we have a column here, and we have a column here. And inside these columns, we can add more blocks. So let's say I want, for example, a title, I can choose to insert a heading, and I can say hello. And I can choose the heading size, I can choose the text alignment. Notice, these option changed when I introduced this new block. On the second half, I can choose to simply just write text, or I can insert another block. Let's say, for example, a quote, so there you go. Now, if we click on the column block, we can choose the number of columns that we want. For me, 2 works just fine. If you wanna delete this, then totally fine, simply click this, Remove block. If we want to change the order of these in the page, it's very simple. Simply hover on the element, and you'll notice you have this options for move down, move up. And we can also drag it, when we get this Mickey Mouse hand. We can click and drag, and we can position this, Anywhere else in the page, and we can do the same with this one. It's really that easy, or we can use the Up and Down arrows. Now, up top, we also have some statistics here. And this is the content structure, it tells us the word count, how many headings, paragraphs, and blocks we have. And also, we get a document outline, title, columns, all right? It gives us a run-down of what's going on in our page, which is really, really cool. And up here, we have Block Navigation, which shows us all the available blocks in our page. And once everything is said and done, simply hit Update. And now, we can go to the front end, and we can see, the paragraph has been updated. Or the post, excuse me, has been updated with our new content. And notice that what you see here is exactly what you get here, in the Gutenberg editor. Well, except for the metadata, but the actual content, which is from here to here, looks exactly the same. And that's the great thing about Gutenberg, what you see here is basically what you get on the real website. And it's really easy to make changes, it's really easy to see your final post, or your final page, directly in the editor. It's fantastic, and it's a definite, definite improvement over the classic editor. Now, before we talk about the classic editor, I just wanna mention a quick thing. Gutenberg, as I was saying, comes with a few predefined blocks of content. But you're not limited to these, you can actually create your own custom blocks. That's a bit more advanced, but if you wanna learn about that, check out the lesson notes. Whe're I've included a link to a tutorial, by yours truly, that shows you exactly how to create custom blocks for Gutenberg. Now, I mentioned the classic editor. Even though that was replaced with Gutenberg, if you want, you can still get it by downloading it as a plugin. And it's really easy to find, simply go to Plugins, Add New. And you'll see here a plugin called Classic Editor, and you would choose to install that. And once it's installed, you just activate it. So now, if you go back to the post, instead of Gutenberg, you'll actually see the old editor. So, I don't know, maybe you would be more comfortable using this, because you were familiar with it. Or maybe you simply don't like Gutenberg, and you decide to use this instead. It doesn't matter, the plugin is there, it's free, you can download it and use it at any time. If, you have this installed, and you wanna go back to Gutenberg, all you have to do is deactivate the plugin. You go to Plugins, find Classic Editor, click Deactivate. So now, Gutenberg is back to being the default editor, all right? And that's how you can edit posts and pages with Gutenberg, pretty cool, right? Now, let's move on and talk about media. In WordPress, we can upload media files in the media library. So in the next lesson, you'll learn how to upload a new media file, how to organize these files in the library. And also how to use them in posts and pages, see you there.

Back to the top