Gutenberg WordPress Block Editor – Ultimate guide

Gutenberg WordPress Blog Editor - Ultimate guide
Gutenberg WordPress Block Editor – Ultimate guide

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

What is Gutenberg Editor?

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:

  • Paragraph
  • Heading
  • Subheading
  • Quote
  • Image
  • Gallery
  • Cover Image
  • Video
  • Audio
  • Columns
  • File
  • Code
  • List
  • Button
  • 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? 

If you’re a programmer or know something about the programming and engineering, just to let you know that Gutenberg is developed using WordPress REST API, JavaScript, and React.

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,

WordPress Classic editor

And if you upgrade the WordPress 5.0, this is what it looks like – the Gutenberg editor,

WordPress Block editor

What differences will you experience?

  1. 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.
  2. 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.
  3. 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?

How to add 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.

Sidebar Navigation

Sidebar Navigation

  1. This is the sidebar where categories, tags, permalink, and publishing options are included.
  2. Block settings: when you click on a block in the editor, you get its unique set of options in the sidebar
  3. Preview and Publish the post
  4. Hide sidebar
  5. More editor settings

Block Navigation

Block Navigation

  1. Add a new block
  2. Undo and Redo buttons
  3. Content structure (word count, headings, paragraphs, blocks)
  4. 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:

Common Blocks

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

Paragraph block

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.

Paragraph block

Image block

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.

Image block

Heading block

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.

Heading block

Gallery block

This block is perfect if you want to add more than one image in the same block and create a beautiful gallery.

Gallery block

List block

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.

List block

Quote block

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.

Quote block

Audio 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.

Audio Block

Cover block

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.

Cover block

File block

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.

File block

Video block

This block lets you upload the videos. You can autoplay the videos, mute them, upload a video thumbnail, and more.

Video Block

Formatting blocks

This block mainly focuses on formatting content such as pull quotes, tables, verses, etc.

Table block

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.

Table Block

Code block

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.

Code block

Custom HTML block

This block lets you add custom HTML to your post and preview it.

Custom HTML block

Verse block

In this block, you can write poems and lyrics.

Verse block

Classic block

This block lets you add a tiny classic editor. It includes all the formatting options of the classic editor.

Classic block

Preformatted block

You can display the text on the front end as you type it.

Preformatted block

It displays the text in a monospaced font, here is the preview.

Preview Preformatted Block

Pull quote block

This pull quote block contains a color border where you can emphasize any text of your content.

Pull quote block

Layout elements

This category helps you to arrange your post in a beautiful way.

Buttons block

You can add buttons to your blog and customize the border and color of the button.

Buttons block

Column block

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.

Column block

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.

Media and text block

Separator block

This separator block allows you to add the separator to your post.

Separator block

Page break block

It lets you add a simple page break to your content.

Page break block

Spacer block

This spacer block lets you add the space between the blocks.

Spacer block

Widgets

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.

Widgets

Embeds

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.

Embeds

For example, the YouTube block allows you to embed any YouTube video to your content easily.

YouTube block

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.

Duplicate Blocks

Duplicate Blocks

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.

Moving Blocks

Moving Blocks

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.

Removing Blocks

Removing Blocks

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.

Reusable Block

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.

Reusable Block

After that, give a name to the block you’re saving and click the save button.

Rename

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.

Gutenberg Compatible

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.

Classic Editor

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.

Conclusion

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:

10+ Best Free Gutenberg-Ready WordPress Themes
10+ Premium Gutenberg-Ready WordPress Themes
99 Best Free WooCommerce Themes 2019
99 Best Free WordPress Blog Themes 2019

Get latest updates, deals and more from us!
Deals, Updates
and more...
No Thoughts on Gutenberg WordPress Block Editor – Ultimate guide

Leave A Comment

Search