Gutenberg Block Editor: The Definitive Guide 2021

The Gutenberg Editor is also known as the Block Editor is one of the biggest changes in WordPress. And since its release in December 2018 website creators have had a love and hate relationship with this new editor. People who like it want to have it and people who don’t want it are against this change and to be honest, at the start majority are against this editor.

But the WordPress core devs team keeps pushing it forward and now it has become so powerful and super useful and capable of full site editing. And people’s perception toward this editor is changing and a lot of developers and site creators are acknowledging this editor and accepting it as a future of WordPress and since the WordPress team had already confirmed they have no intention of taking this editor back so to stay updated in WordPress development you are out of choice and you have to learn it and its a perfect time to start.

Table of Contents

What is Gutenberg?

If you are wondering what is Gutenberg then, Gutenberg is the name of the new WordPress block editor which is the default editor of WordPress after version 5.0. It had replaced the old TinyMCE-based editor which is now known as Classic Editor. If you wanna read about it in more detail we have written a great article about What is Gutenberg and how it is a WordPress future make sure to check it out.

New Block Editor

In the current latest version of WordPress, 5.8 new block editor can be used to edit three different parts of your website. It can be used in editing pages, posts, and widgets too. While the core visual look of both three parts is the same there are slight differences in feature based on its placement.

Post Block Editor

In the image above you are seeing New Block Editor’s post editing page. It can be divided into 4 major parts on top you see quick action buttons. On the left, you can see the list of blocks, on the center you can see the main page content where you will write your post, and on the right, you can see two sections a post section where you’ll see your post related options and a block sections where you will get all the block related option based on the block you have selected.

Page Block Editor

In the image above you can see the New Block Editor in the page edit section, just like the post editor in page editor you have a top bar with quick action buttons, on the left you have all the blocks and block patterns, the center is for your main page content and in the right, you have page options and block options.

The difference between page and post is the editor is only the right post/page options section, on post editor you have post-specific options such as categories, tags, excerpt, and discussion, and on the page editor you have page options such as templates and page attributes and rest of the content is exactly same.

Widget Block Editor

In the above image, you are seeing the new Widget Block Editor, the overall layout of the widget editor is also almost identical except for the main content area and the right widget area. The top bar, left blocks menu and right block option section are exactly the same.

What is Block?

Now the new block concept of WordPress editor is not a very new concept if you have used page builder plugins such as Elementor or WP Bakery the concept is similar to those editors. In block editor, every piece of content such as image, videos, heading, paragraph, or any piece of content is a block that can be edited and modified separately. You can drag and drop blocks and add blocks one after another which makes it very easy to make complex designs very easily.

Blocks in themselves open doors of many opportunities for example do you remember how hard it is creating a table with the classic editor, you either need a plugin or code in HTML which is a nightmare but with a new block editor, you just need to search for tables block and drag and drop it you can add as many rows and columns as you want with a lot of predesigned styles and you can even add your custom style if you want.

And the best part is after customizing a block you can save it to reuse across the website, and that makes block editor even more useful, for example, if you want to add a little custom-designed end note on multiple blogs then you have to add it in every block separately and style them again and again for each blog post, with reusable block you can design it once and reuse it as many times as you want.

Types of Blocks

WordPress itself offers multiple prebuild blocks right out of the box and with every update it adds more blocks to the list, current latest version of the WordPress version 5.8 has 81 blocks in total. Gutenberg has categorized these blocks into several different categories which are given below. In Block Editor itself, you’ll see these blocks are categorized in this manner.

Text Blocks

Text blocks are blocks that are used a lot across the website, these blocks are used for writing different types of text in our posts/pages/widgets. There total of 10 text blocks available in WordPress which are mentioned below.

Paragraph: Paragraph blocks are used for writing basic texts on the website.
Heading: Heading to use headings just like classic editor you can use from h1 to h6 as a heading.
List: List blocks are used for making a list, just like classic editor you can make a list in bullet points or number points.
Quote: Quote blocks are used for writing a quote in a post.
Code: With the Code Block you can add formatted code in your posts like the post source code feature works in the classic editor.
Classic: Classic block is like a mini version of the classic editor but available as blocks. All the buttons of the classic editor are available in this block and you can use them as you like.
Preformatted: Preformatted blocks will let you write the text that displays exactly as you typed page format won’t affect this block.
Pullquote: Pullquote blocks are similar to quote blocks but they format quotes very differently these blocks cover the entire page and are much bigger than normal quotes.
Table: Table blocks are very helpful blocks, you can use them to add tables with as many rows and columns as you want with a lot of styling options.
Verse: Verse blocks are another text block with a different style, if you want to make some text on your site look different you can use these blocks.

Media Blocks

Media blocks are also widely used block across the website especially while creating pages, these blocks are used for different types of media files such as images, videos, and audios in our posts/pages/widgets. There total of 7 media blocks available in WordPress which are listed below.

Image: Images blocks are used for adding images to the website.
Gallery: Gallery block is used to make a collection of more than one image and this block will automatically organize them to look beautiful.
Audio: Audio block will let you add audio in your post directly from your media gallery.
Cover: Covers are a combination of images or videos with text to make your page look more professional.
File: The File Block allows you to add a download link to document files.
Media & Text: With the media & text block you can place an image or video side-by-side with text.
Video: Video block will let you add videos to your post.

Design Blocks

Design blocks are used to change the layout of your page or post, these blocks are especially useful for making a page, they add a lot of functionality that can be useful for designing pages. There are 13 blocks in this category which are mentioned below.

Buttons: The button block will let you add clickable buttons to your page or post.
Columns: The columns block will let you add columns in your post and in these columns you can use any block and you can add up to six rows in a single column and can use multiple columns to make a grid effect.
Group: This block will let you group multiple blocks into one block. This is especially helpful if you want to make a reusable block with multiple blocks.
More: The more block will let your post truncate and only content above this block will be visible for users on the archive page and home page. This block is only available for posts, not for pages.
Page Break: Page Breaks are used to add pagination in your post, you can separate your content using page blocks.
Separator: The separator block will let you separate your content with s line separator.
Spacer: Space blocks can be used to add empty space between two blocks. You can resize them and add background colors if you want.
Site Logo (new in 5.8): The site logo block will let you add your site logo in your post, this logo will be fetched from your site data so if you update your logo for the site in the future it will also get updated automatically.
Site Tagline (new in 5.8): The site tagline block will let you add your site logo to your post/page and just like the logo it will also get added from site data and update accordingly.
Site Title (new in 5.8): The site title can be used to add your site title to your post/page and just like the logo and tagline it will also get loaded from your site data.
Archive Title: This block will provide you the archive title based on the queried object.
Post Categories (new in 5.8): Post category block is to get the category of your post.
Post Tags (new in 5.8): Post Tags block can be used for getting tags of a blog post.

Widgets

Widgets blocks are specially designed to be used in your page’s sidebar or certain sections, but you can surely use them in your post or pages if you want. There is a total of 12 widget blocks and every single one is very useful.

Shortcode: Shortcode block will let you use shortcode for adding content on your post or page.
Archives: Archive block will give you your previously published posts organized in a list of months and users can click on any month to see the list of published posts in that particular month.
Calendar: Calendar will let add a calendar as widgets and the calendar dates will show the list of posts if you have written any posts on that date.
Categories: The category block will show a list of available categories of your website with a clickable category link that shows all the posts of that category.
Custom HTML: Custom HTML block will let you add custom HTML to your site without requiring an extra plugin, you can also use inline CSS and JavaScript if you want.
Latest Comments: Latest comment block will show the latest comments left by users on your post, you can select how many comments you want to show at once.
Latest Posts: Latest post block will show the recent post you have written on your website.
Page List (new in 5.8): This block will give you a list of all the pages of your website.
RSS: If you wanna link some other website content on your site using RSS feeds you can use it via RSS feed block. You can learn more about RSS on Wikipedia.
Social Icons: Social Icons block will let you add various social icons with links to your social media pages.
Tag Cloud: Tag Cloud block will let you tag/category cloud in your post or page, it shows the tag/category in alphabetical order that links to all the articles with that tag/category.
Search: The search block will let you add a search widget on your post or page.

Theme Blocks

Theme blocks will give you the option to use theme elements inside your post/page, these are newly introduced in WordPress and added in WordPress version 5.8. This category has some very powerful and amazing blocks and these are the reason people are so into Gutenberg. Since they are new their official documentation is not added yet so no link is added in the title. We have added the description based on our usages.

Query Loop (new in 5.8): Query loop block is one of the most powerful blocks and super useful too it can show your post based on certain parameters.
Post Title (new in 5.8): Post title block lets you add post title in your post or page.
Post Content (new in 5.8): Post Content will let you show post content.
Post Date (new in 5.8): Post Date will give the post publishing date.
Post Excerpt (new in 5.8): Post Excerpt will provide the excerpt of your blog post.
Post Featured Image (new in 5.8): Post Feature image will give the feature image of your blog post.
Log in/out (new in 5.8): Login/out block will give a link to let the user log out or log in from the website.
Posts List: This block will give you the list of recent posts except for sticky posts.

Embeds

Embeds category blocks will let you embed social media posts and contents which can be embedded into a webpage. There is a total of 32 types of embed blocks of various popular social media available and you can directly paste links in these blocks you don’t need to have embed code to embed content. Based on the embed you’ll get some styling options for those particular embeds.

I am not adding a description for embeds because names make it clear what they embed.

Theme and Plugins Blocks

Above mentioned blocks are the blocks provided by WordPress itself, and surely your plugins and theme can also add blocks in your editor too and a lot of the plugins and themes are already providing a lot of very useful and feature-rich blocks. But no matter what type of blocks these plugins offer core fundamentals of these blocks will stay the same so no need to think too hard for them.

Reusable Blocks

Reusable blocks As the name suggests Reusable blocks are the blocks or blocks groups that you can save for use later. This is one of the most useful blocks in Gutenberg with this you can save any of your designed blocks from any page and use it across the entire website.

To add a block into a reusable block first select the block and if you want to save the block group then the first group multiple blocks together and select the group.

Then from the three-dot menu add click on “Add to Reusable blocks”.

After clicking it you’ll get a popup asking for the name of the block, type the name you want and click on “save”.

To add your saved reusable block in your post or page, you can access it via the left reusable block section as shown in the image above and you can do everything you can with normal blocks.

Patterns

In the new Block Editor, there is also a section called patterns, these patterns are like templates if you have used page builders like Elementor or Bever you will be familiar with templates. Pattens are the same they offer some cool unique designs which can be inserted in your post/page as blocks.

Patterns are kind of templates, you can access them from the left section of the page in the second menu right next to blocks as can be seen in the image above. There are several different categories to choose different patterns for your page and just like blocks you can use as many patterns as you want.

How to Use Block Editor?

Now let’s understand how exactly you can use Gutenberg Block editor for editing your page, post, or widget. The main principle for all three sections is the same so if you understand once you don’t need to learn anything extra for other editing modes and that’s the whole purpose of Gutenberg to learn only once and edit everything.

Now to add the block in your post/page/widget you need to click on the plus icon as marked on the image above. After clicking it you’ll see the block list, you can search for your required block or choose from the list. After clicking on the desired block it will be added to the page, similarly, you can add as many blocks to your page as you want.

Another option to quickly add blocks to your page is to go to a place where you want to add a block and type Forward Slash / and start typing block name you will get suggestions of all the blocks with the characters you have typed.

After adding a block you’ll get some styling and editing options for the block as you can see in the image above, these editing options will be different based on the block. You’ll get a quick action menu at the top of the block and more style options at the right block sidebar.

The options section which you are seeing in the image stays common for every single block, with these options you can perform certain actions such as duplicate, hide, delete, and so on.

You can also select any block and while left-clicking move blocks up and down in the main content section.

And if you want to move them up and down step by step then you can use these little moving buttons as shown in the image above.

And that’s it! These are all the editing options that you need to understand to get started, these are the common editing options and the rest of the options are block-specific which are for you to discover.

Keyboard Shortcuts for Block Editor

Even though the new Block Editor is pretty straightforward and all the options are right in front of but if you are a keyboard guy and love to use shortcuts as much as you can then this part of the block is for you. New Block Editor has a lot of helpful shortcuts and even if you are not a shortcut person learning them can be very useful for you also.

Shortcuts can help you do more things in less time, sure getting used to it is a bit tough but once you complete the hard part you will always appreciate it.

To check all the shortcuts of block editor click on the three-dot menu icon at the top right of any page or post screen. Just select Keyboard Shortcuts from the list to get the list of all possible shortcuts.

There is also a shortcut to see all the shortcuts, just hit Shift + Alt + H on your keyboard.

Conclusion

I know the article is quite big and there’s a lot to understand but trust me it is worth your time, we have tried to touch all the basics in this article so you know what Gutenberg block editor is and how you can start using it for writing and editing your post and pages. Gutenberg may look hard for the first time but once you start using it, it will feel like a piece of cake.

To further understand Gutenberg we will be writing a lot more content around it and hopefully clear all your doubts about it, so make sure to bookmark our site and keep visiting it on regular basis. Check out this link to get all the articles related to block editor. Meanwhile, if you have any questions or suggestions share them in the comments below. And if you have any questions in your mind share them with us too.