Gutenberg is the default editor used in WordPress 5.0. As a replacement for the TinyMCE editor, Gutenberg allows you to make posts in WordPress more interactive.
After the WordPress 5.9 update, Gutenberg even includes all aspects of customization to deliver an FSE (full site editing) experience. This means that you can design and design an entire WordPress website with this editor.
You can add website elements such as paragraphs, headings, lists, buttons, widgets, video or photo content, and columns using blocks. Gutenberg also displays page visuals better so that it is similar to a website builder, not just an editor.
Let’s continue reading, because in this article we will explain further how Gutenberg WordPress works and how it differs from the previous editor. Apart from that, we will also show you how to use the WordPress Gutenberg editor. Let’s Begin!
Gutenberg vs Classic Editor
Although the functionality is more or less the same, there are significant differences between Gutenberg and the classic WordPress editor. The difference between the classic editor and Gutenberg is:
1. Interface and display
Classic editor has the appearance of a simple text editor like Microsoft Word. Meanwhile, the block editor has a responsive and intuitive interface, complete with clear and easily accessible icons.
2. Content creation
The classic editor provides blank areas for writing posts and pages. In contrast, WordPress Gutenberg has more features for creating content and customizing content visuals.
3. Ease of use
The Classic editor will be easier to use if you know basic HTML, while the Gutenberg editor is easy enough for beginners. You can arrange blocks with drag-and-drop functionality to create web pages and posts.
4. Features
Even though it has basic features for editing websites, the classic editor is less flexible in terms of design, making it less suitable for websites that have a lot of media content or complex layouts. Well, the WordPress Gutenberg editor has more design features, such as reusable blocks for creating page templates.
How the WordPress Gutenberg Editor Works
Gutenberg uses the concept of individual content blocks to add and edit various elements in posts and pages.
You can arrange and customize the appearance of each element of this block. For example, you can choose a different background color or width for the entire block without affecting other elements.
To find all available blocks, click the “+” icon (Block Inserter). You will see an automatic panel that lists all the blocks according to their structure. Each of these blocks has its own configuration and design tools.
For example, the paragraph block (paragraph) provides options to change the color and format of the text. Meanwhile, the image block has tools for adding alt text and adjusting image dimensions.
How to Use the WordPress Gutenberg Editor
The Gutenberg Editor is designed to make it easier for you to create and manage WorPress websites. In this section, we will provide a complete guide on how to use the WordPress Gutenberg editor to create and edit blocks.
1. How to Create a New Block
To add posts, you need to create a new block first. Don’t worry, it’s not difficult! We will help you step by step.
First, you need to add a title block (main title of the article). Hover over the heading block and follow these steps:
– Select the “+” icon from the top toolbar to add a block.
2. How to Add Headings and Text
Next you need to add headings and text. Headings have several levels that indicate the level of importance of the information discussed in your website content.
Basically, this level is similar to a list of titles and subtitles in academic papers or papers, where H3 is part of H2, then H4 is part of H3, and so on.
Here’s how to add headings and text in WordPress Gutenberg:
– Select the “+” icon on the top toolbar. Or, select the “+” icon in the content editor area.
– A list of available WordPress blocks will appear. Click Headings.
3. How to Add Images and Media
You can add images and media files using the Block Inserter or the “+” icon in the WordPress Gutenberg editor area.
Here’s how to add images and media in the Gutenberg editor:
– Click the Block Inserter “+” button on the top toolbar.
– A list of available blocks will appear. From here, select the Image block.
4. How to Arrange Block Sequences
In Gutenberg, you can arrange block order in 2 ways via floating toolbar. In the first, use the six-dot icon to select multiple blocks at once and move them anywhere with the drag-and-drop function.
5. How to Add (Embed) Media
For including content from other platforms, the WordPress Gutenberg editor has its own section that allows you to add and embed media files from various sources.
Here’s how to add media in Gutenberg:
– Click the “+” icon from the top toolbar.
– Scroll down to find the Embeds section.
– Select the media you want to add.
6. How to Create Reusable Blocks in Gutenberg WordPress
Reusable blocks are collections of content snippets that can be used repeatedly in any area of the website so you can work more efficiently.
It works the same way as templates, so if you update reusable block content, all pages and posts that use it will be updated too.
How to create a reusable block in Gutenberg is as follows:
– Select the part you want to save as a reusable block.
– Select the three dots icon from the toolbar and click Add to Reusable blocks.
7. How to use Block List View
You can click Block Inserter to search for other blocks. However, if you use nested blocks (multilevel blocks that protrude to the right), you may find it a little difficult to find the block you want.
Also, having too many blocks will also make it difficult for you to browse through them.
Well, to make this process easier, the WordPress Gutenberg editor has an option Block List View so you can see each block that is being compiled, including nested blocks with indents. Just click the List View button on the top toolbar.
Blocks vs Widgets
Widgets are one of the earliest WordPress features created to make it easy to create and manage website content without coding.
However, legacy widgets have limited formatting options and require a lot of manual steps to modify them because they are created with the classic widget editor. In addition, widgets require additional plugins to add other features.
Since the WordPress version 5.8 update, block-based widgets have started to replace the classic version. The new features include many improvements that make it easier for users to customize website pages, even in areas that were previously quite limited.
The block editor also includes ready-to-use block-based widgets that can be used without additional plugins or code, such as custom HTML, calendar, page list, recent posts, social icons, and tag cloud.
Conclusion
Gutenberg is a built-in WordPress content editor that can be used to create posts and pages. This editor has default blocks for every element you need to create a website, such as paragraphs, titles, images, embedded media, widgets, and columns.
This WordPress block editor also includes more advanced updates, such as a user-friendly interface, easy-to-use tools, and additional features that support FSE (full website editing).
In addition, you are free to add and customize new blocks, headers, and text, insert images and media, organize multiple blocks at once, and embed third-party content.
We hope this tutorial will help you understand how to use the WordPress Gutenberg editor better. If you have questions or suggestions for this tutorial, don’t hesitate to submit them via the comments column below.
[hurrytimer id=”247″]
