In this article, we will discuss a comprehensive tutorial of how to use Gutenberg block editor on WordPress.
We will go through:
- Short overview of the Gutenberg
- How is it different from Classic Editor
- Different sections and blocks available on the editor
- FAQs that might rise while upgrading your WordPress website into Gutenberg
So, if you are a WordPress newbie or users that have been working on the classic editor for ages and want to try out the new editor, then this is the article for you.
At the end of this blog, you will be able to master this new block editor and create stunning blog posts and pages.
Gutenberg – Overview
Gutenberg is a brand new block editor for WordPress that was introduced on 6th December 2018 along with the release of WordPress 5.0. Since then, it has replaced the TinyMCE editor and is the default editor for WordPress website.
It contains many cutting edge features to easily create any web content (blogs and pages) using content blocks (small drag and drop units).
What are Content Blocks?
Content blocks are the elements you add on the edit screen for the content creation. It can be the elements like text, header, quote, multimedia etc to help users create great content with less effort on custom programming.
Why Gutenberg was Introduced on WordPress?
Previously, WordPress used a TinyMCE editor for creating contents for any page, post or custom post types. It is a tool for writing, formatting text, adding images, etc. However, if you want to get more customization and configuration options, then you would either install a WordPress plugin or write codes.
So, to come up with this, WordPress 5.0 have introduced Gutenberg as the part to its editor. Its goal is to help the non coders design rich content layouts without the need of a plugin.
Difference Between Gutenberg and Classic Editor
Now that, Gutenberg has officially replaced Classic Editor from WordPress 5.0. Here are some differences that you can experience on your editor:
|Classic Editor||Gutenberg Block Editor|
|Appearance:||The Classic Editor contains text editor with various formatting options similar to Microsoft Word.||Gutenberg is more like a user-friendly visual editor where you can simply drag and drop the elements as per your need.|
|Usability:||Classic editor is a distraction-free plain window that can be used to write almost everything.||Gutenberg comprises an engaging and eventful framework to insert various elements in the form of blocks.|
|Features Availability for Content Creation:||The Classic Editor contains basic features for content creation. In order to add additional features like inserting tables, buttons, contact form etc, you need to either install a separate WordPress plugin or write codes.||Gutenberg comes with inbuilt feature to insert tables, buttons, contact form etc in the form of content blocks.|
How to Use Gutenberg Block Editor on WordPress?
Now that you have known what Gutenberg is and how does it differ from Classic Editor, it’s time to discuss how to use Gutenberg on WordPress website.
We will talk about the elements and blocks available on the Gutenberg editor:
The sidebar navigation settings contain 2 different tabs i.e. document and block.
On the document tab, you can configure the status and visibility of your page/post, insert featured image, add an excerpt, and enable/disable the discussions.
This tab displays the configuration and customization settings available for the blocks that you have added. You can select any of the blocks and do the necessary editing.
The block navigation will allow you to add different content blocks, undo and redo the editings, view different content structure (word count, headings, paragraphs, blocks) and many more.
You can also fetch the preview of your page/post, draft it or make it live from here.
This part also lets you insert different blocks on your web contents.
To add a new block, click on the plus (+) below the title section or on the block navigation. Then, select the category of the blocks that you want to insert.
Different Types of Blocks Available on Gutenberg Editor:
Now let’s go briefly on some of the content blocks available on Gutenberg. It will help you to distinguish the usage of different blocks.
This blocks category allows you to add common elements on the editors. Some of them are:
This block lets you insert the texts on the editor. It contains different formatting options to customize the text color, background, alignment, font size, etc.
With this block, you can easily insert the image on the editor. The images can be entered either uploading them, select it from WordPress media library or directly through the URL.
This block allows you to assign header text on the editor. Altogether, 6 different header sizes (h1 to h6) can be applied to the text.
From this block, you can create a beautiful image gallery for any page/post.
This block allows you to list out the contents using bullets and numbering. You can add listed items, sub-items, anchor links, etc.
From the quote block, you can highlight notes, conclusion, author bio etc.
With the audio block, you can add the audio clips on the editors.
This block allows you to upload image or video with text outlay to set the cover of your page/post.
From this block, you can add downloadable media files on the editor.
With the video block, you can upload videos on your web contents.
These blocks allow you to configure the formatting of the editor. Some of the block available here are:
This block allows you to insert the tables on the editor.
You can assign rows and columns at the beginning or at the end of the table.
This block allows you to insert various codes like HTML, CSS, jQuery etc on the page/post of your site.
Custom HTML Block:
From here, you can enter the HTML code to add different content on your blog.
You can view a preview of the elements that you have insert on your codes.
In this block, you can enter the verse of the poem or lyrics.
If you are comfortable with the classic editor, then you can use this block to add and contents in classical way on Gutenberg.
From here, you can display the text on the frontend as you type.
Pull Quote Block:
This block contains a color background/border where you can give the special visual emphasize to any text of your contents.
This block category allows you to enter different layout components on the page/post.
Some of the elements available on this block category are:
This block can be used for adding buttons on your contents.
You can change the style, background color, text color and add the link on the buttons.
This block lets you add columns to your contents.
Altogether, you can add upto 6 different columns.
Media and Text Block:
From this block, you can insert media and text side by side. It contains formatting option for both text and media files.
You can display the media on the left, right, above or below the content.
This block lets you add a separator/horizontal line to your post.
Page Break Block:
From this block, you can insert a page break to your content.
Read More Block:
From here, you can add read more line on your content.
This block lets you add a space between the two blocks.
From the widget category, you can add the existing widget on your page/post.
The widget block includes shortcodes, calendar, archives, categories, search, latest comments, late posts, tag clouds, etc.
The embeds category lets you place the contents from various websites and social media platforms.
It includes Twitter, Facebook, YouTube, Spotify, Cloud, etc.
Duplicating, Moving, Removing and Reusable Blocks:
Gutenberg has made the editing of the contents easier than ever. You can simply copy, move, or remove any block and apply the following settings:
This setting allows you to duplicate the block and copy the contents inside it.
To duplicate the block, click on the block settings i.e. three vertical dots and click on the duplicate.
Note: You can also duplicate the block by using the keyboard shortcut key: CTRL + Shift + D. To know more about the shortcuts keys available on Gutenberg, check out the article: WordPress Gutenberg Keyboard Shortcuts.
You can move the blocks by dragging them or simply click the up and down button available on the left side of the blocks.
This setting allows you to remove the unwanted blocks of your contents.
To remove a block, click on the block settings and select the remove block options.
Note: You can also remove the block using the keyboard shortcut key: Shift + ALT + Z. To know more about the shortcuts keys available on Gutenberg, check out the article: WordPress Gutenberg Keyboard Shortcuts.
The reusable block allows you to insert the blocks that are saved and used on other posts.
For this, you need to add the block on the reusable category.
To add the blocks on the reusable category, click on the block settings and select “Add to reusable block” option.
Then, give the name to the block you are saving and click on the save button.
This procedure will allow you to save the blocks on the Gutenberg block library and reuse them whenever required.
Also, you can edit, delete, import, export saved blocks by using the options available on the block manager page.
FAQ Related to Gutenberg Block Editor
While using Gutenberg, you might have many questions on your mind. So, to help you get the answer – here are some of the FAQ related to Gutenberg:
Is Gutenberg a WordPress page builder?
No, it is not (at least for now).
Gutenberg is a block-based editor that use elements called blocks for content creation. Likewise, page builders use the elements to design the pages.
Gutenberg lets you create contents from the dashboard of your website. Whereas, page builder plugins like Elementor, WPBakery Page Builder, Beaver Builder, Divi Builder allows you to build the pages from both frontend and backend of the website.
Is it compulsory to use Gutenberg?
Well, it’s up to you. There are many choices.
If you want to have a new experience in the WordPress content creation then, you can use the Gutenberg block editor.
However, if you want to stick with the old editor then, you can use classic editor plugin available on WordPress.org.
Also, you can use the classic block available to create the contents classically on the Gutenberg editor.
How to check if the themes and plugins that I am using will work on Gutenberg?
The best way to check the compatibility of your theme/plugin with Gutenberg is by searching for it and looks for “Tested with…” line.
If it shows the theme/plugin is tested with WordPress version 5.0 or higher, it is 100% compatible with Gutenberg.
Are there keyboard shortcuts for Gutenberg?
Yes, there are. You can check them out in this article: WordPress Gutenberg Keyboard Shortcuts.
How to manage old post using Gutenberg block editor?
After you have updated your website into WordPress version 5.0, all the saved contents will be wrapped inside the classic block of Gutenberg editor.
You can easily do all the editing on the classic block like you used to do before.
You can also convert the old post contents into Gutenberg by clicking on the “Convert to Block” option available on Classic block dropdown menu.
How to Disable Gutenberg Block Editor on WordPress?
Most of the people might not be ready to switch to the Gutenberg editor due to one or many reasons.
So, if you want to disable Gutenberg on your WordPress website then, you can simply install and activate the Classic Editor plugin or use any of the disable Gutenberg plugins available on WordPress.org.
How to update page builder content using Gutenberg?
Updating the contents created with the page builder should not be a problem. However, the method you use to update your contents might differ from one page builder to another.
So, you need to contact the plugin owner for an updating tutorial or check their official website to find the announcements related to Gutenberg support.
Whom to contact if there is any issue while upgrading Gutenberg?
Gutenberg alone should not provide any issues on your website. However, conflict on some themes and plugins can cause some errors.
If you find these errors, you should first disable Gutenberg and activate the classic editor on your website. If the same error remains then, contact with the theme and plugin companies for support.