Top 7 Plugins for Gutenberg [2021]
Tags: wordpress, gutenberg, plugin
Published: 2021-04-20 02:52:56

As you may all know, Gutenberg is now not just a WordPress editor. Recently, WordPress has the ambition of making Gutenberg also a <a href="https://metabox.io/best-wordpress-page-builders/">page builder</a>, a useful tool to build up a WordPress website. Following this tendency, web developers have created numerous plugins, added many blocks, layouts, settings,... to satisfy the demands of developers and website owners. Using these plugins along with <a href="https://gretathemes.com/gutenberg-compatible-wordpress-theme/" rel="follow">themes made for Gutenberg</a> will definitely help users and developers create websites, <a href="https://metabox.io/create-landing-pages-in-wordpress/">landing pages</a>, or any page as well as publish posts at ease.

To get more information about the most popular plugins for Gutenberg at present, let’s spend 5 minutes going through our list of 7 plugins below. Our evaluation is based on the following criteria:
<ul>
 	<li>Number of additional Gutenberg blocks</li>
 	<li>Custom options for blocks (including pre-built blocks and patterns)</li>
 	<li>Flexibility and being user-friendly</li>
 	<li>Display ability and compatibility with themes</li>
</ul>
Now, hesitate no more and go to our first candidate:
<h2>Atomic Blocks</h2>
<a href="https://wordpress.org/plugins/atomic-blocks/">Atomic Blocks</a> provides users with <strong>15 pre-built diverse blocks</strong> such as Testimonials, Contact info and map, Service 3 and 4 columns, Pricing, etc. Personally, I think they would match a business website quite well.

<img class="aligncenter" src="https://i.imgur.com/T1jguHg.png" alt="Atomic Blocks plugin provides users with 15 pre-built diverse Gutenberg blocks." width="595" height="908" />

Besides, ‘sub-block' can be added conveniently. For example, in this <strong>Pricing Column</strong> block, you can add a sub-block made for pricing tables.

<img class="aligncenter" src="https://i.imgur.com/wjkrhet.png" alt="Add a sub-block made for pricing tables using Atomic Blocks plugin" width="1561" height="900" />
In another case of <strong>Advanced Column</strong>, you can customize layouts easily within a few clicks right on the block:

<img class="aligncenter" src="https://i.imgur.com/WdcnLxM.gif" alt="You can customize block layouts easily within a few clicks." width="955" height="785" />

Additionally, Atomic Block also has eye-catching premade layouts for different sections of the page:

<img class="aligncenter" src="https://i.imgur.com/B4iYqmA.png" alt="Atomic Block has eye-catching premade Gutenberg layouts for different sections of the page" width="1920" height="937" />

However, when I choose a section with a full-width layout, like in the picture below:

<img class="aligncenter" src="https://i.imgur.com/cjck2d8.png" alt="choose a section with a full-width layout" width="1920" height="937" />

My <a href="https://freewpthemes.reviews/estar/" rel="follow">eStar</a> theme does not display a full-width layout on the front end as I expected:

<img class="aligncenter" src="https://i.imgur.com/o5jbAj8.png" alt="display a full-width layout on the front end of the WordPress website" width="1902" height="898" />

Thus, you should use Atomic Blocks plugin together with Atomic Blocks theme to get the best result.
<h2>CoBlocks</h2>
<a href="https://wordpress.org/plugins/coblocks/">CoBlocks</a> seems to be quite generous when providing up to <strong>29 free blocks for Gutenberg</strong>. These blocks have many features like support column division, adjust the width, margin, padding, custom colors, and add some column blocks like posts, services,...

In general, users can make use of this Gutenberg plugin to <a href="https://gretathemes.com/create-a-website-wordpress/" rel="follow">build up a website</a> with various and eye-catching interfaces. To illustrate, use <strong>Shape Divider</strong> and freely choose custom colors, sizes, and shapes... that suits your site the most:

<img class="aligncenter" src="https://i.imgur.com/bMW2TFo.png" alt="CoBlocks plugin helps you build up a WordPress website with various and eye-catching interfaces" width="1902" height="907" />

What I like the most about CoBlocks is the <strong>College</strong> block. You not only have <strong>3 unique and stunning gallery layouts</strong> but also <strong>can choose an image filter attached with preview</strong>, not to mention shadow, <a href="https://gretathemes.com/adding-lightbox-to-wordpress-for-beginners/#what-is-lightbox-and-how-to-add-it" rel="follow">lightbox</a> option. In terms of idea, I think CoBlocks team can be considered as a successful case.

<img class="aligncenter" src="https://i.imgur.com/HBbhJ1k.gif" alt="choose an image filter attached with preview with CoBlocks plugin" width="1920" height="937" />

On the frontend, this block also displays beautifully:

<img class="aligncenter" src="https://i.imgur.com/LKjnVBb.png" alt="the block also displays beautifully on the front end of the WordPress website" width="932" height="898" />
<h2>GenerateBlocks</h2>
In comparison to the others in this post, GenerateBlocks has fewer blocks. This plugin for Gutenberg only supports the following <strong>4 blocks</strong>:

<img class="aligncenter" src="https://i.imgur.com/atoRDnA.png" alt="GenerateBlocks plugin supports 4 Gutenberg blocks" width="580" height="678" />
<ul>
 	<li><strong>Grid</strong>: Create advanced layouts with flexible grid</li>
 	<li><strong>Headline</strong>: Create various kinds of content with advanced fonts, custom colors, and icons, …</li>
 	<li><strong>Container</strong>: Organize your content into rows and sections</li>
 	<li><strong>Button</strong>: Create and customize buttons</li>
</ul>
However, these blocks have <strong>so many settings</strong> and allow you to <strong>customize even the minor details</strong> of them.

For example, this <strong>Container</strong> block allows you to customize even the size of the margin, padding, and other parameters.

<img class="aligncenter" src="https://i.imgur.com/6QZq8Fk.png" alt="Container block allows you to customize even the size of the margin, padding, and other parameters." width="1456" height="903" />

GenerateBlocks even supports users to customize the block's display on Desktop, Tablet, Mobile, and shows responsive designs on each device right in the editor. How convenient it is!

<img class="aligncenter" src="https://i.imgur.com/wP0LKXe.png" alt="GenerateBlocks plugin supports to display on every devices." width="1423" height="852" />
<h2>Kadence Blocks</h2>
<a href="https://wordpress.org/plugins/kadence-blocks/">Kadence Blocks</a> provides you with 12 blocks made for Gutenberg. In my opinion, these blocks are not really creative in terms of ideas, but <strong>their custom options are very diverse and flexible</strong>.

<img class="aligncenter" src="https://i.imgur.com/kvnLBcB.png" alt="Kadence Blocks plugin provides you with 12 blocks made for Gutenberg" width="520" height="812" />

The most special thing about Kadence Blocks plugin is that you can <strong>enable and disable each block, including block settings, for each user role</strong> on an easy-to-use and convenient interface.

<img class="aligncenter" src="https://i.imgur.com/hIwXjWk.gif" alt="enable and disable each Gutenberg block on an easy-to-use and convenient interface." width="1920" height="937" />

Besides, Kadence Blocks also has a custom width for the editor’s interface on the backend:

<img class="aligncenter" src="https://imgur.com/J6gPqSu.png" alt="Kadence Blocks has custom width for the editor’s interface on the backend of WordPress website." width="1600" height="781" />
<h2>Qubely</h2>
<strong>23</strong> is the number of blocks that <a href="https://wordpress.org/plugins/qubely/">Qubely</a> provides us. That’s impressive, isn’t it?

<img class="aligncenter" src="https://i.imgur.com/U8GVpsb.png" alt="Qubely plugin supports 23 Gutenberg blocks." width="529" height="921" />

Especially, the <strong>Import Layout</strong> button right beside the block-adding button makes it convenient to import the layouts. The number of pre-built layouts is quite impressive as well: <strong>more than 60 layouts for the free version and 100 layouts for the premium one</strong>.

<img class="aligncenter" src="https://i.imgur.com/VwOnPot.png" alt="Qubely plugin contains more than 60 layouts for free version and 100 layouts for premium one." width="1920" height="937" />

However, keep in mind that these layouts display may look different on the front end, which depends on your themes.

<img class="aligncenter" src="https://i.imgur.com/tNRfQ37.gif" alt="These layouts display may look differently on the front end of the WordPress website" width="1920" height="937" />

Qubely is able to let users customize blocks’ display on different devices, just like GenerateBlocks. One different thing from GenerateBlocks is that <strong>you can adjust the responsive design of each block</strong>.

<img class="aligncenter" src="https://i.imgur.com/bhsKd4U.png" alt="You can adjust the responsive design of each Gutenberg block" width="1784" height="819" />

Besides, this Gutenberg plugin has other settings like custom colors, fonts, sizes, width, and you can even add presets if you want:

<img class="aligncenter" src="https://i.imgur.com/HV3AyIs.gif" alt="Qubely plugin has other settings like custom colors, fonts, sizes, width" width="1920" height="937" />

In my opinion, Qubely is one of the most supportive and featured-rich plugins for Gutenberg.
<h2>Editor Plus</h2>
<a href="https://wordpress.org/plugins/editorplus/">Editor Plus</a> supplies a library including <strong>22 built-in templates</strong> for Gutenberg. These templates are featured-rich and can be used for many types of websites: wedding, photography, business,...

<img class="aligncenter" src="https://i.imgur.com/1cncqaw.png" alt="Editor Plus supplies a library including 22 built-in templates for Gutenberg." width="1920" height="937" />

However, these templates might not be compatible with your themes from the beginning, so you will have to spend a short time customizing them to make your website display more beautifully.

<img src="https://i.imgur.com/XEmJ8p9.png" alt="Customize block templates to make your WordPress website display more beautifully." width="1920" height="937" /> The template display on the backend of the WordPress website[/caption]

<img src="https://i.imgur.com/EhkB7Ry.png" alt="The block templates show up on the WordPress website" width="1256" height="896" /> The template display on the backend of the WordPress website[/caption]

Also, this Gutenberg plugin provides some interesting and practical blocks like rating, counter, icon,... as you can see in the picture below:

<img class="aligncenter" src="https://i.imgur.com/MDO3cky.png" alt="Editor Plus plugin provides some interesting and practical blocks like rating, counter, icon" width="513" height="696" />

&nbsp;

Above all of those, Editor Plus has <strong>plenty of custom options for Gutenberg</strong> like typography, shape divider, adding icons to any positions,... You can also customize different features on different devices:

<img class="aligncenter" src="https://i.imgur.com/e7zuFQ8.gif" alt="Editor Plus plugin has plenty of custom options for Gutenberg" width="1920" height="937" />
<h2>Stackable</h2>
The last candidate in our top list of Gutenberg plugins is <a href="https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/">Stackable</a>. Stackable has built-in templates along with eye-catching pre-made designs for blocks. You can make use of <strong>89 free designs, 264 premium designs for blocks, and different IU Kits</strong>.

<img class="aligncenter" src="https://i.imgur.com/DVD0Cz8.png" alt="Stackable has built-in templates along with eye-catching pre-made designs for Gutenberg blocks." width="1920" height="937" />

After choosing your preferred templates, you can style them as much as you want. Stackable supports you to customize numerous details and to show/hide them on different devices.

But I think the interface of this feature is not really user-friendly. Perhaps, its wide range of options makes me confused at the first look.

<img class="aligncenter" src="https://i.imgur.com/qSybFTg.gif" alt="the interface of Stackable plugin is not really user-friendly" width="1920" height="937" />

In order to get these templates displayed exactly as they show in the backend, you will have to customize in your current theme.

<img class="aligncenter" src="https://imgur.com/OileKdm.png" alt="get the block templates displayed exactly as they show in the backend of the WordPress website" width="1048" height="897" />
<h2>The Verdict</h2>
So we have gone through our review of the <strong>top 7 popular plugins for Gutenberg</strong>. Each of them has certain pros and cons that may match certain kinds of users. CoBlocks, for example, is developed from a creative idea, while Qubely provides so many custom options and is easy to use. We also cannot skip Editor Plus with various built-in templates and detailed setting options.

Which one out of the 7 plugins above is your favorite? Feel free to tell us in the comment section!