A lot of people may have come across the term “Gutenberg”, and a name like this may lead one to believe that it is a city or a town. However, to those new to the world of website creation, “Gutenberg” (GB) actually refers to a page changer on WordPress that you can use to create pages for your website, this is known as the Gutenberg block editor (or modifier).
The Gutenberg Editor has become an integral part of WordPress since December 2018, replacing the WordPress TinyMCE as the default page creator on WordPress. As a result, if you are using a version of WordPress above 5.0, you will most likely have this block creator as the default page creator.
In this article, we will be looking in detail at some of the key concepts of this block modifier, what it is, how it works, what it does, etc. As a result, by the end of this article, you too will have a solid grasp of the GB editor.
Please note that the GB block editor is often referred to as “WordPress editor” or the “WordPress block editor” in other sources, so don’t be confused if you come across either of these two terms.
What is the Gutenberg Editor?
Let’s start from the very beginning.
The Gutenberg block editor was first introduced on WordPress in December 2018, and over time it became part of WordPress’s core software. As a result, this block editor replaced the then-existing page editor, TinyMCE a.k.a the classic editor, as the default page editor for creating web pages on WordPress.
To make a long story short, the GB page creator is simply a web page creator that adopts a new style for creating web pages. Unlike its predecessor, which has a more code-based approach to creating websites, the GB modifier uses a “block-based” approach for adding content to your website. Furthermore, the entire concept of “blocks” will be further explained in an upcoming section.
For the time being, this is the background information that you will need about the GB block modifier to fully comprehend what is going to come in the upcoming sections.
What Can be Created Using the Gutenberg Editor?
The block modifier can be used to create many web pages that might be related to your website. Let’s take a look at a few of them.
1- Store Locator Pages
Users who have an online store and physical store can use this block modifier to create a store locator page that easily and accurately guides online visitors to your physical store so that they can make an in-person purchase.
You can use store locator plugins, such as Agile Store Locator or WP Maps, to add a store locator page to your website through this modifier.
2- Product Pages
The Block editor (GB) can also be used to create product information pages that provide much more detailed product descriptions.
You can even make product demonstration pages that give your customers a much better idea of your product.
3- Blog Posts
You can use the block modifier to create blog posts about interesting topics for your online visitors to read about.
4- Contact Page
Do not forget to include a contact page on your website, which can also be created by the GB block modifier.
A contact page ensures your customers have the means to communicate with you.
5- Timelines
The Block editor can also be used to create a timeline for your website or blog. A timeline is added through the use of timeline plugins, such as Post Timeline.
6- Feature Pages
Last but not least, you can use the Gutenberg block editor to create feature pages for your product(s).
Does WordPress Use Gutenberg?
Yes. The GBblock editor has been a part of WordPress since it was released in December 2018.
Nowadays this block changer is the default page creator for all WordPress versions above 5.0. Therefore, if you have WordPress version 5.0 and above, you will most likely have this editor as the default page creator.
In some cases, a few people have opted not to update their WordPress software. As a result, they may be running a version of WordPress below 5.0, which is equipped with the classic editor.
Do I Need to Install the Gutenberg Editor
All versions of WordPress at 5.0 and above come with the Gutenberg Block Creator already preinstalled. Therefore, if you are using a version of WordPress that is 5.0 or above, you will not need to install the editor.
However, if you somehow manage to obtain an older version of WordPress (below 5.0) then you may need to install the Gutenberg separately.
How Do I Use the Gutenberg Editor on WordPress
In this section, we will cover the basic concepts of the Gutenberg page creator, and how you can use it on WordPress.
There are three main parts of this block editor. The blocks, the top toolbar, and the settings side panel. Moreover, we will be going over all of these parts in the below section.
1- Blocks
The first thing you will need to understand is how this block modifier works, i.e. how content is added or removed to make a webpage.
The block editor creates web pages using a series of “blocks”, hence its name. These “blocks” are like compartments that hold a certain type of content. So you can have blocks for text, headings, images, videos, timelines, store locators, etc.
Creating a web page or post on the block modifier is very intuitive. You are provided with a blank screen that acts as a canvas for your webpage. All you need to do is add different types of blocks, using the block inserter, to add different types of content.
Block Editor
The blocks also display a formatting toolbar when you hover over them. The formatting toolbar is used to
- Change font type (bold and/or italic)
- Insert or remove links
- Change text alignment
- Transform blocks into another one
- Delete blocks
- And much more
For example, let’s suppose you want a web page with the following design:
- Header
- Text
- Text
- Image
- Video
- Text
To create a webpage with the above design, you will need to select 6 blocks from the on-screen block menu. Once you select a block, you can proceed to fill it with its respective content. Moreover, you can rearrange the blocks if you feel Once you are satisfied with the content you have added, you can then publish the page.
Note: Blocks 2 and 3 can also be combined into a single block if you want.
2- Top Toolbar
The toolbar at the top of the Block editor is mainly used to make minor changes or edits to your content page, such as undo, redo, etc. The top toolbar also has the following buttons/icons:
- Undo button – Reverts a change to before it was made
- Redo button – Adds the change or edit that was undone
- Preview button – Used to preview the web page you designed before publishing it
- Publish button – This is used to officially publish the web page you designed for your website
- Information button – Provides information such as words, characters, blocks, etc. for the current session
- List view button – Displays all the blocks on the current session as a list
- WordPress button – This button will take you back to the WordPress admin page
- Settings icon – Provides access to the settings side panel
- Options button – Provide access to the options menu
3- Settings Side Panel
The third important part of the block editor is the settings side panel, which can be accessed through the “Settings” icon on the top toolbar.
The settings side panel has two sections:
- The Post Tab – which is used to configure post-related settings such as Featured images, Tags, excerpts, Publishing Options, etc.
- The Block tab – is used to make block-related settings such as block size, font, alt text, etc.
Together these 3 elements, blocks, toolbar, and settings panel form the core workings of Gutenberg. With the basic knowledge of these 3 elements, you can confidently begin using and experiencing this page modifier at almost its full potential.
Is Gutenberg Editor Good?
By now you may be asking yourself, “is the Gutenberg editor good?”
Well, it is certainly a step up from the previous classic editor that was available on WordPress. The classic editor offered a very simple way to add content to your website and this, therefore, limited the flexibility of the classic page creator.
With the classic editor, you are provided with an area where you can add text, headings, images, videos, and links. Furthermore, you have the option to stylize certain text such as making the text bold, underlined, strike-through, etc. And this is pretty much what you can do with the classic page creator.
Gutenberg provides a much more interactive and visual approach to creating web pages. What this means is that each type of content is compartmentalized into separate “blocks”, so you have separate blocks for :
Block Editor Elements
- Headings
- Text
- Images
- Video
- Widgets
- Audio
- Tables
- And much more
So the main advantage of the Block editor is that you have content in individual blocks, and each of these blocks is independent of the others.
This means that if you want to change/edit a certain block, the others will remain unaffected. As a result, you can safely change or edit a particular block without worrying about messing up the rest of the page.
The blocks on the block modifier can also be rearranged according to your needs. For example, let’s say you created a web page with the following sections, heading, text, video, text, and you wish to move the video to the very end (heading, text, text, video).
In the classic editor, if you want to move the video, you will need to first delete the embed link, and then create another embed link after all the text sections. Whereas, using the block modifier, you can simply drag the video block and move it to the bottom.
Lastly, having content blocks in Gutenberg reduces the need to add shortcodes for every piece of content you need to add. Furthermore, more and more third-party developers are developing blocks for many different types of content such as timelines, WooCommerce plugins, etc. which you can easily add to your website by adding a block.
In conclusion, the Block editor is certainly a major upgrade from the classic editor because it makes creating web pages more smooth and hassle-free.
So the short answer is that Gutenberg is certainly “good” when compared to the classic editor. However, there are still some page builders, like Elementor, which are rated higher in terms of functionality and flexibility.
How to Create Gutenberg Timelines?
Post Timeline is a WordPress plugin that is capable of creating beautiful and stylish timelines that can effectively and efficiently present information for any project. Furthermore, the timelines created by Post Timeline can easily be added to your website or blog for your audience to view.
Besides the standard vertical and horizontal timeline, Post Timeline is also capable of creating three types of timelines using the block editor.
The Gutenberg timelines capable of being created by Post Timeline include:
1- Chat Timeline – The chat timeline is used to show a conversation history that occurred between 2 or more people. This timeline can present messages or emails that were exchanged between people over a certain period of time.
2- Notification Timeline – The notification timeline can display a series of notifications that were sent or received over a certain time period.
3- Block Timeline – The block timeline provides users with the opportunity to create a timeline with large “blocks”. These “blocks” are large areas that can be used to present information in the form of text and/or images.
Pros and Cons of the Gutenberg Editor vs. Classic Editor and Page Builders
| Pros | Cons |
| More flexible than the classic editor | Slightly less flexible than other page builders in terms of design and layout options |
| Easily re-arrangeable content | Can sometimes be tricky to manipulate text, bullet points, and images, especially if they are in a long post |
| Visual web page designing and creating capability | |
| No compatibility issue with other plugins since Gutenberg is part of the core software of WordPress | |
| No over-reliance on shortcodes | |
| Faster loading content when compared to other page builders |
Is the Gutenberg Editor for WordPress Free?
Yes. The GB page creator is completely free to use because it is the default page creator on WordPress. Therefore, anyone using WordPress version 5.0 and above, will automatically have the block editor installed.
Is Gutenberg Better than Elementor?
And now for the big question, one that is often asked by many people, probably.
Which page builder is better: the Gutenberg editor or Elementor?
To answer this question, we will compare both these page builders side-by-side in a few “rounds”, and see which one does a better job in each department.
Round 1 – Price
Both these page modifiers are free, or rather both have a free version. Moreover, the free version of both plugins is sufficient to design amazing web pages.
There are also premium versions of both these page creators available. The premium version of both these plugins can provide a significant boost to website-creating capabilities.
The GB page creator has 4 premium packages that range from $49 per year to $199 per year, while Elementor has 4 premium versions that range from $49 per year to $999 per year.
When it comes to price, both plugins have a free and premium version. Therefore, for this round, we have to call a tie between both plugins
Round 2 – Integration with WordPress
When it comes to integration with WordPress, the Gutenberg editor has this in the bag because it is part of WordPress’s core system, and therefore it works with every WordPress theme and plugin.
Elementor is a separate entity that works on WordPress, but it is not part of the core software. Therefore, while Elementor may work on WordPress, it can still face some issues integrating with other plugins and other parts of the site.
The winner for this round is the GB page modifier
Round 3 – Ease of Use
In terms of ease of use, once again, the Gutenberg editor has an edge since it is integrated with WordPress. As a result, all themes and plugins work natively with the block editor.
While Elementor is actually a third-party application that can be added to WordPress, this means you will have to adjust to a new type of UI that is different from the WordPress UI. However, the UI is still not that difficult to use, and it works well. Even though there is a slight learning curve.
The winner for this round is the block modifier.
Round 4 – Features
Let’s now look at one of the most essential elements of these page creators. The one element that can determine which plugin is better, and that element is features. Specifically, we will look at key features and advanced features.
Both these page modifiers offer amazing web page creation capabilities. Both offer lots of design options to create a web page that can be pretty close to your original vision. In addition, both plugins are responsive on all devices, and they don’t need any coding knowledge prior to usage.
The main draw of the block modifier is that it uses a block-based system to create web pages. Furthermore, there are a lot of easily rearrangeable blocks you can add to the web page you are making such as headings, images, paragraphs, code lines, and much more.
Elementor also has many of the same features as the Block editor when it comes to designing web pages. However, Elementor does not use a block-based system, instead, it uses a drag-and-drop interface where users create a web page by dragging various widgets (text, images, videos, etc.) onto the page builder.
When it comes to advanced features such as dynamic content, motion effects, line modifying, marketing tools integration, landing page creation, etc. Elementor is one step ahead of its competition because it has many of these features available by default. However, you can still access the same features on the GB editor, but you will need to install separate plugins that provide these advanced functions.
In this round, the winner is Elementor for having more readily available advanced features and also for having many of the core features that are also present in the GB editor.
Round 5 – Page Speed/Response
The block modifier has a slightly faster page loading speed due to the following reasons:
- It’s simple
- It’s efficient
- It uses fewer features that add file size to your website
- It is a part of WordPress (as we have mentioned countless times)
That is not to say that Elementor is slow by any means. Despite being a third-party plugin, Elementor still does a great job in the page loading and responsiveness department. However, the GB editor slightly edges it by a fraction.
Therefore, the winner of this round is the GB Block Editor
Final Thoughts
In our opinion, there is no clear winner in the battle between these two plugins. For people who want a simple and smooth approach to building websites, it may be better to go with the GB block editor.
For someone who wants more control, more features, and more options, and those who like to go a bit further than what is achievable, then Elementor will be the right page builder for you.
It is also worth noting that, as of the time of writing, Elementor holds a much higher rating on the WordPress website when compared to Gutenberg. Furthermore, the opinion of the masses might just be enough to tip the scales in favor of Elementor.
Therefore, based on what we know, the answer to the question we asked, in the beginning, is that Gutenberg is NOT better than Elementor.
But that’s just our opinion, you and other people may have a vastly different opinion to ours.
Summary of the Gutenberg Block Editor and Elementor Comparison
| Gutenberg Editor | Elementor | |
| Free Version | Y | Y |
| Paid Version | Y | Y |
| Least Expensive Plan | $49 per year | $49 per year |
| Block Editing | Y | x |
| Drag-and-drop Interface | x | Y |
| Live Editing | x | Y |
| Integration Within WordPress | Yes, full integration | As a separate entity |
| Reliance on WordPress Themes and Plugins | Y | x |
| Advanced Features (dynamic content, motion effects, etc.) | Yes, by installing other plugins | Built-in advanced features |
| Customization Option | Y | Y |
| Rating on WordPress Website | 2/5 | 4.5/5 |
Tips and Tricks for the Gutenberg Editor
Hopefully, by now, you might have had a chance to play with the GB editor a bit. Furthermore, now that you have a good idea of the basics of this page creator, you might be interested in a few tips and tricks that will help you use the WordPress block modifier more effectively.
These tips and tricks are bound to help you make using the block editor a more pleasant experience.
1- Drag Images from Your Desktop
If you have many images to add to your webpage, then it can be quite a hassle to upload them one by one onto an image block.
One useful trick is to drag an image from your desktop and place it over the post page. Doing so will add the image without needing to first add an image block.
2- Pin the Formatting Toolbar
The formatting toolbar that hovers over a block, can be pinned to the top of the editor by going to the “options” menu and clicking on the “Top toolbar” option.
Now the formatting toolbar will be fixed at the top of the page, and it won’t get in your way when you place the cursor on a block.
3- Utilize Gutenberg Block Editor Keyboard Shortcuts
By pressing the Shift + Alt + H buttons you will open a list of all the keyboard shortcuts that can be used on the GB page creator.
The shortcuts include:
- Insert new block
- Delete block
- Duplicate block
- Toggle full-screen mode
- Save your changes
- And much more
4- Navigate Using List View
Once you start adding many blocks or have blocks within blocks (inside a column block) it can be difficult to manage all those blocks because you can accidentally select or delete a block.
To help you manage a lot of blocks you can use the list view button located at the top toolbar to view all the blocks in a list. Furthermore, the blocks can be rearranged from the list, and you can open the basic settings for each block.
5- Use Block Patterns as Templates
If you are unsure of what the layout of your new page should look like, you can always use the GB editor’s pre-built block patterns as a template.
Simply click on the block inserter on the top toolbar, and select the “Patterns” tab that appears on the side panel. Here you can select a variety of block patterns to use as a template.
6- Use the Block Manager
If the block editor has a lot of blocks (more added through plugins), then it may slow the WordPress website down. To solve this problem and make the block modifier run faster you can disable certain blocks that you never plan to use.
To disable blocks you can use the “Block Manager” which is accessible from the options menu. Once you have the Block Manager activated you can disable any blocks you want.
Disabled blocks can be enabled back from the Block Manager window.
7- Quickly Insert New Block
Adding dozens of blocks on the block editor can become a bit of a hassle. Luckily, there is a way to quickly add blocks without clicking on the block inserter.
Simply type the forward slash (/) symbol on the page modifier and this will open a small drop-down menu of blocks you can add at once.
Moreover, if you know the name of the block you want to add, you can type the name of the block after the forward slash, and press “Enter” to bring it up. For example, to insert an image block you will need to type “/image”, and then press enter.
Future of the Gutenberg Block Editor
The Gutenberg Block editor has come a long way since its inception. Furthermore, in the near future, the Block modifier plans to gain full-site editing features. This will allow you to create entire websites from landing pages to blogs using blocks entirely.
However, this change might still take some time to come. Therefore, in the meantime, it would be a good idea to familiarize yourself with the current workings of the Block editor to prepare yourself when the full-site editing feature comes online.
Conclusion
In conclusion, it’s clear that the Gutenberg editor is not going anywhere anytime soon. And this is all the more reason for you to get well acquainted with it.
Overall the block modifier has something for everybody. For casual users, it can provide a more flexible way to create web pages using a variety of content. Moreover, even non-developers can easily utilize this page editor to intuitively create complex web layouts using many elements. While for experienced users it can provide more advanced features to take web designing to new heights.
Therefore, the GB editor is definitely worth looking into for almost everyone.