Table of Contents
How To Use WordPress Gutenberg Editor?
Since version 5.0, WordPress has made Gutenberg the default editor. So, of course, all WordPress users need to know how to use the Gutenberg editor. Gutenberg itself offers more modern features than the previous editor (classic editor). An example is the block feature that makes it easy for users to enter various types of content into articles.
Want to know more about how to use the Gutenberg editor? Don’t worry, in this article, you will learn about its various features and how to use them. Let’s get started.
What is the Gutenberg Editor?
Gutenberg is a WordPress editor with a Block-Based User Interface (UI) concept. So content creation in this editor uses a block system.
This editor was released in December 2018, to coincide with the release of the latest version of WordPress. If you have been using WordPress before 2018, of course, you will need to adapt to the features of this new editor.
Before discussing more Gutenberg, let’s first look at how the Classic Editor looks with the Gutenberg Block Editor.
This is what the Classic Editor looks like:
After updating to the latest version of WordPress, the editor will change to Gutenberg.
We can see that there are quite significant differences between these two editors.
The classic editor looks like Microsoft Word or LibreOffice. However, Gutenberg’s editors take a different approach relying on the “block” element.
Through blocks, you can enter different types of content. Starting from images and paragraphs to HTML code. You can also adjust the position of each block by sliding it ( drag & drop ).
Then, are you no longer able to use the classic editor?
Relax, you can still use the classic editor. You just need to disable Gutenberg.
But wait a minute. Before learning how to use the Gutenberg editor, you need to get acquainted with the various interesting features of the Gutenberg editor which we will discuss in this article.
The Basic View of the Gutenberg Editor
First of all, of course, you have to get acquainted with how it looks first. So, the Gutenberg view consists of three main parts:
- Content column – This is where you create content. Starting from the title, writing, images, to your video will be included here.
- Sidebar – In this box, you can make adjustments to your overall content, or make adjustments to individual blocks.
- Toolbar – This section contains several options, such as undo and redo buttons, block navigation, and a publish button.
To be clearer, let’s look at the parts one by one!
Content Column
As the name implies, this column serves to accommodate the content that you create. At the very top, there is a box that says Add title which you can fill in with the content title.
Then, right at the bottom, it says Start writing or type / to choose a block. Here you can immediately fill the content block with anything. Whether it’s writing, pictures, or videos.
When creating content, most of your time will be spent here. But that doesn’t mean sidebars and toolbars aren’t important. Because each part has features that you definitely need. Well, next we will discuss the sidebar and toolbar.
Sidebar
As you can see, there are two tabs you can choose from in the sidebar, namely Document and Block.
On the document tab, you can manage various information related to your content as a whole. For example, in the Permalink option, you can change the URL of your content. In the Categories and Tags options, you can also change the categories and content tags.
Other options in the document tab that you need to pay attention to are:
- Featured Image – This is where you can upload an image to make the “cover” of your content.
- Excerpt – In this section, you can write a short summary of your content which will later appear on the home page of your website.
- Discussion – Here you can activate or deactivate the comments column in your content.
- Post Settings – In this section, you can do several things, such as determining the location of the sidebar, to deactivating the header and footer.
The contents of the document tab will always be the same, unlike the tab block. Because the contents of the tab block will change according to the block you choose. For example, here’s what the tab block contains if you are clicking a paragraph block:
Whereas this is the content of the tab block if you are clicking the image block:
You can see, the settings options that appear are different. This also applies if you click on another block type.
Toolbar
In the toolbar, the options are quite simple. Here’s the explanation:
- Add block – By clicking this button, you can add a block to the content column.
- Undo – This button serves to restore deleted writing or content.
- Redo – The opposite of Undo. This button is used to restore the latest version of your content.
- Content structure – This button will display the number of words, headings, paragraphs, and blocks in your content.
- Block navigation – This button will display a “table of contents” of your content by block.
- Edit – In this section, you can change your cursor mode to edit mode or select mode. Edit mode is useful for editing content, while select mode functions to adjust the position of the block.
- Save draft – This button saves your content as a draft.
- Preview – The function of this button is to preview your content.
- Publish – This button functions to publish your content.
How to Use the Gutenberg Editor
Actually how to use the Gutenberg editor is quite simple. To access it, you can simply create a new article or page by clicking Post > Add New or Pages > Add New.
After arriving at the editor page, all you have to do is follow the steps below:
1. Adding a New Block
Click the “+” button to add a new block. Then, choose the block type you want. Examples include paragraphs, images, HTML, tables, code, embeds, widgets, layout elements, and others.
Another way to add blocks is to type ” / block name “. For example, suppose you want to add an image block, then you can try typing/image.
To make it easier to find block types, Gutenberg divides its blocks into several categories, such as common blocks, formatting, layout elements, widgets, embeds, and reusables.
You can also search for the block manually via the Search for a block column.
Have trouble finding the blocks you use frequently? Relax, these blocks will fall into the Most used category.
Okay, now you know how to add blocks. Next, we will discuss the most commonly used blocks, such as paragraphs, images, buttons, and HTML.
2. Writing
When you want to write a text, you only need to create paragraph blocks :
Then you can immediately fill it with various writings. Very simple, right?
At the top of the block are several formatting buttons. Examples include alignment (adjusting the position of the text), bold (giving boldness to the text), italic (making text italic), and links (inserting a link in the text).
Right next to the link button, there is a drop-down button that displays a few additional buttons:
These buttons also function for formatting, such as highlighting (highlighting certain words or sentences), strikethrough (crossing out text), and underlining (underlining text).
Then, what if you want to write a heading?
Well, different types of blocks are used. So, you don’t use paragraph blocks, but heading blocks.
Just like paragraph blocks, you can find heading blocks in the Common Blocks category. The buttons that are displayed are more or less the same as paragraph blocks.
The difference is, in the heading block you can choose the level of headings that you create. Starting from heading 2 to heading 4.
To set the level from heading 1 to heading 6, you can go to the tab block sidebar.
3. Inserting the Image
Another block you can choose from in the Common Blocks category is Image, aka image blocks.
When selecting an image block, you will be faced with three choices, namely
- Upload – The captured image comes from your computer.
- Media Library – You take pictures that you have previously uploaded.
- Insert from URL – You retrieve an image from the internet by entering its URL.
This is an example of a pre-filled image block:
At the top of the block, there are three buttons you can use:
- Alignment – Adjusts the position of the image.
- Replace – Replace the image with another image (either via upload, media library, or insert from URL )
- Link – Inserts a link in the image.
In the sidebar block tab, you can find several additional options, such as:
- Styles – You can format the picture to be square or round.
- Image settings – Here you can adjust various aspects of the image, from alt text and image size to image dimensions.
4. Adding Buttons
This is one of the features you won’t find in the classic editor, which is adding buttons ( Buttons ).
The buttons block can be found in the Layout Elements category.
To change its position, you don’t click the button but click the block. Only then will the option to change the position of the buttons appear:
If you want to style, color, and link the button, you can change the configuration in the sidebar block tab.
5. Using HTML Code
Are you used to editing content in HTML code? Don’t worry, you can still do it at Gutenberg.
You just have to use the Custom HTML block in the Formatting category.
Enter the HTML code into the column labeled Write HTML. Then click the Preview button to see the final result.
6. Attach content from other platforms
You can also attach content from other platforms. Examples include videos from YouTube, posts from Instagram, or even songs from Spotify.
You only need to select a block that is in the Embeds category.
For example, if you want to attach a post from Instagram, then a block will appear like this:
So, now you just need to enter the URL of the post, then click Embed. Here’s an example of the result :
7. Make Tables
To create a table in Gutenberg, just click the Table block in the Formatting category.
Enter the number of tables and columns you want, then click Create Table. Here’s an example of the result:
If you want to adjust the appearance of the table, there are several options you can use in the tab block sidebar. For example, adding a header section in the Table settings option or changing the table color in the Color settings option.
8. Adjusting the Block Arrangement
If you want to customize the arrangement of each block, it’s really easy. You just select the block you want to reposition, then the 6 dotted button which is to the left of the block. After that, you can slide the block wherever you want.
7+ Extra Tips for Using the Gutenberg Editor
Now that you understand the basics of using Gutenberg, it’s time to learn more complex Gutenberg functions.
But, don’t worry, it’s actually quite easy to apply the tips below. Come on, listen one by one!
1. Give Additional Columns
You may want to include two different types of content on the same line. For example, the picture on the left and the writing on the right:
How to make it easy When adding a new block, select the Columns block in the Layout Elements category.
After that, you need to select the block column type. This will determine the position and number of the column.
Suppose you chose the leftmost option, which means the block will split into two columns. In each column, you can add content directly by clicking the “+” button
2. Doing Block Customization
When you learned the basic look of the Gutenberg editor, you will already know that you can customize blocks via the tab block sidebar.
But, how do you use it?
Let’s take an example. Suppose you just created a paragraph block with contents like this:
To make the paragraph blocks different, you want to make them look dark. Therefore, you go to the sidebar block tab, click the Color Settings button, then change the background color to black and the text color to white.
The block looks even more unique, right?
But, then you want to make the blocks look even more attractive. So you give animation to the block by going to the sidebar block tab, then adding animation to the Animation option. Here is the final result:
3. Editing Content in Code Form
Would you rather edit your content in code? Or maybe you want to check the source code of your content? Relax, Gutenberg has options for that.
You only need to click the three dots button in the upper right corner of the screen, then click Code editor :
As a result, you should now see all of the content turned into code:
4. Tidy up the blocks with the Block Manager
There are tons of blocks you can use in Gutenberg. There are so many, you may find it difficult to find the important blocks that you use the most.
Now, maybe you want to disable certain blocks that you use very rarely. You can do this by accessing the block manager.
The method is very easy. You just have to click the three-dot button in the upper right corner of the screen. Then, click Block Manager:
You will see a list of available blocks. Then, uncheck the blocks you want to disable.
5. Activate Different Modes
There are three modes that you can activate in Gutenberg. These three modes can affect your basic Gutenberg appearance:
- Top toolbar – Moves the block editing options to the toolbar.
- Spotlight mode – This makes you focus more when editing blocks. Because the block color you choose will be lighter than the surrounding blocks.
- Fullscreen mode – View the content column in full screen.
To activate these three modes, you need to click on the three dots button at the top right corner of the screen, then tick the mode you want to activate.
6. Using Gutenberg Keyboard Shortcuts
If you don’t want to be bothered with buttons in the Gutenberg editor, you can take advantage of keyboard shortcuts.
As the name implies, keyboard shortcuts allow you to perform commands simply by pressing keys on the keyboard. As a simple example, you can save your content by pressing the ” Ctrl + S ” button without having to press the Save button.
Now, to see the complete list of keyboard shortcuts in Gutenberg, you just have to press ” Shift + Alt + H ” on your keyboard:
7. Using Reusable Blocks
A reusable Block is a feature that allows you to save the blocks you create. So, you can use it again in the future.
For example, suppose you want to use your block in another post. To make the block a reusable block, you need to click the More options button on the block, then click Add to reusable block.
After that, name the reusable block and click Save.
If you want to use the block again, all you have to do is add a new block. Then, in the Reusable category, select the reusable block that you just saved.
8. Adding Block Variations
There are many block variations that you can choose from. But, maybe you want to add more block variants. Well, you can use plugins to get more block variations.
The most popular block plugin for Gutenberg is Otter Blocks. With this plugin, you can use new blocks, such as slider blocks, pricing blocks, testimonial blocks, and Google Maps blocks.
Apart from Otter Blocks, you can also try using other block plugins, such as Advanced Gutenberg or Stackable. The good news is, you can use these plugins for free!
Let’s Create Content With Gutenberg!
Using the Gutenberg editor isn’t difficult, right? You just have to get used to it. If you want to get the hang of it fast, start by creating content on Gutenberg
Don’t forget to try various features in it. So that you can understand the function of the features one by one.
Still, have questions about Gutenberg? Please feel free to ask through the comments column, or you can also subscribe to get the latest information from us. To learn about other WordPress operations, please follow our free course, WordPress Basics.
ALSO READ: What To Do After Buy A Domain Name? 9 Amazing Things To Do In 2024
