Are you still a little leery about using the visual editor in the new Gutenberg edition of WordPress?
Fear not. It’s really quite easy to use. In some ways, it’s not that much different from the classic editor that you are used to in the pre-Gutenberg era.
Working with Paragraph Blocks
For example, as I’m writing this (and as I mentioned in a previous post), it’s really hard to tell which editor I’m using. (It’s Gutenberg.) That’s because I just keep typing and typing, and when I want to start a new paragraph, I just hit the Enter key on my keyboard.
Sound familiar?
It should, because that’s how you added text in the classic editor. You won’t notice a difference until you move your cursor over one of your paragraphs.
After I added a title to this article but before I started typing these paragraphs, Gutenberg prompted me as to what to do next.
As you can see in the partial screenshot below, a paragraph in Gutenberg identifies itself as a Paragraph Block.
Sorry, but this might get a little confusing as I insert partial screenshots on the same post I’m currently working on.
When you hover over the current paragraph or click on an earlier one, you get an editing menu like the one shown below.
Another difference with Gutenberg Paragraph Blocks is the ease with which you can add new blocks (of any kind) by clicking the circled plus sign at the top center of a Paragraph Block. See below for an example.
Working with Other Standard Blocks
When you click one of these plus signs (which can pop up in other places too), you’ll see a grid of the possible blocks from which you can choose. The Most Used choices are shown below. You can scroll down (in that popup) to see a categorized listing of all the Blocks.
Starting at the top left of the grid, you can see the Paragraph Block, which is the one we’ve been discussing. You probably won’t use it all that much, since (as I’ve mentioned) you can just keep typing and hitting enter to start a new paragraph (block) as you would in any editor. There are times when you will find this option useful though. (You’ll know when you need it.)
The Image Block is the one I chose when I needed to add a screenshot above. Gutenberg gives you the standard options for adding a picture inline in its editor. It doesn’t immediately popup a new window. It looks like this.
From there, it works just like the classic editor did/does.
The Heading Block makes it easy to add (sub)headings to your article. I used it to add the H2 sub-headings above. Gutenberg defaults to the H2 option (which is the one you’ll use most often), but you can easily select any other option from a popup list. It looks similar to the paragraph editing list.
I’m not going to go into detail about the Columns Block here. I may devote another post entirely to it. Don’t let that scare you away from using it though.
Update: I did write a post about columns. Look for it here.
I think the Separator Block needs some work. There’s supposed to be a horizontal line just above between this paragraph and the previous one. Can you see one? I can’t (unless I’m in the editor). This may depend on the theme, but I’ve heard of this problem with more than one popular theme.
The exact look of this line (when visible!) may depend on the theme you’re using – GeneratePress, Oceans, Astra (the one I’m using here), or something else. (Note: Elementor is not a theme; it’s a plugin for styling your site.)
I’m not going to get into the Gallery Block here either. Most people reading this post probably will never need it.
When you select List Block, Gutenberg immediately starts a bulleted list for you, like the one I created below. To “get out of” the List Block, hit Enter instead of typing another list item.
- Paragraph Block
- Image Block
- Heading Block
- Columns Block
You can change the look of the list (making it numbered instead of bulleted, for example) by clicking anywhere in the block and making a choice from the popup edit menu. This menu is again similar to those mentioned earlier, but it has the List Block options included.
I used the Quote Block up above for the apology about the images which might be confusing. The look of such a quote will also depend on your theme.
And finally, I’m going to skip the Audio Block for now too. It’s another one you’re not likely to use.
Categorized Gutenberg Blocks
The above covers most of the blocks you’re likely to use, except the Tables Block, Video Block, and possibly Columns Block. Sure, depending on your situation, there may by others you use more frequently too, but I want to cover those that 80% of the people will use 80% of the time.
If you hit one of those plus signs and scroll down in the popup, you’ll see an “accordion” listing of these categories.
- Inline Elements
- Common Blocks
- Formatting
- Layout Elements
- Widgets
- Embeds
- (and possibly) Yoast Structured Data Blocks
The popup will look something like this after you scroll down.
That last item will be there if you have the Yoast SEO plugin installed, which is one I believe many readers of this post will already have.
Inline Elements and Common Blocks contain almost the same things as the Most Used group. Common Blocks is where you’ll find the Video Block.
In the Formatting group you’ll find the Tables Block. I will likely write more about that one later too.
The Widgets group has some standard items plus some (like WPForms) that depend on which plugins you have installed.
The Embeds group gives you many options for other sites like Twitter, YouTube, Facebook, and dozens more – some of which I’d never even heard of. Virtually all of these are beyond the scope of this post about the basic building blocks of Gutenberg.
As I’ve hinted at, I’ll try to post more later about some of those Blocks I passed over for now. Let me know if there is something in particular you’d like me to expound upon related to Gutenberg Blocks. I will very likely oblige.
