Best Gutenberg Blocks Plugins in 2020

WordPress has been an excellent and versatile CMS for a variety of websites whether blogging or commercial. The much-awaited update of the WordPress- the ‘Gutenberg’ came into existence since the release of its latest update WordPress 5.0 on December 6, 2018. It marked a drastic change in the way WordPress was ever used before. The update has recently grabbed much attention and popularity in the WordPress community since its launch. Let’s move on further with some of the Best Gutenberg Blocks Plugins.

What is Gutenberg?

Zack Katz, speaking at WordCamp Denver in 2017, elucidated:

“Gutenberg is an important step forward for WordPress. Gutenberg enables WordPress to build content layouts, not just write articles. It is one of the many transitions happening in WordPress toward more simplified user experience.” 

Gutenberg is the official name for WordPress 5.0 ‘s new editor and Matt Mullenweg is the man behind it. It is named after Johannes Gutenberg, who introduced the mechanical printer to Europe, starting the printing revolution. Gutenberg can be easily added to any WordPress site as a plugin downloaded from the WordPress plugin directory. Gutenberg provides a new block-based editing environment in WordPress. Well, more than just being an editor, it was introduced with a purpose to be the core foundation transforming the customization and site-building in WordPress. It was designed especially for enhancement of the media-rich sites, with a sole purpose to help users create dynamic layouts. The editor has a revolutionary approach opening its gateways to an all-new style of creating content.

According to WordPress, “The goal of the block editor is to make adding rich content to WordPress simple and enjoyable.” 

Gutenberg vs Classic Editor-What’s New?

In the classic editor, everything was placed onto a single large HTML file. Gutenberg offers a lot more possibilities with its novel tools for visual editing, dynamic layouts. Gutenberg provides a more organized pattern for creating content. It has divided everything into blocks. You can insert, reorganize and design your multimedia content easily using these blocks.

Blocks emerged up as a great new tool for building appealing content. With blocks, you can insert, reorganize, and style multimedia content with very little technical knowledge. There are different blocks available and you can determine every part of your content using blocks.  Each block is customizable, with its own unique set of editable options such as size, placement, and colours. There are specific blocks available for paragraphs, lists, Quotes, Headings, Code, Images, Galleries, Shortcodes, Columns, Buttons, Widgets, and a ton of embeds!

So, you can easily insert an Image using Galleries Block or you add quotes using the Quotes block. You can even change a single line text into a quote by just changing its block specifications!

New features of the Gutenberg

Copy and Paste easily

One of the best features of Gutenberg is that you can directly copy and paste your content from Microsoft Word, Google Docs into the editor.

Add Images in a Go

Uploading images is far simpler as compared to the Classic Editor as it was time-consuming. To add an image, you must add media and then upload it. You can also add an image to your content by simply dragging the images from your desktop. There are no additional confirmation steps, it’s as simple as that!

Blocks are Fun

Add a Block: You need not waste time searching for blocks as the new blocks can be added using a Slash symbol (/).

Blocks are movable: The best feature is that besides having their own alignment and formatting options, the blocks are movable! This means you can simply drag the box to desirable spot on the page while the other blocks will shift accordingly. You can arrange the blocks by simple Drag and Drop method.

Reuse a block: The blocks are also reusable! Yes, you can save a box and use it to other pages too! The reusable content can be anything from a button to quote and you can simply save it with a name by clicking the ‘Add to Reusable Blocks’ and use it a number of times! The Blocks are easy to manage, and you can also import or export them as JSON files!

Transform a Block: This feature helps transform a text into another form. For instance, you have written a text and you must convert it into a heading- you can simply transform it into a heading block. All you have to do is to select the text and click on transform icon without any deletion or creation of new block! It really saves time!

Mobile-Responsive

The Gutenberg editor works great on mobile and it’s an added advantage. So now you can utilize your cell phone and do a quick edit effortlessly!

Distraction-free environment

Do you find the sidebars distracting? No worries! The left sidebar can be hidden by enabling the Full-Screen Mode. This gives more area to write free of distractions.

Easy to Use

The Gutenberg editor has made things a lot simpler and it is easy to use for beginners. A lot more feature enables to experiment with the content. You can easily place all kind of feature with the widgets block or if you want to insert code just add in the code block, quote? Go for quotes block. Everything is as easy as a pie!

So, the Gutenberg help you build content in a structured, visually appealing manner besides providing you with an effective writing environment, with great layout and lots of space for your content to stand out. Now, apart from this, a good feature of Gutenberg is that you can enhance its functionality. How? You can create your own block plugins or add different block plugins.

Several plugins have emerged that are revised to work in conjunction with Gutenberg. They help customize the content according to users and enhance the functionality of Gutenberg.

Here we present to you some of the Best Gutenberg Blocks Plugins in 2020, that I’ve collected to help you enhance your Gutenberg editor and bring more blocks. Here they are!

Guteblock

Guteblock is a collection of simple and elegant blocks. Guteblock helps you build a perfect website and creating a landing page of your own way according to your requirement. The Guteblock gets better and better every day as rapid developments are on its way. Guteblock offers 12 blocks in the collection.

• Team Members Block

The Team Member Block helps you to showcase the individuals in your team. You can add any interesting information about each individual in your teams like their position, duties and specialities. It is also useful for the author profile for posts.

• Testimonial Block

The Testimonial block Bring allows you to add a customer or client testimonial to your site with an avatar, text, citation and more. Customizations include text colour, size, background colour, and alignment. You can also highlight feedback from notable industry players.

• Container Block

Container Block allows you to wrap several blocks into a section and add padding, margins, background colours and images. You can change the container layout and size to different You can change the container layout and size to different configurations for ultimate flexibility.

• Post Grid Block

Customize your post by adding the title, images and paragraphs and bullets using the Post Grid Block. You can choose from multiple templates for your grids.

• Separator Block

Customize the layout where you can separate two blocks of content by a line using amazing separator blocks.

• Number Box Block

Display your numeric figures with the Number Box block. You can elegantly display steps in a process, different product options, different service plans, different product features and much more.

Atomic Blocks

Atomic blocks are a page building blocks for the new word press editor developed by the WP Engine.

Their focus is to help to build a beautiful collection of Gutenberg blocks to help you effortlessly build the website you’ve always wanted. The atomic blocks were initially launched with just a few blocks such as the Testimonials, Inline Notices, User Profile Box, Customizable Button, Drop Cap, Accordion, and Spacer & Divider etc.

Today they have expanded the features too much more. Atomic Blocks is the most popular and most downloaded library of beautiful, responsive, and customizable blocks for Gutenberg. Following blocks are available in the Atomic Blocks.

• Advanced Columns Block

A powerful, flexible column system to build custom, full-page layouts for your posts and pages.

• Newsletter Block

Add a customizable Mailchimp-powered email subscription form to your site and grow your audience.

• Pricing Table Block

Flexible, customizable, easy-to-use pricing tables to showcase your products and prices.

• Post Grid Block

Add an eye-catching, full-width section with a big title, paragraph text, and a customizable button.

• Container Block

Wrap several blocks into a section and add padding, margins, background colours and images.

• Call-To-Action Block

Add an eye-catching, full-width section with a big title, paragraph text, and a customizable button.

• Testimonial Block

Bring credibility to content by adding a customer or client testimonial to your site with an avatar, text, citation and more. Customizations include text colour, size, background colour, and alignment.

• Inline Notice Block

Add a colourful notice or message to your site with text, a title and a dismiss icon.

• Social Sharing Block

Improve the reach of your content as well as increase the likelihood of engagement by sharing your content. Add social sharing icons including Facebook, Twitter, Pinterest, LinkedIn, Reddit, and Email to your page with size, shape, colour and style options.

• Author Profile Block

Easy to add and customize a user profile box to your page with an avatar, name, title, bio info and social media links without ever leaving the editor.

• Accordion Block

Add an accordion text toggle with a title and descriptive text. Includes font size and toggle options.

• Customizable Button

Add a fancy stylized button to your post or page with size, shape, target, and colour options.

• Drop Cap

Add a stylized drop cap to the beginning of your paragraph. Choose from three different styles.

• Spacer & Divider

Add an adjustable spacer between your blocks with an optional divider with styling options.

Block Lab

Block labs is a WordPress Admin interface and a simple templating system for building custom Gutenberg blocks. Block Lab is built to lower the barrier of entry to building custom Gutenberg blocks for WordPress. So, you can harness Gutenberg and build custom blocks the way you want them to be built.

 What you can do?

• Add a new block in the WordPress Admin just like you would add any other post or page.
• Add from a range of fields and configure how they’re displayed.
• Build your Block template file using familiar WordPress development practices and simple PHP functions.
• Create a custom button

There’s a Pro version

• Pro version has many tools that help create a dynamic and powerful custom block
• Features like the repeater field, block & field conditions, alignment controls, button group field, post/user/menu object field. Block Lab Pro licenses include premium support and updates.

Stackable

Stackable is free to download Gutenberg plugin and one of the best Gutenberg blocks plugins that give you a cool way to create your pages using blocks. Stackable is created by the GΛMBIT and the aim of Stackable is to allow you to create beautiful webpages using the new WordPress editor. It allows you to build your pages freely with the assurance that every page you build with blocks just looks great. Stackable comes with basic and plain layouts for all blocks and you can seamlessly switch between these layouts. The Stackable library is extensive with the most comprehensive block collection for the new WordPress Editor. There is also a Premium version Stackable Library with premium layouts, premium effects, three-layer separators, CSS customizer.  Let’s have a look at the different block features offered by stackable: –

• Posts Block

Display your latest posts in a different style.

• Container

Layout multiple blocks in this versatile container.

• Separator

Gorgeous shape dividers for great transitions.

• Icon List

Create bulleted lists with different icons for features & customer benefits.

• Video Popup

Let your visitors view your showcase videos on fullscreen.

• Feature Grid

Showcase multiple features, products and services in a stylized grid.

• Testimonial

Show social proof that people your what you have to offer.

• Call to Action

Persuade visitors to perform an action – learn more, buy, get & much more.

• Pricing Table

Show pricing options detailing prices, inclusions, and other info.

• Accordion

Display information in collapsible rows for organizing content.

• Team Members

Highlight your awesome team and their talents.

• Notification

Show important dismissible notices to users.

• Feature

Display large sections to emphasize important info.

• Card

Elegantly show content in a crisp and modern layout.

• Button

Display buttons with ease and Elegance.

• Blockquote

A styled quote, an essential for blog or news articles.

• Image Box

Create a collage of images to showcase your portfolios or services.

Premium Blocks

Premium Blocks is another plugin that helps you build professional pages and even complete websites using new WordPress editor. The website is owned by Leap13 Ltd. It is free to use, 100 % compatible with Gutenberg and no coding is required to build. Gutenberg Blocks library of Premium Blocks is ever-growing. The following blocks are available in the Premium Blocks collection:

• Section Block

Create eye-catching sections using the Premium Section Block.

• Video Box Block

Add playable videos to your page with no coding required.

• Icon Box Block

The best way to show off a short brief about the services you provide.

• Icon Block

Brings Font Awesome & WordPress dash to Gutenberg.

• Dual Heading Block

Have a great looking heading with Dual Heading Block.

• Testimonials Block

Enhance your website with user testimonials block for Gutenberg.

• Button Block

The best tool to have attractive looking buttons.

• Google Maps Block

Add and customize Google Maps directly inside Gutenberg.

• Banner Block

Create a great call to actions using Banner Block.

• Accordion Block

Include more data in a small area using Accordion Block.

• Counter Block

Show your own facts and figures with cool animation

• Pricing Table Block

The best way to display your pricing in a modern way.

 CoBlocks

CoBlocks is a suite of professional page building content blocks for the WordPress Gutenberg block editor. It is built by the ThemeBeans company is one among the Best Gutenberg Blocks Plugins and recently acquired by the GoDaddy website. The blocks are hyper-focused on empowering makers to build beautifully rich pages in WordPress. CoBlocks let us add grids, drop-in social icons, add pricing tables, insert gifs, style fonts and more. Here are the special features provided by CoBlocks:

• Responsive Grid System

The Row block allows you to design dynamic layouts based on a responsive grid system. You can choose the number of columns you’d like, select a layout, drag to resize, configure margins, set padding and drop-in background images.

• Get technical with styles

Add dynamically generated content areas with specific responsive margin and padding settings using the exceptional Row and Columns blocks.

• Control Typography

Hels design pages with stunning typography using the new Typography Control Panel. Set custom fonts, line heights, weights and transformations for any core.

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks is a perfect tool for the new WordPress Editor that provides dozens of attractive features and Blocks. Advanced Gutenberg Blocks is a project by @MaximeBJ. They provide several blocks with various options regarding block management. It also provides an option to deactivate blocks and also allows to customize the editor experience. A brief idea of the features provided are listed below:

• Block Management

Advanced Gutenberg Blocks features a setting page with all the blocks where you can edit default settings and manage your blocks.

• Deactivate Blocks

You can easily disable the default blocks that you don’t need with one click from the blocks management page!

• Tweak Editor Settings

Helps to customize a lot of settings within the editor without a line of code

• Customize Editor width (and wide blocks).
• Customize default colours in palettes.
• Disable custom colour button in palettes.
• Customize default font sizes.
• Disable custom font size option.
• Activate Wide blocks.
• Activate default blocks stylesheet when the theme doesn’t handle blocks styles.
• Activate responsive embeds.

• Richtext Tools

Bring back your Tiny MCE buttons in the editor toolbar in a click to improve your writing experience.

• Code
• Strikethrough
• Sub and sup
• Selected text colour (text and background)
• Remove formatting

The following Blocks are available in the Advanced Gutenberg Blocks:

• Notice Block

Helps you display any piece of useful information such as Info, Advice, Warning or Notice.

• Post Block

You can display pretty posts link (from any post type).

• WooCommerce Product Block

Enables to display WooCommerce Product in your post.

• WooCommerce Add to cart button Block

An add to cart button to quickly purchase a WooCommerce product.

• Banner Ad Block

Monetize your website by inserting banner Ads in your content.

• Text + rectangle Ad Block

Monetize your website by inserting Rectangle Ads in your content.

• WordPress Plugin Card Block

Display Plugin information from the official WordPress repository.

• Website Card preview Block

Do you like how Facebook, Twitter or Slack display a sweet preview to a website in a card? Don’t be jealous, we’ve made the same for you in WordPress!

• Testimonial Block

Display a testimonial with a picture, text, name and company.

• Google Map Block

Display a customizable Google Map in your content.

• Click to Tweet Block

A tweet box for featuring a content ready to be retweeted.

• Table of contents Block

An auto-generated a dynamic summary for your long posts.

• Intro Block

You can type a nice first paragraph for your posts.

• Giphy Block

A place where you can quickly search and insert a GIF from Giphy.

• Unsplash Block

Easily add photos by finding beautiful pictures directly from the best free photos stock ‘Unsplash”.

• Code Block

Finally, the code block you deserve with dozens of themes and languages.

Ultimate Blocks

Ultimate Blocks plugin comes with all the essential blocks you need to create better and engaging content with Gutenberg editor. They started with 8 blocks and today there are 18 awesome blocks available so far which are:

• Review (Schema Enabled) Block
• Table of Contents Block
• Tabbed Content Block
• Call to Action Block
• Content Toggle (Accordion) Block
• Feature Box Block
• Notification Box Block
• Number Box Block
• Image Slider Block
• Content Filter Block
• Testimonial Block
• Click to Tweet Block
• Social Share Block
• Countdown Block
• Progress Bar Block
• Star Rating Block
• Button (Improved) Block
• Divider Block

Up to You!

So, there are the Best Gutenberg Blocks Plugins available to decide the best that suits your style. It’s all up to you to decide which one to plugin and enhance your Gutenberg experience!