WordPress, an open-source Content Management System, launched its version 5.0 on 6th December 2018. This also marked the launch of the new block-based editor known as ‘Gutenberg’.

Since WordPress was officially introduced to the world in 2003, its visual editor wasn’t upgraded substantially when compared to other content development tools such as Ghost or Medium. This is what sets the stage for the Gutenberg WordPress plugin.

What is Gutenberg Block Editor?

Termed after the inventor of modern press, Johannes Gutenberg, this visual editor of WordPress introduced blocks that allow the creator to customize as they want with some straightforward instruction manual. This block system gives the content creator the freedom to define and specify every part of their content.

You can change a sentence into a quote merely by placing it into a new block and then work on its placement and decoration. Every single block has a distinct setting with regards to layout, spacing, style, and the like. You can create blocks for:

⦁ Galleries
⦁ Images
⦁ Columns
⦁ Buttons
⦁ Quotes
⦁ Code
⦁ Video
⦁ Text
⦁ Other embeds

Furthermore, third-party developers have designed various plugins that work beautifully with Gutenberg Blocks.

What Makes Gutenberg Editor Awesome?

Although the team at WordPress is constantly updating the Gutenberg plugin with really cool features, here are a few that makes it stand out amongst the creators:

Drag & Drop Images

Before Gutenberg was introduced, adding images to WordPress was a cumbersome process. One had to click the Add Image button and then follow a 3-step process. However, now you can just drag and drop the image directly from your system.

Add Blocks by Using Slash Command

Gutenberg allows you to instantly add block by using the slash command. For adding a Gutenberg block, just type slash and it automatically shows you options.

Creating Anchor Links

With WordPress Gutenberg, you can directly add an HTML anchor and create anchor links in 2 easy steps:

⦁ Click on the heading in the block setting. Select Advanced Settings and add anchor text.
⦁ Further, add a link similar to the HTML anchor text.

Fullscreen Mode, Spotlight Mode, and Top Toolbar

Let’s see this one by one:

Fullscreen mode: Like the classic editor, the Gutenberg editor also comes with the full-screen mode feature. This allows the user to focus on content and avoid any diversions.
Spotlight mode: The spotlight mode turns every block, except the one you are working in, to grey. Thus, enabling better focus.
Top toolbar: To access the toolbar click on any of the blocks and the toolbar will appear on the top. Unlike the classic editor where hovering the cursor over a section would bring down the toolbar.

Work in Full Width

Before the Gutenberg editing plugin was introduced, users had to install plugins to access the editor in full width. With the advent of Gutenberg, this is now an inbuilt feature of WordPress. ]

Reusable Blocks

The best feature, by far, of Gutenberg editor, is the ‘Reusable Block’. It gives the user the advantage of using a particular block created later by simply saving it.

Upgrade with New Plugins

Gutenberg editor allows developers to create new plugins that help in extending the usability and functionality of the editor.

Top 10 Gutenberg Plugins

Let us now see what the top 10 plugins are that you can use with Gutenberg editor to develop awesome content.

WooCommerce Blocks

If you are a marketer who wants to sell/advertise their products on WordPress, then WooCommerce blocks is your best bet. The plugin offers the following blocks:

⦁ Category Block
⦁ Product Block
⦁ Best selling product/s block
⦁ Handpicked product/s block
⦁ Top-rated product block
⦁ Review block
⦁ Product filters

Gutenberg Manager

If while developing content, you wish to use page builders like Elementor or Visual Composer instead of Gutenberg, you can do so by disabling Gutenberg editor with the help of Gutenberg Manager. Once done, you can enable it via the Manager too.

The Manager can be accessed under the ‘Menu’ tab on the dashboard. It provides you with 4 options:

⦁ Settings
⦁ Default Blocks
⦁ Additional Blocks
⦁ API/Hooks

This is a really versatile plugin used by a range of WordPress websites, especially Gokken platforms of the Netherlands.

Stackable

Top-rated and most expansive plugins created specifically for the Gutenberg editor, Stackable provides the creator/developer with advanced blocks that have their page building options. This allows the developer a landscape to develop their page/website as planned.

Getwid

getwid plugin

Created by Motopress, Getwid gives you over 30 content blocks that allow you to exercise more control. Amongst the blocks are image sliders, sections, price boxes, image stack galleries, Mailchimp, Instagram and the like. Getwid is free to download.

CoBlocks

coblocks

Developed by GoDaddy, this WordPress Gutenberg blocks plugin is lightweight and very distinctive. It offers you tools to create a stunning and fast website. Among the many interesting features that come with the plugin are logos&badges, media cards, maps, alerts, accordions, and dividers.

Block Gallery

Block Gallery  plugin

Built exclusively to compliment the Gutenberg editor, this plugin includes galleries such as full screen, carousel, and masonry. Unlike most plugins, where the gallery is created on a separate page and then embed, in Block Gallery, no separate page is created.

Block gallery is compatible with CoBlocks and is perfect for photographers, artists, and content creators. Download the plugin from here

Kadence Blocks

Kadence Blocks plugin for Gutenberg

If you wish to customize your layout as per your vision, then Kadence Blocks is the best plugin for you. Built like a toolkit this plugin gives you the benefit of backgrounds, vertical-align, padding and more. Kadence block includes:

⦁ Advanced Button
⦁ Advanced Heading
⦁ Testimonial
⦁ Accordion
⦁ Row Layout
⦁ Advanced Gallery
⦁ Tabs

All these blocks allow you to control the different aspects of the Gutenberg editor. For example, with an advanced heading block, you can play around with the fonts (weight, size, style) color, and spacing.

Rich Text Tool

This WordPress editor plugin is not a block rather it is a small upgrade to the Gutenberg editor. With this plugin, you get features like:

⦁ Buttons such as subscript, superscript
⦁ Inline text and background-color

Atomic Blocks

atomic blocks for Gutenberg

While creating a website on WordPress, we all look for ways to customize the page to increase engagement. This issue is resolved by installing the Atomic Block plugin for the Gutenberg editor.

The plugin allows you space to play around with the page layout and provides options for buttons, and page sections. If you are not sure about how your website should look, then Atomic Block gives you pre-planned sections and layouts under its Section Layout blocks.

Advanced Gutenberg

Advanced Gutenberg

While the Gutenberg editor is full of features and benefits, it is still in the development phase. New features are rolled out periodically by the developers or are fulfilled by other plugins. Advanced Gutenberg is one such plugin that fills in certain loopholes present in the existing editor by providing:

⦁ Advanced table block
⦁ Testimonial block
⦁ Accordion block
⦁ Contact form
⦁ Introduces the lightbox effect in the editor
⦁ WordPress login and register block

The Next Steps

Gutenberg editor is undoubtedly one of the best updates that could have accompanied WordPress. Ask editors how their workload is reduced tremendously, all thanks to amazing features that allow easy editing. But this is not the end of the road. As WordPress 5.4 is scheduled to be released soon, we are hopeful that more exciting features are in the pipeline.

What are your views on this? Let us know in the comments below.