WordPress Gutenberg Editor: A Review of The Block Editor

The new WordPress Gutenberg editor claims to change the way you create content through WordPress. But the WordPress users are having multiple questions in their mind. Here, we have tried to answer a few of them.

Since its release back in 2003, WordPress has played a very significant role in how websites are built and managed.

WordPress has been used by more than 60 million websites and has been regularly updated. Each release brings a new version with enhanced usability and added features.

And what has caused a stir in the WordPress world it’s the announcement of a new version, WordPress 5.0 with the new WordPress Gutenberg Editor.

In this article for the Gutenberg WordPress editor, we will see what it changes are and how it’s feature can help you create content with a different approach.

Introducing WordPress 5.0
WordPress Gutenberg Editor
Installation and Activation of Gutenberg
The WordPress Gutenberg Blocks
Adding a Gutenberg block/Removing a block
Moving blocks with Gutenberg editor
WordPress Gutenberg blocks: Layout elements
Gutenberg widgets block
WordPress Gutenberg editor: shared blocks
Gutenberg editor: Embedding URLs was never easier
WordPress Gutenberg Themes and Plugins

WordPress 5.0: What’s new?

The WordPress 5.0 update is expected to bring about a monumental change in WordPress history. The new version, that is prepared to be released anytime soon in 2018, is called Gutenberg.

Version 5.0 of WordPress will come with a new editor, that is the WordPress Gutenberg editor. Even though this version will just replace the TinyMCE editor we have been using all along, it is cited as one of the biggest changes in WordPress since it’s launch.

There are completely mixed reviews about the new monumental changes that this new version of WordPress is about to bring. While some users question the need for such a drastic change (because the current editor is familiar & user-friendly), some users are excited and ready to see what’s new.

However, the only thing that changes with WordPress 5.0, is the editor.

The WordPress Gutenberg editor

The WordPress Gutenberg editing is fully based on what is called “blocks“. Even though the Gutenberg Editor intends to make the task of generating and publishing content through WordPress more systematic as well as easier, be prepared for a little handwork in the beginning, until you get totally used to it.

Because this new WordPress Gutenberg editor works differently. It is aimed to make content creating with WordPress more interesting and dynamic. And therefore, it introduces a totally new way to add content using blocks.

Since both the editors, the old TinyMCE based and the Gutenberg editor are so different from each other, the team behind it decided to let the WordPress users try the new WordPress editor before it is released. You can try it by downloading it from the WordPress plugin repository.

WordPress Gutenberg Editor: Goodbye TinyMCE WordPress editor

Before the Gutenberg Editor comes integrated directly into WordPress, you can try its features through the Gutenberg plugin. The plugin lets you try the new WordPress block editor on your site, and experience it before it becomes a core feature of WordPress.

As of writing this (12th July, ’18), the plugin has 10000+ active installs and an average rating of 2.7 stars out of 5, which clearly indicates the mixed reviews about the plugin.

With this plugin, you can download, install and activate WordPress Gutenberg like a simple WordPress plugin and get started with it.

The WordPress Gutenberg Project intends to change how you publish your content through WordPress. The Gutenberg editor has no resemblance to the traditional WordPress editor we have used till now. With the new editor, they have tried to integrate page builder like functions for creating and managing content.

However, don’t expect Gutenberg to be like any of the popular page building tools for WordPress too. It’s nothing like Visual Composer or Divi builder or the Beaver builder. The new WordPress Gutenberg is totally different than any of the page building plugins you have ever used.

But there’s no need to panic. We tried the Gutenberg plugin and here we will show you how you can try the new Gutenberg plugin for yourself.

Try the WordPress Gutenberg Editor

To know what’s new about the Gutenberg Editor, you can download the latest WordPress version (4.9.7) and then download the WordPress Gutenberg Editor and install it just like you install any other WordPress plugin.

Note: We recommend you try this new WordPress Gutenberg Editor on a test site. Even though it’s safe and unlikely to cause any potential damage to your site, but trying out a new text editor directly on live site isn’t a good idea.

How different is Gutenberg editor from WordPress page builders

Gutenberg editor is the front end editor and is different from the page builders. Even though they have almost similar features, both have completely different purposes and use. The following are some of the major differences among the two.

Front end and back end editing

Gutenberg is an editor and it is designed to work on WordPress pages and posts when they are edited through the backend. Gutenberg is not a front end editor. On the other hand, WordPress page building plugins like Elementor, Divi builder or Beaver builder are all designed to work on the front end. They let you see the page you are editing as it is on the front end and you can easily edit them on the go.

Even though the Gutenberg editor lets you preview the changes, it does not let you see the changes applied real time like the WordPress page builders do. For the inexperienced designers, WordPress plugins do a great job as they are more intuitive and comparatively have better options to help you design pages.

Inbuilt feature

Gutenberg is now available as an integral part of WordPress. As it replaces the basic TinyMCE editor, the Gutenberg editor is here to provide a next level experience for bloggers and content creators.

The WordPress page builders are more useful for the designers. They can set the structure of the pages, and use different page building elements to build the pages. However, they need to be included externally. Even if your WordPress theme is a page builder based theme, it will come with a page building pre-included and

Works with any theme

The Gutenberg editor is available as an inbuilt WordPress feature which means that it will not cause compatibility issues with most themes. Newer versions of the WordPress themes are designed specifically for working with the Gutenberg editor.

However, this is not true for the page builders. If your theme doesn’t support the page builder, it might cause problems when redesigning a page. Therefore, even though the page builders can help you create new pages, and new content easily, they might not be very helpful in editing the existing content.

Page builder: More flexible

The Gutenberg editor is just an editor that you can use to create content on your website, whereas page builders let you do much more.

We can say that Gutenberg editor’s main role is to help people create interesting content with different content blocks, whereas page builders can help you design amazing layouts and pages for your website. Gutenberg editor comes with blocks mainly designed to structure your content. For example: There are blocks for including accordions or tables in your content. However, page builders can help you design pages.

Even if we ignore their basic utilities, the WordPress Gutenberg plugin has limited options as compared to the page builders. These days you get page builders with plenty of amazing options. Moreover, there are addons for these page builders to add more flexibility.

Installation and Activation of Gutenberg

With WordPress 5.0, when the Gutenberg is released as a core component, you won’t have to install or activate it. But to test before it is integrated, you have to install and activate it as a plugin.

To install it, you can download it from the link provided above, and install it or you can also navigate to Plugins >> Add a new section of your WordPress install and search for the Gutenberg plugin, install and activate it.

Once the plugin is installed, you can activate it.

Upon activation, visit your posts(blog) or page section and you’ll see the difference when you try to edit them. There’s an extra link called the “Classic editor”.

This means that the simple edit option will open the new WordPress Gutenberg editor while the other one will open the WordPress Classic editor, the one we have used till now.

When you install the Gutenberg plugin, it will make the WordPress Gutenberg Editor, the default editor for you pages and posts. So when you try to add a new page/post, the first look of the Gutenberg editor will look something like the image below:

However, you will find all the options handy. As you can see, just like the traditional WordPress editor, the Gutenberg editing interface also shows all the options to save, preview, or publish the post. It also lets you change the slug, choose categories & tags. Besides it also has the option to “trash” the article.

All of these options are similar to the ones you find in the basic WordPress editor.

The WordPress Gutenberg Blocks: A new way to create content

So as we all already know, The Gutenberg editor lets you create and add the content in form of blocks. These blocks are interactive and you can easily edit and move them.

There are multiple types of blocks that you can add into your website using the WordPress Gutenberg editor.

Adding a Gutenberg block/Removing a block

You can easily add a new block to your WordPress website with the Gutenberg editor. You will find the “+” button while hovering over the content area on the Gutenberg editor.

As you can see, there are different blocks available. You can choose them as per your requirements.

Moving Blocks in your post

With the new block based editing system with WordPress Gutenberg, it is quite easy to change the structure of the post. The blocks can be move upwards or downwards with simple button clicks.

The folowing are the basic blocks that you can use to create content using the new WordPress Gutenberg editor

Custom HTML: This lets you embed custom HTML code into your website. You can also preview the output of your HTML code.

Paragraph: lets you add a standard text paragraph as a part of your content.

Image: You can use this blog to upload your image with easy drag and drop method. You can even embed the image from your local computer.

This block also lets you resize your image very easily.

The heading block: Even though there are numerous ways you can include heading into your website, the heading block lets you add it most conveniently.

Gallery block: By far, the gallery block is one of my favorite Gutenberg blocks. It lets you create beautiful galleries on the go. Even though the options to manage the images in the are limited, you can still assign a CSS class for the gallery to have it more customized.

Lists: You can create ordered and unordered list using this WordPress Gutenberg editor’s list block

Quote: With the new WordPress Gutenberg editor, it takes a moment to highlight important quotations on your page. You can do this using the quote block.

The Audio block: You can use this Gutenberg block to add an audio file to your website.

The subheading block: The subheading block of the Gutenberg editor, as the name suggests, is for subheadings in the pos. If you want advanced formatting for your subheading, you can assign an additional CSS class to this block.

The Gutenberg editor formatting blocks

Custom HTML: Add and preview custom HTML code.

Classic: If you are only comfortable with the WordPress classic editor, the new Gutenberg editor lets you use that too.

Code: This block lets you insert codes into your WordPress page/post. The output of the code into your WordPress page/block.

Preformatted: This Gutenberg block allows you to insert preformatted text in your WordPress website.

PullQuote: This quote will let you display important quotes of your page as a graphic element. You can insert the quote and add the citation.

The output of the pullquote block will be something like below:

Table: If you want to conveniently create tables using the WordPress editor, then you can use the table block.

Moving blocks with Gutenberg editor

You can create content using different blocks in Gutenberg editor. So finally, when you have all the blocks for your WordPress page or post ready, you can move them with the drag and drop options.

With these movable blocks, it really easy to restructure your pages and arrange or rearrange the content, in a matter of minutes.

You can use the small arrows that appear beside the blocks to move a bock higher or lower on the page.

Besides, you can also easily restructure your page content by changing the position of your blocks with drag and drop options.

With the block-based design and easy moving options, we can create content that can be easily restructured as and when required. Also, adding a new block of content is relatively easy with the new WordPress Gutenberg editor.

Gutenberg blocks: Layout elements

Button: If you want to add custom buttons in your post or page, you can do so using this layout editing block.

Columns: If you want to add content in the form of two columns, you can easily do so.

Gutenberg widgets block

There are a few widget blocks that you can use to enhance the usability of your page. With these blocks, you can insert shortcodes, category lists and latest post section in your content.

Short-code block: This lets you add shortcodes specific to your WordPress site.

Categories: This lets you show a section on your page where the categories are listed. You can choose if you want to show the categories as a bullet point list or as a dropdown, or in a hierarchy. You can also choose to show the post counts besides the category name.

Latest posts: This widget shows a list of latest posts to your users. Again, there are a number of options you can choose from. You can set the number of latest posts to be shown, decide the sorting order, choose the category, etc.

What are shared blocks?

Do you have a specific block of your content that you need to repetitively use for different posts/pages?

Then you can build the block and save it for later use, on some other page/post. This eliminates the requirement of creating the same block everytime you create a new page. And the similar content can be added easily just by inserting the shared block.

How to create a shared block in Gutenberg editor?

To create a share block, first of all, choose the type of block you want, place the text, image, link, etc, and format it as per your requirements. Once the block is ready, click the menu option on the right side.

Choose the option that says “Convert to shared block”.

You can type in the name of the shared block and save it for later use.

Using a shared block on your page

Once you have saved a block as a shared block, it’s ready to use whenever you need. To use a shared block, choose to add a new block, and then scroll down to find the shared blocks sections.

You can choose the shared block you want to use and click it. This section also shows a preview of your shared block.

Change/Remove a shared block

To update a shared block, you will have to first choose it. Now the changes made in the shared block will be reflected everywhere it is used. So if you want to customize it for just one page, you can change it to a regular block by choosing the “Change to regular block”.

You can even permanently delete a shared block. Open the right menu options, and choose “Delete shared block”. This will remove the shared block permanently. It also removes the block from all the other pages/posts it is used on. So be careful when you remove a shared block.

This is how you can remove this block from under the title “Shared blocks” when you no longer want to use it.

Gutenberg editor: Embedding URLs was never easier..

The new Gutenberg WordPress editor lets you seamlessly embed web-pages/videos from external sites. It covers all the popular sites like YouTube, Facebook, Spotify, Twitter, Instagram, Flickr, Vimeo, SoundCloud, etc.

Here’s a screen grab of how an embedded tweet will look on your page:

So is the new Gutenberg editor good or bad?

The new Gutenberg WordPress editor has some really useful features that will make life much easier for the end users. On the other hand, it will be hard to bid goodbye to our traditional WordPress editor, which works flawlessly. We are constantly divided between “Change is inevitable” and “If it ain’t broke, don’t fix it”.

The idea of the shared blocks, the embed blocks, and adjust-ability of blocks can really help users create content faster and more efficiently. The blocks are flexible, and the Gutenberg editor will serve as a new experience for the publishers.

Need some fancy blocks for your project?

Check out our, Blocks Builder: Ultimate blocks for WordPress Gutenberg plugin with some custom Gutenberg blocks to create a beautiful site with beautiful content . These blocks include some enhanced text blocks, and some beautiful social icons related blocks. Or you may be interested in this list of the best Gutenberg addons & resources.

WordPress enthusiasts are constantly debating about Gutenberg, but that changes nothing. WordPress Gutenberg is already on its way. All we can do is, prepare for this historic change in the WordPress world.

Further reading: 10 best WordPress Gutenberg Blocks for an enhanced publishing experience.