WordPress Block Editor: Everything You Need To Know!

WordPress released its new Block editor that has now replaced the old classic editor. This editor works in a totally different way and is the direction where WordPress is heading to. 

If you’re new to the WordPress Block Editor and are looking for a resource to understand how it works, you’re in the right place! 

In this post, I’ll walk you through this new WordPress Block Editor. 

Moreover, I’ll show you how it works and how you can ditch the classic editor for this much better and productive editor

So, let’s get started. 

What is the WordPress Block Editor?

The WordPress Block Editor is the new default editor of WordPress which is based on blocks. Blocks are content elements that you can use for adding paragraphs, images, videos, buttons, lists, and more.

And Gutenberg is the project name of the new WordPress block editor. The project is named after Johannes Gutenberg, who invented the movable-type mechanical printing press.

WordPress stated that one of the biggest goals of the new editor was to allow users to build rich posts and beautiful layouts with just a few clicks. 

– Block Editor

With the new block interface, it has now become possible for WordPress users to create beautiful pages and posts without the need of any page builder plugins

To understand the block better, we need to take a look at how different it is from the classic editor. 


Block Editor Vs Classic Editor: What’s the Difference?

The new block editor is very different from the classic editor. 

Let’s see how: 

This is how the WordPress classic editor looks like: 

And, this is the new Block editor by WordPress: 

They look very different on the surface. But these differences are much bigger if you dive deep into each editor. 

The biggest difference between the classic editor and block editor is this: 

The classic editor is a simple text editor with various formatting options. You can add images, shortcodes, video, etc just like you add in any other text editor. 

Block editor, on the other hand, uses blocks where each element or entity is represented as blocks. So, any image, gallery, video, or shortcode you add to your content is in the form of a block. 

That’s why it is also called the Block Editor. 

The Block editor comes with many predefined blocks that can be added to your content. Also, you can add many new blocks by using a Gutenberg block plugin

So, now you know the difference between the classic editor and the block editor. 

The question is: 

How is Gutenberg’s block editor better than the classic editor? 

There are many advantages of using the block editor over the classic editor. 

The biggest one is that it is easy to use than the classic editor. You can also edit individual blocks which gives you more control over the design and layout of your page. 

Read: Gutenberg (Block Editor) Vs. Classic Editor: Which One To Choose?


A Quick Introduction to the Block Editor Interface

Let’s take a deep look at the Gutenberg block editor interface. Whenever you create a post or page in Gutenberg, this is how the editor looks like: 

Here’s a quick run-down of the elements of the Gutenberg editor interface: 

  1. Title of your blog post/page. 
  2. The content area of your post/page.
  3. Lets you add new blocks.
  4. Undo/redo buttons.
  5. Access to post settings where you can add categories, change the featured image, set publish date, and more.
  6. Settings for the individual selected block. Each block may have different block settings. 
  7. Live preview or publish/update the post.

Now, that you are familiar with the interface of the block editor, let’s take a look at the blocks that come with Gutenberg. 


An Introduction To The Blocks

You’ve been reading that the new editor works with blocks since the beginning of this guide. But, what are these blocks? And, how do they work? 

Here are the different types of blocks available in Gutenberg based on different categories: 

Common Blocks

These are the blocks that are used very often when working with posts. The common blocks include the most basic element blocks. 

Paragraph Block 

The paragraph block lets you write text in the block editor. It’s a simple box where you can write content for your post. 

Gutenberg Paragraph Block

This block comes with the standard formatting options allowing you to change the font size, alignment, background, text color, etc of the paragraph. 

Headings Block

Heading block lets you add headings to your content. You can choose the type of heading from six sizes (H1 to H6). 

You can change the alignment of your heading, format them, and even insert links. 

Image Block 

The image block lets you add an image to the editor. You can insert the image from your computer, WordPress media library or from a URL. 

Gutenberg Image Block

You can add captions, change the image size, add ALT text, and more in the image block. 

You can create beautiful galleries with the Gallery block. With this block, you can add more than one image to the same block. 

Gutenberg Gallery Block

You can choose the number of columns for the gallery, add captions to images, and even link the images of your gallery. 

List Block 

The list block allows you to create a bulleted or numbered list. 

Gutenberg List Block

This block also comes with standard formatting options that let you create sub-items, add anchor links, and format the text of your list. 

Quote Block 

The quote block lets you add beautiful quotes to your content. 

Gutenberg Quote Block

You can add the quote along with the author name and format it like any other block. 

Audio Block 

The audio block lets you upload audio files to your content. The block displays a beautiful audio player. 

Gutenberg Audio Block

You can customize the audio player to play the audio automatically and/or in a loop. 

Cover Block 

Cover block can be used to add an image or a video with a text overlay. 

Gutenberg Cover Block

You can change the background color and opacity of the overlay. 

File Block 

You can add different types of files using the file block. 

Gutenberg File Block

The file block lets you display a button, choose to open the file in a new tab, and more. 

Video Block 

The video block lets you upload videos to your content. 

Gutenberg Video Block

You can autoplay the videos, mute them, upload a video thumbnail, and more. 

Formatting Blocks 

Formatting blocks include code blocks, custom HTML blocks, and other similar blocks. 

Let’s go through each formatting block available in Gutenberg. 

Custom HTML Block

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

Custom HTML Block

Table Block

Now, you can create tables in WordPress without using any plugin. 

Gutenberg Table Block

The table block lets you create tables with ease. You can select the number of rows and columns and choose the layout. 

Code Block 

You can display code snippets beautiful using the code block. 

Gutenberg Code Block

The code block isn’t a block where the code is executable. It’s just for displaying code to your readers. 

Classic Block 

You can add a tiny classic editor using the classic block. 

Gutenberg Classic Block

The classic block has all the formatting options of the classic editor. 

Preformatted Block 

The preformatted block lets you display text on the front-end as you type it. 

Gutenberg Preformatted Block

It displays the text in a monospaced font. 

Pullquote Block 

You can emphasize any text of your content using the pullquote block. 

Gutenberg Pullquote Block

You can customize the colors of the block by changing the main color and the text color. 

Verse Block 

Verse blocks are used to write verses such as poetry or lyrics. 

Gutenberg Verse Block

Verses are displayed in a new line and you can write as many verses as you want. 

Layout Element Blocks

The layout element blocks let you customize the layout of your post beautifully. 

Here are the layout element blocks in Gutenberg: 

Columns Block 

You can add columns to your content using the column block. No need to use any shortcode plugins for columns anymore!

Gutenberg Columns Block

The column block can be customized and you can change the background color of the column. 

Button Block 

You can add beautiful buttons to your post using the button block. 

Guttenberg Button Block

There are many settings for the button block that let you customize the border and color of the button. 

Media & Text Block 

The media & text block can be used to display text and media side-by-side. 

Gutenberg Media & Text Block

This block has the standard formatting options for the text and media. 

Page Break Block 

The page break block lets you add simple page breaks to your content. 

Separator Block 

The separator block is a simple block that lets you add separators to your post. 

Spacer Block 

This block adds space between the blocks

Widget Element Blocks 

Widget element blocks let you add widgets to your post. These widget blocks include shortcodes, archives, categories, search, tag cloud, and more. 

Shortcode Block 

The shortcode block lets you add shortcodes to your content. 

Gutenberg Shortcode Block

Unlike the classic editor where you paste the shortcode directly in the content, the shortcode block lets you insert a shortcode easily. 

Latest Posts 

The latest posts block lets you display the latest posts published on your blog in your posts. 

Gutenberg Latest Posts Block

There are settings that let you select the category of the posts, choose the number of items to display, order posts, and display post date. 

Embed Elements 

Embed elements let you embed content from other sources to your post. 

Some embed element blocks include YouTube embed, Spotify, SlideShare, and more.

YouTube Embed Block 

YouTube embed block lets you embed any YouTube video to your content. 

Gutenberg YouTube Embed Block

So, these are the blocks that come with Gutenberg. 


Converting Old Posts into Blocks

If your interest in the block editor has peaked now, it’s time to take a look at how you can convert your old classic editor posts into blocks

The process is very simple and just takes a few clicks. 

Here’s how you can do it:

Go to Posts > All Posts in your WordPress dashboard. 

WordPress Posts

Click ‘Edit’ on the post you want to convert into blocks. 

Now, if you have Gutenberg installed on your WordPress, the post will load with the new block editor interface. 

But, all your content will be inside the ‘Classic Block’ which we discussed in the previous section. 

The classic block is simply a TinyMCE editor with all the features of the classic editor. 

It’s important to note that just because your post is loaded in the new block editor doesn’t mean it’s converted into blocks. 

To convert the classic block into individual blocks, click on the ‘Convert to Blocks’ option. 

Your entire post will be converted into individual blocks. 

And, that’s it! 

It’s that simple to convert your old posts into blocks. 

But, what about creating new posts with the Block editor interface? 

Let’s take a look at that. 


Inserting New Block

In the previous sections, we took a look at the Gutenberg block editor interface. It’s a simple and straightforward interface that lets you create posts easily. 

To add anything to your post, you need to insert a block. 

Here are the different ways you can insert a block to your post in Gutenberg. 

There are three ways of inserting a block and all of them are fairly simple. 

The first one is simply click on the ‘+’ sign on the post editor.

You can also add a new block by clicking on the ‘+’ sign on the the top toolbar.

And the last one is pretty awesome. Just type / and then the name of the block and insert the block on the editor.

Using slash to add new block in Gutenberg

The best part about this method is that you don’t have to type in the full name of the block. The block automatically gives you suggestions as you are typing. 


Duplicating, Moving & Removing Blocks

The best part about the Block editor is that everything is in a block. So, if you want to copy a text, an image, or a table, you don’t have to copy the entire thing. 

Just select the block and choose what you want to do with it. You can duplicate blocks, move them by just dragging, or remove them. 

Here’s how you can do it. 

Duplicating Blocks 

Duplicating blocks is very easy. 

To duplicate a block, select the block and click on its settings (three vertical dots). In the settings, there’s an option to duplicate the block. 

Click on it and your block will be duplicated. 

Duplicating Blocks in Gutenberg

You can also duplicate blocks by selecting the block and using the shortcut key Ctrl+Shift+D. 

Moving Blocks 

You can move blocks by either dragging them or simply by clicking the up and down buttons. 

Hover on your block and on the left side you’ll see two up and down buttons along with a button in the middle. 

Clicking on the up/down buttons will move the block up/down. Or you can click on the center button drag the block wherever you want it to be. 

Removing Blocks 

To remove a block, click on the block settings and select the remove block option. 

Removing blocks in Gutenberg

You can also remove a block by using the shortcut key Shift+Alt+Z. 


Creating Reusable Block

One great feature of the block editor is the concept of Reusable Blocks. A reusable block is basically a block that can be saved and used on other posts. 

This is a really helpful feature as you can now save blocks and reuse them. 

To create a reusable block, click on the block settings and select the ‘Add to reusable blocks’ option. 

Creating reusable block in Gutenberg

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

Naming reusable block

This will save your block in the Gutenberg block library. 

Now, whenever you want to use your reusable block in other posts, you can insert it like any other block. 

You can also manage your reusable blocks on the block manager page. From this page, you can edit or delete your blocks. You can also import or export blocks. 


Adding More Blocks to the Block Editor

The default blocks provided in the block editor are really great and help you create beautiful posts and pages. 

But, what if you want to go a step further? 

Thankfully, the Block editor allows developers to develop their own blocks. This has led developers to create some really awesome Gutenberg block plugins. 

One such plugin is Ultimate Blocks

Ultimate Blocks

This block plugin is made for those who want to spice up their blog posts and make them more appealing. 

The plugin comes with over 15 blocks. Some of the notable blocks are: 

Ultimate Blocks is insanely easy to use and very fast. With this plugin, you can add some unique blocks to your posts and increase your engagement and social shares. 


Conclusion

So, that concludes our guide to the WordPress Block Editor. I hope this guide helped you learn and understand Gutenberg better. 

If you’re completely new to this editor, the best advice I have for you is to try it out. You’ll get accustomed to using this awesome editor. 

And, if you have any questions regarding this post, feel free to ask them in the comments section below. 

Was this helpful?

Thanks for your feedback!

7 responses to “WordPress Block Editor: Everything You Need To Know!”

  1. Honey Avatar
    Honey

    Awesome post. Thanks for sharing with us. I’ve heard of some of the Gutenberg libraries already from Twitter and plan on trying out Ultimate Addons and Ultimate Blocks.

  2. karen Avatar
    karen

    Hi, I’m new to WordPress and struggling with it a little bit. One of the questions that I have is that my title seems to appear twice even though I’ve only put it in once. I did read somewhere that there was a trick to removing it as some themes duplicate the title in the post but I can’t remember where I read it. I’m hoping you can guide me. I’m usuing Be Theme.

    I really enjoyed your overview and learnt a few things that will lessen my stress levels in trying to navigate around this so that you!

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Hi Karen,

      I’d recommend you to contact with Be Theme. I hope they will figure out the problem.

      However, thanks for stopping by. And please let me know if you have any Gutenberg related issues.

  3. Gururaj Murthy D Avatar
    Gururaj Murthy D

    Though the Gutenberg interface appeared weird at the beginning, now I can’t imagine how difficult it will be to write blog posts without this awesome block editor interface.

    And thank you for this detailed guide Istiak bro. I was not knowing about the reusable block feature. This is very useful and might save a lot of time for us.

    In the heading block, we can choose up to H4 from the tab which appears just above the heading block. After doing some thorough search, I came to know that one can choose H5 and H6 sizes from block options that appear in the right column.

    So it might be helpful for your readers if you also include a screenshot of the right column and the options available to choose from there.

    Also, I loved the way you marked the numbers in one of the screenshot here. Could you please share the tool details that you used for this?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      At first, it seemed weird to me as well. But when I gave it some time, it made sense and I am loving it now.

      And thanks for the suggestion for Heading block image. I’ll change it.

      And talking about the screenshot tool, I am using Snagit.

      Thanks for stopping by.

  4. Navin Rao Avatar
    Navin Rao

    Gutenberg is one of the fantastic things WordPress came up with. I remember, initially, people where hesitating using it, including me, despite being a WordPress blogger. Because of all valid reasons, as the update has changed the entire interface and it looks to be complex to find out all the options.

    And eventually, most of the folks have switched to the classic editor at that time including me. But, yeah all good things look complex, but now after using it almost every day. I am loving it.

    The best part of Gutenberg, it became just similar to the Page Builders and lets the bloggers get rid of some extra plugins like shortcodes, some specific ones for buttons, etc. Who doesn’t love everything in one place? WordPress Gutenberg made it possible, and adding to it some free Gutenberg block editors makes it more exciting.

    Thanks for sharing the detailed guide on how to use Gutenberg editor with ease.

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Hi Navin,

      Thanks for stopping by.

      And yes, People were hesitating initially. But it’s the future where WordPress is heading to. You’ll have to embrace it sooner or later. So why not embracing now.

      However, it doesn’t seem that Gutenberg is going to take over page builders. At least, at this stage. But who knows? It might come up with more functionalities.

      Regards
      Istiak Rayhan

Leave a Reply

Your email address will not be published. Required fields are marked *

Introducing New Table Block Plugin - Tableberg

X
Need help?