If you’ve landed on this article, it’s because you’re going to use WordPress to create your website and you’ve probably heard about the Gutenberg editor.
This web editor is the official one by WordPress and it’s been having several updates and improvements for a while, to become one of the most valued options by users.
It was launched back at the end of 2018 and today it has more than 300,000 active installations. It must be for a reason, right?
In this article you’ll have at your disposal a complete and fully updated Gutenberg WordPress tutorial with the changes and new features of the 5.0 version.
Table of contents
What is the WordPress Gutenberg editor?
The Gutenberg visual editor is nothing more than a page layout plugin to build your website with WordPress. This is the WordPress editor that comes by default from its new 5.0 version.
It has been designed in such a way that it’s accessible to any user, from the beginners who open WordPress for the first time, to the professional who has spent years working with it, as there’s the possibility of editing with code.
The structure is intuitive, you can easily create a blog or create pages without having to download more plugins, themes or add-ons.
In short, if you’re thinking of editing your website and don’t want to spend money on a layout editor, the WordPress Gutenberg editor is your solution.
How to install the Gutenberg editor
Although it’s currently the default editor for WordPress 5.0, it may not yet be fully incorporated to your page or maybe you haven’t updated your WordPress. So if you have any doubts about it, the safest and easiest thing to do is to download the Gutenberg plugin by following these steps:
- Open the WordPress admin panel.
- In the left column go to Plugins.
- Click on Add new plugin.
- Type in: Gutenberg.
- Click on Install.
- Click on Activate.
Just like that, you should have the Gutenberg editor up and running.
Gutenberg interface
Before you start, as with any layout editor, you need to know some basic principles about its interface. This way you’ll avoid confusion and you won’t waste time later in fundamental aspects such as editing pages or entries.
Toolbar
When you add a new page or post, you’ll see many options on the left, right, top or bottom.
At the top you’ll find a plus icon, arrows, an info icon, a cloud, the preview, the publish option and 3 dots. This is called the toolbar. With the toolbar you can do the following:
- Add a new block.
- Undo or redo changes as needed.
- View an outline or table of contents.
- The cloud is to indicate automatic saving.
- See a preview of the content you’ve created.
- In the publishing option, you can set the date, time or the visibility you want to give it.
- Switch from visual editor to code.
- Copy all the content.
As you can see, the Gutenberg toolbar is easy and intuitive.
Content area
The content area is mainly where we’re going to create the content. Here we have a myriad of options.
When you select a block in the content area, a small toolbar will pop up where you can include bold bold, italicize, include links, and so on.
Each block has different editing options, as each has totally different functions.
The Sidebar
The sidebar is located to the right of the content area. In it we can state the document settings or the settings of a specific selected block.
Gutenberg Blocks for WordPress
In this Gutenberg WordPress tutorial we’re going to focus on blocks. Gutenberg blocks give you all the options you need to be able to create a website like a pro.
These blocks are small boxes that are inserted into the content to edit it visually and give functionality to that particular section. In addition, you can duplicate them, move them wherever you want or delete them. And as if all this weren’t enough, if you click on the 3 dots inside the block, you can see even more settings that you can apply.
Gutenberg has so many interesting blocks that we’re going to show you each and every one of them, so that you can make the most of this visual editor.
Normal Blocks
If you’ve never made a website before, it may feel like a mystery to you. But the truth is, these Gutenberg blocks will look familiar to you, as they’re basic editing blocks like the ones you can find in Microsoft Office Word.
They are mainly for adding or editing text, images or multimedia.
Paragraph block in Gutenberg
In this block you can create text and then edit it with the small toolbar, inserting links, bolding, crossing out or aligning the text.
You also have advanced settings in the sidebar, where you can select the font size, background or text color or even align the different blocks.
In case you’re a professional or have knowledge of CSS, the Gutenberg editor has a section to add additional CSS to each block.
Header Block
The headers are the ones that mark the hierarchy of h1, h2, h3… tags in order to structure the content correctly.
The header block contains the “h” tags and can be customized just like a text or paragraph.
Image and Video Block
In this section you can insert any image and edit it to your liking, aligning it to the right, left or center, as well as inserting a link in the image that will lead to a landing page. You can also adjust the size of the image or video.
Column Block
These blocks open up a multitude of options, both in terms of design and organization. You can add different blocks within the column block and play around with images, text or any other block.
It isn’t recommended to add too many columns. Between 3 and 4 as maximum would be optimal, since, at design level it wouldn’t be correct.
Lists block
Controlling this block is very important, because whenever we want to explain something and we want it to be clearly understood, we use lists with dashes, dots, or by numbering by parts.
In Gutenberg you have different options to make a list:
- Numbered list.
- Normal list.
- Enlarge or reduce indentation.
- Apply formatting bold, italic..
- Custom CSS.
Quote block in Gutenberg
Mainly used to add and highlight a sentence and put the author of that sentence. Or to make a specific note that you want to make stand out so your reader can see it easily.
Cover block
With this block you can put text on top of an image. You may not believe it, but this block didn’t exist and it was very difficult to put text over the image if you didn’t know HTML.
Now you have the option to put a big headline in full screen with a background image.
File Block
Very useful when you want the user to download a file like a .pdf or any other. It works similar to images or videos, just upload the file and your user will be able to download it.
Format Blocks in Gutenberg
The formatting blocks that we’re going to see in this Gutenberg for WordPress tutorial are especially interesting, as they allow you to give the format you want to the content, which is usually edited with code.
It’s true that these are blocks for people with more experience in WordPress or with knowledge of HTML or CSS. However, you can learn the basics about it and create small formatting blocks.
Code Block
Used to display snippets, i.e. small code snippets. It’s mainly used to add the code snippet you want displayed and let the user see it as it is, so they can copy it directly into their website’s code.
This block can be used with any coding language, be it HTML, JavaScript, PHP, CSS, etc.
Custom HTML Block
If you’re one of those who love to edit content with HTML, this Gutenberg block will become your favorite.
Sometimes editing the entire post with HTML can become tiresome or not optimal for you. Gutenberg’s new custom HTML block allows you to edit block by block without having to edit it all at once and search through a sea of code.
Plus, you can see how your HTML content looks visually.
Preformatted Block
The preformatted block is very similar to the HTML block, with the difference of being able to add bold, italics, links, etc.
It is also important to know that no tags are used.
Table block
We couldn’t miss this block, which as the block of lists or columns, serves to organize the content visually and explain data to the user in an easy way.
There isn’t much mystery, you select how many columns and rows you want to add and you can display the data you need.
At the moment it’s not possible to get the most out of it, it’s nothing like Excel. But to show some simple comparisons or to expose some basic data, it’s ideal.
Design Blocks
At this point in the Gutenberg for WordPress tutorial, let’s take a look at the new developments in the layout block from the new editor. Indeed, they’ve included some new features that can save you a lot of headaches or at least a lot of time.
Page Break Block
Have you ever entered an online store or blog and had to go to the second page?
Well, that’s called a page break and you can do it too thanks to this Gutenberg block. You can select from which part of the content you want to create a new page, to which the user must go to continue reading.
Separator Block
In Gutenberg’s WordPress 5.0, this block – as the name suggests – serves to separate one part of the content from another by means of a line.
Spacer Block
If you’re one of those who find it ugly to use the tabulator too much, this is the block for you. With it you can create a space between one block and another to exponentially improve the design of your content.
You’ll never have your content crammed together again!
Button Block
This cool block is the closest thing to a Call to Action (CTA).
You can insert a button anywhere in your content and make the user travel to another page thanks to a link.
The design of this button will depend mostly on the WordPress theme you’re using or if you know how to play with the CSS language.
Read more block
You think that you’ve written too much?
If you feel like you’ve written too much, don’t worry. Gutenberg has listened to you and has set up this block to solve this.
With the Read more block, you can mark a limit on the part of the text you want and put it visually as a short excerpt with the possibility to click on the Read more button.
When the user clicks on Read more, the remaining text will be displayed.
Media and text block
We come to the last, but not least, design block of the Gutenberg editor.
If you go to any website right now, you’ll surely find media and text blocks. This is a great way to visually explain something with the support of text.
Just add an image and, to the left, right or below the image, you can put a little explanatory text.
How to add more blocks in WordPress
Did that seem like a small number of blocks to you?
The truth is that in this Gutenberg for WordPress tutorial we’ve seen a lot of blocks. However, we always want more and we always want to see the possibility of having even more options.
The Gutenberg editor thought about it too, that maybe you needed new or more features, so here are some plugins available to have more blocks:
- Gutenberg Blocks – Ultimate Addons for Gutenberg
- Advanced Gutenberg
- Stackable – Gutenberg Blocks
Don’t worry, these plugins are totally free and can offer you new features, such as putting a Google map in your content or adding a price list.
Reuse blocks
What’s this about reusable blocks? Well, if you’ve come this far, you’ve just discovered a particularly unique feature that Gutenberg has built into its editor.
I’m sure you’ve spent a lot of time customizing a block, colors, text size, line spacing… and you’ve wanted to duplicate it. With Gutenberg you can use the function to reuse the block.
It’s like a giant clipboard where you can save all your custom blocks, name them so you can keep them organized, and reuse or duplicate them on other pages or wherever you want.
Isn’t it great?
Pros and Cons of the WordPress Gutenberg Editor
If after reading this Gutenberg for WordPress tutorial you still have any doubts about whether or not to use this editor, I’m going to summarize the advantages and disadvantages.
Advantages of Gutenberg for WordPress
- Multitude of editable blocks.
- You can use the classic editor.
- You can use Gutenberg even if the website is already created with another editor without breaking anything.
- Each block has its own custom settings.
- You have a section where Gutenberg will inform you about the blocks used, words written, total paragraphs characters and a header scheme.
- It’s easy and intuitive to use, no great knowledge is required.
Disadvantages of Gutenberg for WordPress
- It still needs a lot of development to match a professional layout editor.
- It isn’t compatible with some other content editing plugins.
Conclusions
Gutenberg editor for WordPress has developed an incredible update since its inception, now we can say that the default WordPress editor is useful and effective.
Despite seeing so many blocks and so many options, when you start using it, you quickly get the hang of it and of all the features.
In short, Gutenberg is here to stay and there’s no doubt that it’s a great option to carry out your content and succeed in Google SERP.
I invite you to try it and play with each and every one of the blocks that Gutenberg offers. And make sure to leave your comment if you have any!
Deja un comentario