Gutenberg WordPress Block Editor – Ultimate user guide with all blocks explained!
Many of us have been writing our WordPress blog posts in the classic WordPress editor for a long time. But now with WordPress 5.0, it has been changed as it has introduced the Gutenberg – a block editor for WordPress. These days Gutenberg WordPress editor has become a part of the WordPress core. What does that mean for day to day WordPress users, editors, bloggers, authors and you?
What if you’re already using a page builder like Elementor, WPBakery Page Builder, Beaver Builder, Divi Builder or other page builders available in the market? Is Gutenberg an alternative to these page builders already in the market? In this blog, we’ll go through the basics of the new Gutenberg editor for WordPress, who should use it and what you need to know with regard to it and other page builders in the market.
- Overview of Gutenberg: the block editor
- How does the WordPress Block editor work?
- How to use different types of blocks?
- Common Blocks
- Paragraph block
- Image block
- Heading block
- Gallery block
- List block
- Quote block
- Audio block
- Cover block
- File block
- Video block
- Formatting blocks
- Table block
- Code block
- Custom HTML block
- Verse block
- Classic block
- Preformatted block
- Pull quote block
- Layout elements
- Buttons block
- Column block
- Media and text block
- Separator block
- Page break block
- Spacer block
- Duplicating, Moving, Removing & Reusable Blocks
- Common questions about Gutenberg block editor
- Is Gutenberg a WordPress page builder?
- Is it necessary to use Gutenberg?
- Will my themes and plugins work if I update to Gutenberg?
- Are there keyboard shortcuts for Gutenberg?
- How to manage my old posts into Gutenberg block editor?
- How to disable Gutenberg and bring back the classic editor?
- How can I update page builder content with Gutenberg?
- To whom can I contact if there is any problem while upgrading the Gutenberg?
Overview of Gutenberg: the block editor
What is Gutenberg Editor?
Gutenberg was introduced to the world in December 2018 with the release of WordPress 5.0 version. The classic content editor was replaced with a brand new block editor “Gutenberg”.
It is a new page builder that comes with dozens of cutting edge features. It lets the website creators build a website using the blocks, which are small drag-and-drop units. The content is added in blocks of various types from the WordPress backend. To understand why Gutenberg was introduced in WordPress, we need to understand the content block in WordPress.
What is WordPress Content Block?
With the help of blocks, you can easily insert, style and rearrange the content and multimedia. The idea of a block is to give the user great ease to focus on the content building and design, rather than on coding and backend stuff. Ready to use content blocks help WordPress users to create great content with less effort, less or no coding or custom programming. So, here are the types of content blocks:
- Cover Image
- Embeds and more
Why did WordPress introduce Gutenberg?
Previously, WordPress used a TinyMCE based editor for creating posts and pages. The classic editor was a simple text window that included some few buttons on top for basic formatting options.
While working on the classic editor, users had to learn different approaches to format text, insert media, create galleries, embed videos, add tables, add images and other content elements. This made WordPress a little bit difficult to use for the users as the new drag and drop page builders were hitting the market. So, WordPress 5.0 introduced Gutenberg as part of its editor and a whole new way of using WordPress started thereafter. WordPress remained not just a blogging platform, but an enriched content platform with the blocks.
The new WordPress block editor comes with a great user-experience where each element is packed with blocks. You can easily move these blocks to create engaging content layouts without writing code and change their settings.
Also, the powerful frameworks are provided to the developers to build advanced solutions using blocks. Gutenberg blocks will allow you to create great websites with less no. of bulky plugins.
What is behind the block’s technology?
Difference between Gutenberg and classic editor?
This is the quick comparison between Classic editor and Gutenberg:
First, let’s take a look at the Classic Editor,
And if you upgrade the WordPress 5.0, this is what it looks like – the Gutenberg editor,
What differences will you experience?
- Editor Interface – the classic editor is a text editor with formatting buttons that is quite similar to Microsoft’s office application editor, whereas the Gutenberg will look more visual, drag and drop, user action friendly.
- Creating and managing content – with a classical editor, you’ll type in the content first and then apply the formatting or setting as per your need. Do a lot of experiments with the available options eg font size, face or color. With Gutenberg, you’ll see what you’re making or managing. You do fewer experiments with the available options because you see what you’re doing right away with the drag and drop blocks.
- Ease of use – Gutenberg is simply flexible, drag and drop are more powerful and can create a table, contact forms and more without plugins.
The Gutenberg editor completely gives you a different experience by moving to a block-based approach to the content. The blocks are content elements that let you add tables, create content columns, arrange, and mingle text and media, change the background colors and font sizes, and reuse blocks with ease.
How does the WordPress Block editor work?
Let’s go through the new editor:
How to add a block?
In your WordPress dashboard, create a new post or open the existing one.
Click on the plus (+) sign in the top-left corner of the editor.
Select the category and the type of block you want to insert:
Each block can be deleted, saved as reusable, edited, and moved up or down with drag-and-drop options.
- This is the sidebar where categories, tags, permalink, and publishing options are included.
- Block settings: when you click on a block in the editor, you get its unique set of options in the sidebar
- Preview and Publish the post
- Hide sidebar
- More editor settings
- Add a new block
- Undo and Redo buttons
- Content structure (word count, headings, paragraphs, blocks)
- Block navigation (a drop-down displaying all the block types used in the post)
How to use different types of blocks?
These are the blocks that come with Gutenberg:
These are the blocks that are used very often. These blocks include the basic element blocks that are used by most of the bloggers and writers
This block allows you to write the text in the block editor. It comes with the formatting options where you can change the text colors, background, alignment, font size, etc of the paragraph.
With this block, you can easily add the image to the editor. You can insert the image by uploading the image from the WordPress library or copying the URL. And you can add the caption, add alt text, adjust image size, etc.
There are six heading sizes. The three sizes are available inside the block and the other three are available in the sidebar to the right of the editor.
This block is perfect if you want to add more than one image in the same block and create a beautiful gallery.
You can list out the items in the form of bullets or numbers. And also, lets you add the sub-items, add anchor links, and format the text of your list.
This block allows you to add a quote in a beautiful way. You can add the quote along with the author name and format it like any other block.
With the audio block, you can upload audio files to your content. It displays a beautiful audio player. And customize the audio player to play the audio automatically and/or in a loop.
Cover block can be used to create an image or video with text overlay. You can also use this block as a featured image for a post or as a header.
You can add any types of files using this block. You can choose to display a download button, open the file in a new tab, and link to either a media file or an attachment form the sidebar.
This block lets you upload the videos. You can autoplay the videos, mute them, upload a video thumbnail, and more.
This block mainly focuses on formatting content such as pull quotes, tables, verses, etc.
This table block allows you to insert a table without using any table plugins and knowing any HTML coding with ease. Select the number of rows and columns and choose the layout.
You can also add a column or row in the beginning or at the end of the table.
Using this code block, you can display the code snippets beautifully. It’s not the executable code but its just displaying code to the readers.
Custom HTML block
This block lets you add custom HTML to your post and preview it.
In this block, you can write poems and lyrics.
This block lets you add a tiny classic editor. It includes all the formatting options of the classic editor.
You can display the text on the front end as you type it.
It displays the text in a monospaced font, here is the preview.
Pull quote block
This pull quote block contains a color border where you can emphasize any text of your content.
This category helps you to arrange your post in a beautiful way.
You can add buttons to your blog and customize the border and color of the button.
Any type of shortcode plugins is not required for columns. This block lets you add columns to your content with ease. You can change the background color of the column and customize as you like.
Media and text block
You can display the media and text side by side in just a few clicks. This block contains standard formatting options for the text and media.
This separator block allows you to add the separator to your post.
Page break block
It lets you add a simple page break to your content.
This spacer block lets you add the space between the blocks.
With the Widgets category, your existing WordPress widgets (which were usually restricted to your blog’s sidebar or footer) can be easily added inside the body of your posts as blocks. Want to display a search bar or the latest comments on your blog right inside your post? You can by using the applicable widget block.
This block lets you add restricted sidebar and footer inside your posts easily. The widget blocks include shortcodes, calendar, archives, categories, search, latest comments, late posts, tag clouds, and more.
The Embeds category lets you add content from other sources like social media sites, platforms, or any site from which you can share posts or files to your content. The embeds block include Twitter, Facebook, YouTube, Spotify, Cloud, and much more.
For example, the YouTube block allows you to embed any YouTube video to your content easily.
Duplicating, Moving, Removing & Reusable Blocks
With the help of this Gutenberg editor, you can find everything in a block. Now, if you want to copy, move or remove a text, an image, or a table, you don’t have to copy or delete the entire thing.
You just need to select the block and choose the one you want then, duplicate blocks, move them by just dragging, or remove them.
It’s really easy to duplicate the blocks. You have to select the block and click on its settings i.e three vertical dots. There you can see an option to duplicate the block. Just click it and your block will be duplicated.
You can easily move the blocks by dragging them or simply clicking the up and down buttons. On the left side, you’ll see two up and down buttons along with a button in the middle. This will help you to move up and down. And also you can click on the center button to drag the block to the place you like.
This remove block lets you delete the block you want. You need to click on the block settings and select the remove block option, then it’s done.
The reusable block is a great feature of Gutenberg. This is a block that can be saved and used in other posts.
For this, you need to create a reusable block. Click on the block settings then select the ‘Add to reusable blocks’ option.
After that, give a name to the block you’re saving and click the save button.
This procedure will help to save your block in the Gutenberg block library. This block can be inserted like any other block when you want to use the reusable block in other posts.
Also, you can manage your reusable blocks on the block manager page where you can edit or delete your blocks as well as you can import or export blocks.
Common questions about Gutenberg block editor
Let’s have a look at some common questions related to the Gutenberg.
Is Gutenberg a WordPress page builder?
Well, Gutenberg is the block-based editor that uses content elements called blocks. Likewise, the WordPress page builders also use blocks which are known as widgets, modules, or elements for building the pages.
But this doesn’t mean that Gutenberg is a page builder. Gutenberg is the backend editor whereas most of the page builders are frontend editor.
Is it necessary to use Gutenberg?
Actually, the answer to this question is twofold. The people who are linked with WordPress knows and understands that getting used to this editor will take time. As there was some issue while updating the existing content.
And if you want to keep using the Classic editor then you can as WordPress has made it available. You can install it and allow both Gutenberg and classic editing which will help you to learn the process.
Will my themes and plugins work if I update to Gutenberg?
Yes. Your themes and plugins will work with the Gutenberg once they are updated. But there are some themes and plugins that won’t work.
The best way to know whether the theme or plugin works with Gutenberg is to search for it and look for the “Tested with…” line. And if it shows that it is tested with 5.0 or higher, then you know that the themes and plugins are 100% compatible. If there is any problem we recommend you to contact the developer.
Are there keyboard shortcuts for Gutenberg?
Most of people love keyboard shortcuts. This may not seem to be a huge thing but keyboard shortcuts can save your time if learned and used properly.
The Gutenberg editor includes over 65 keyboard shortcuts, and here they are!
How to manage my old posts into Gutenberg block editor?
After you update your site to WordPress 5.0 or higher, your content won’t disappear. Your old post will be wrapped inside the Classic block inside the Gutenberg editor. You can easily edit inside the Classic block. Also, you can convert your old post content into Gutenberg blocks too. Simply click the Convert to Blocks option from your Classic block’s dropdown menu, and then it’ll automatically convert your post content into appropriate blocks.
How to disable Gutenberg and bring back the classic editor?
Most of the people are not ready to switch to the Gutenberg editor because of one or another reason.
And if you want classic editor back then, you do have the option to disable Gutenberg Editor.
You need to install and activate the Classic Editor plugin.
With this plugin, you can easily disable Gutenberg and use the classic editor on your site.
How can I update page builder content with Gutenberg?
It’s not a problem to update a page builder content. But the method may vary from one-page builder to another.
For this, you need to contact your plugin provider for an updating tutorial. As well as see their website whether there is any Gutenberg support or not.
To whom can I contact if there is any problem while upgrading the Gutenberg?
It’s always best to test your site on a staging area before upgrading to Gutenberg. And if there will be any errors while using it then first disable Gutenberg and activate the Classic editor on your site. After that contact your theme and plugin companies to request support.
So, here it concludes the guide to Gutenberg block editor. We hope this article helped you to know more and understand about Gutenberg in detail. And, if you have any questions and suggestions let us know. If you’d like to share your experience so far using the editor – we’ll be pleased!
Also, check out: