7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 6Length: 37 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Adding Text Blocks

In this lesson, I’ll show you some of the first blocks you’re likely to use in WordPress Gutenberg. You’ll learn how to add blocks for text, headings, and lists.

Related Links

1 lesson, 00:41


2.Working With Gutenberg Blocks
2 lessons, 16:23

Adding Text Blocks

Adding Image Blocks

3.Going Further With Blocks
2 lessons, 17:53

Advanced Block Editing

Creating and Using Shared Blocks

1 lesson, 02:29


2.1 Adding Text Blocks

Hello, and welcome back to this Tutsplus course on WordPress Gutenberg. In this part of the course, I'm going to show you how to add text box with Gutenberg. Specifically, blocks for normal text and paragraphs, blocks for lists, and also blocks for headings. So I've already installed the Gutenberg plug in and I've got some posts already on my site but in this case I'm gonna add a new one. So here's my new post with Gutenberg enabled. You'll see that it looks quite different from how the editor used to so I'm gonna start off by adding my post title. Making sure I type it correctly. So there we go. Now Gutenberg has already opened a new textbox for me, so I can just type whatever I want to in here. So, there's my first block. It's a paragraph. And you can see that I can edit things around here. So, I can transform it into a different type of textbook if I wanted. So I could make it a quote, for example. And then that would be formatted according to my theme, or I could make it back into a paragraph. I can do preformatting, so that means it looks like code. So that's like getting a pre-tag. Let's transform it back to a paragraph. I can create a subheading from it, which again, I don't want to do. I'm gonna transform it back to a paragraph. Or I can even make it a verse if I want to, but that seems to delete half the content of my paragraph, so I'm not gonna do that. So I'll keep that as a paragraph, and now I'm gonna add another block. So to add another block all I need to do is hit return at the end of my paragraph, just as you would when your typing a paragraph in the old WordPress editor. So you don't need to worry about clicking any buttons or anything like that, although you do have the option to do that because there is this add block button up here. You would use that if you want add a differing type of block. That isn't text. But for now, we're working with text. So adding that, so that has created, because I hit Return again, that's created its own block, which at the moment is a paragraph block. Now I'm gonna transform that into a Heading. And then I can specify which Heading type I want to use, so I'll make it H3. And that is my post heading and what that's shown as, what tag that goes in when it's output on the page, will depend on your theme. So in some themes, your post title might be an H1, or in some it might be an H2 with the same of the site as the H1. So here I have another text block which I've added. And I'm going to turn this into another paragraph. Which will introduce a list. Now if I hit return, here, [SOUND] It will create three separate paragraph blocks. But I can highlight them all and what I used to do in the old editor was select all those and then convert them into a list. So I can do that right up here by transforming into a list. Alternatively, I could have started typing one of my items. Use this option here to transform it into a list, and so like that. So you'll see there are two ways to create a list. You can either select a number of existing paragraphs and use this. Now hang on, let's this option up here [LAUGH] You can see I need to have this, the right sort to paragraphs. But you saw what I did, I could select a number of paragraphs and then there was an option at the top to convert them into a list or I can type the first paragraph and then turn that into a list. So if I'm at the end of a list and I want to go back into a normal paragraph. I could either use the plus link here to create a new block, or I can just do exactly what I would have done in the old editor and hit Return twice, and that opens a new paragraph. So now I'm going to introduce a numbered list. This isn't a numbered list right now, but I can turn it into one by clicking the numbered list icon there. And you can see I can also add other text elements such as bold, italics, strikethrough, and links if I want to. So if you look at each of these blocks, you'll see that there are formatting options that are relevant to the type of block it is. So here, I can change the alignment in my paragraph. In my subheading, I can change the tag that it will be in. In my list, I can change indentation, numbering, and bullet points. Or I can convert it back into a paragraph or a quote if I want. Let's finally add a quote. So I'll transform that into a quote. And you can see again that there are options there that are relevant for a quote. So there are two different styles that I can use that are defined by my theme. So that is my second style and my citation goes here. Now having added that quote, if I hit return, it just stays in my quote block. So to create a new paragraph block under that, I'll need to click this add block button. And I'll select paragraph. So there's my final paragraph in my very short and not particularly useful post, but that shows you the different options that you have for text blocks. So that's how you create text blocks using Gutenberg. In the next part of the course, I'm gonna move on to show you how to create different types of image blocks. See you next time and thanks for watching.

Back to the top