Best Gutenberg Blocks Plugins

Read Also: WooCommerce Rental And Booking Plugin

WordPress is a widely used blog and content management platform. It is currently used by more than 60 million websites, including 33.6% of the top 10 million websites as of April 2019, according to the source of W3 tech. Previously it had a great editor; we all know it as ‘TinyMCE’ editor. But recent times, WordPress has introduced a newly designed editor named ‘Gutenberg’ and brings totally a new way of creating content with lots of features.

With the new Gutenberg editor, each portion of your content is a block. You can add or delete blocks in your content. In simple language, Gutenberg editor is very similar to a page builder where you can drag and drop different blocks in your content. With regard to blocks, the Gutenberg editor comes up with numerous distinct blocks, for example, headings, paragraphs, columns, image, cover, quote, and more. Every single block has its independent editing options available.

The finest part about Gutenberg is that developers are able to create their own block plugins for content. These plugins will strengthen the effectiveness of Gutenberg. For instance – you can add ‘Testimonial’ to your content using such block plugins. The opportunities are countless with these different plugins. Lots of WordPress developers are really concerned about developing and publish different kinds of ‘Gutenberg’ optimized plugins.

What is Gutenberg and Gutenberg Block?

The Gutenberg WordPress editor is a brand new page builder that is being designed to integrate with WordPress core. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. The current visual editor actually requires a lot of programmers or developers as a team to utilize shortcodes and HTML to make things work. So to make everything so easy, particularly for those just starting with WordPress, the organization of WordPress embracing “little blocks” and hope to add more advanced layout options. Gutenberg will add page builder-like options and content blocks to every updated WordPress based site. Meanwhile, in utilization, it will take the place of TinyMCE as the content editor by default. With Gutenberg editor, content is added in blocks of various types from the WordPress backend. Gutenberg is slated to be released with WordPress 5.0.

What is a Gutenberg Blocks Plugin?

If a plugin is solely developed utilizing Gutenberg Blocks, then this plugin could be categorized as Gutenberg Blocks Plugin. It should work like Gutenberg Blocks. Naturally, it will enhance the functionalities of Gutenberg Editor. Such kinds of blocks are Price list, Accordion, Social share, etc.

How to utilize Gutenberg blocks to create a WordPress post? (3 steps procedures)

Assuming you have updated your site to WordPress 5.0, your site should use the new Gutenberg editor by default. Now you are really ready to learn how to apply the new Gutenberg blocks system.
In this article, We are going to illustrate the editor’s key features by walking you through what it is like to create a basic WordPress post, but you can use the same approach no matter what type of content you are generating with Gutenberg.

Step No 1: Add a block to your post

At the very beginning, you will need to give your post a unique title, utilizing the dedicated field at the top of the editor:

Add Title

This performs exactly the same way as it did in the previous classic editor. Very Next, more ever, things start to manipulate.

If you hover over the area directly under your post’s title, you will see a few icons there:

gutenberg editor icons

The Plus icon grants you choose Gutenberg blocks and add them to your post. On the right, there are also some options to quickly add the most commonly-used blocks – image, the text, and gallery options.

Right now, click on the Plus icon, and you will see a new menu:

gutenberg select block

This menu numbers out all the Gutenberg blocks that the editor currently includes. There is a section at the top position with your own Most Used options, a number of organized categories beneath, and even a search bar to assist you in finding what you require quickly.

To attach a block to your post, you just need to find and click on it. So let us begin with a Paragraph block. Put the block in your post, then go forward to the next step (you may also create a paragraph block by modestly typing in the editor).

Step No 2: Customizing your block

When you add a paragraph block, it does not look like much right away. Nevertheless, once you begin to start typing into the field, new options will appear:

text block formatting options

You will see some fundamental formatting settings, such as bold and italics, alignment. Additionally, check out the right-hand sidebar of the editor’s screen:

text block sidebar settings

 

There, you will find more block-specific functions. In this scenario, you can change the text’s font color and size, add a drop cap, and even include some custom CSS (in the Advanced menu). Any modifications you make, either here or on the block itself, will be immediately visible.

Every single Gutenberg blocks offered comes with its own unique settings.

For example, if you hit Enter, you will add a new block under your paragraph block. Nonetheless, this time, you can try adding an image block by using that very same Plus sign:

gutenberg image block

 

As you can see, you are able to upload an image or add one that is already available in your Media Library. You may edit the image, alter its alignment, and add some CSS in the sidebar.

Productivity hint: As a replacement for hitting the Plus sign, you can type a “/” in a vacant block followed by the name of the block that you desire to insert. Once you acknowledge which blocks are available, this is a much faster way to add new blocks.

There is no doubt that you will use plenty of images and paragraph blocks. However, Gutenberg has more to provide. There are also plenty of Gutenberg blocks providing new options not present in the classic editor.

As an example, you can add a Button block to your post:

gutenberg button block

This generates a clickable button for visitors to collaborate with. You may edit the text of the button itself, and integrate the URL. It will link to right below:

gutenberg button block2

By choosing the icon in the top-left corner of the block, you can manipulate the style of your button:

 

gutenberg button block3Additionally, you can alter both the text and background colors in the sidebar. While this is not a huge range of options, it is enough to create a useful customized button, which you can use to encourage visitors to sign up for an email list, buy a product, or whatever else strikes your fancy.

Step No 3: Put the finishing touches to your post

Once you have added a few blocks, you can find yourself wanting to make some changes. Luckily, the Gutenberg editor is pretty flexible in letting you modify your content’s layout.

So, if you want to delete a block, such as, you can select the Options icon above it, and click on the Remove Block:

remove blockBy hovering over a block, now you can use the up and down arrows to reorganize your blocks at will. Otherwise, you can also click on the six dots between the arrows to use drag and drop to move a block:

move blockProductivity hint: Gutenberg editor includes a number of keyboard shortcuts that can assist you quickly delete blocks or insert new blocks. So, type  Shift + Alt + H to view all the Gutenberg keyboard shortcuts.

It is also worth indicating that you can create multi-column layouts. This is an exciting feature. You may access it by placing a Columns block in your post:

gutenberg columns

This lets you create up to six side-by-side columns, and place whatever blocks you would like within each one. It is an option that offers a lot of potential for creating unique layouts.

Finally, it is important to note you still have access to post-wide (or page-wide) settings as well. In the right-hand sidebar, click on the Document tab to find them:

gutenberg page settings

 

Here, you will find most of the options you are familiar with. You can publish the post, set an author, choose categories and tags, add a featured image, and so on. You can even modify comments settings in the Discussion menu. However, you would not need to save your content, as it will auto-save at frequent intervals while you are working.

This is all you require to know in order to use the Gutenberg blocks system.

So in this article, we will talk about some Gutenberg blocks plugins which have already been published and tested. Let us start the article.

Ultimate Blocks

Ultimate Blocks

Ultimate Blocks is a Gutenberg blocks Plugin for bloggers and marketers offering a handful number of custom Gutenberg blocks. It assists you to generate better and engaging contents with Gutenberg Editor. The plugin currently has the 18 blocks.

Possessed Blocks:

  • Table Of Contents
  • Content Filter
  • Content Toggle
  • Tabbed Content
  • Star Ratings
  • Social Share
  • Review (Schema Markup Enabled)
  • Call To Action
  • Feature Box
  • Notification Box
  • Number Box
  • Testimonial
  • Click to Tweet
  • Countdown
  • Progress Bar
  • Star Rating
  • Button (Improved)
  • Divider

KingBlocks

KingBlocks

This plugin is a combined package of blocks to use with the new WordPress editor Gutenberg. A lot of options and styles to get an amazing website. Very easy to customize, learn, and enjoy this new plugin. It has 20 amazing blocks.

Possessed Blocks:

  • Accordion
  • Blockquote
  • Button
  • Card
  • Card image
  • Count up
  • Divider
  • Divider with text
  • Flip Box
  • Heading
  • Icon box
  • Map
  • Notification
  • Pricing table
  • Progress bar
  • Social icons
  • Spacer
  • Step Process
  • Team member
  • Video popup

Qubely

QubelyQubely is a comprehensive Gutenberg block toolkit with plenty of predefined sections and modern layout packs to create beautiful pages and posts on the Gutenberg editor. It provides a whole new experience that minimizes all limitations of the Gutenberg editor and opens unlimited possibilities to create any simple to complex content on a WordPress website using the new Gutenberg block editor. This easy-to-understand Gutenberg blocks has been developed with all necessary customization options to achieve any possible layout with Qubely Gutenberg block editor plugin. Qubely expands Gutenberg editor with many custom Gutenberg blocks that are missing in the Gutenberg block editor. You can take full control of the WordPress Gutenberg block editor with the ability to apply out of the box styling options. Make web pages and posts using Qubely’s custom Gutenberg blocks that are stunning as well as mobile optimized. It contains 26 blocks.

Possessed Blocks:

  • Row
  • Button
  • Testimonial
  • Heading
  • Counter
  • Tabs
  • Accordion/Toggle
  • Advanced Text
  • Video Popup
  • Google Map
  • Progress Bar
  • Icon
  • Divider
  • Social Icons
  • Button Group
  • Button
  • Info Box
  • Advanced List
  • Contact Form
  • Icon List
  • Pricing
  • Block Wrapper
  • Team
  • Image
  • Timeline
  • Post Grid

Getwid

GetwidGetwid is a collection of 34 extensive Gutenberg blocks that really extends the library of existing core blocks. It is introduced to you by MotoPress – a trusted WordPress developer with more than six years of experience in creating WordPress tools for content building. This is really a great choice for the requirements of startups, business websites, creative projects. It lets you create efficient landing pages, showcase vibrant services pages, build eye-catching portfolios, and make your overall transition to Gutenberg less stressful.

Possessed Blocks:

  • Section
  • Advanced Heading
  • Google Maps
  • Icon
  • Icon Box
  • Image Box
  • Social Links
  • Banner
  • Image Slider
  • Media & Text Slider
  • Button Group
  • Person
  • Accordion
  • Toggle
  • Tabs
  • Image Stack Gallery
  • Testimonial
  • Recent Posts
  • Advanced Spacer
  • Instagram
  • Counter
  • Price Box
  • Progress Bar
  • Circular Progress Bar
  • Contact Form
  • Post Carousel
  • Price List
  • Post Slider
  • Custom Post Type
  • MailChimp
  • Countdown
  • Video Popup
  • Content Timeline
  • Image Hotspot

Ultimate Addons plugin for Gutenberg

Ultimate Addons for GutenbergThis plugin powers up the Gutenberg editor with advanced and powerful blocks that help you build websites in no time. The Ultimate Addons for Gutenberg is built for speed and performance, along with lots of flexibility and ease of use. This first Gutenberg add on is here to make website building an ultimate journey. It has 22 blocks.

Possessed Blocks:

  • Section
  • Multi Buttons
  • Advanced Heading
  • Post Grid
  • Post Masonry
  • Info Box
  • Google Map
  • Team
  • Content Timeline
  • Social Share
  • Testimonial
  • Post Timeline
  • Restaurant Menu
  • Call To Action
  • Advanced Columns
  • Icon List
  • Price List
  • Blockquote
  • Contact Form 7 Styler
  • Gravity Forms Styler
  • Marketing Button
  • Post Carousel
  • Table Of Contents

CoBlocks

CoBlocksCoBlocks is the most creative collection of page building WordPress blocks for the new Gutenberg WordPress block editor. With supplementary blocks and true row and column building, CoBlocks provides you a true page builder experience for Gutenberg. It is powerful but lightweight: it adds functionality to the WordPress editor without puffiness. It is the plugin you have been waiting for, and it will make you rethink what WordPress is capable of. With this CoBlocks plugin, you have everything you need to make beautiful web pages with the new block editor. It has 26 blocks.

Possessed Blocks:

  • Resizable Rows/Columns
  • Accordion
  • Alert
  • Author Profile
  • Click to Tweet
  • Dynamic Separator
  • Gif
  • Github Gist
  • Highlight
  • Pricing Table
  • Social Sharing
  • Services
  • Buttons
  • Carousel Gallery
  • Features
  • Food & Drinks
  • Form
  • Hero
  • Icon
  • Logos & Badges
  • Map
  • Masonry Gallery
  • Media Card
  • Shape Divider
  • Social Profiles
  • Stacked Gallery

Otter Blocks

Otter Blocks

Gutenberg Blocks and Template Library provided by Otter is a lightweight WordPress plugin that brings extra Gutenberg blocks to your site. Therefore if you want to create complex pages and posts optimized for e-commerce, business, social media, blogs – you name it -comes with dozens of Gutenberg blocks that are all you need to build beautiful pages. It comes with 12 blocks.

Possessed Blocks:

  • Section
  • Advanced Heading
  • Button Group
  • Service
  • Pricing
  • Testimonial
  • Google Maps
  • About Author
  • Post Grid
  • Font Awesome
  • Sharing Icons
  • Plugin Card

Kadence Blocks

Kadence Blocks

Kadence Blocks plugin is really very advanced. It will let you be forgotten to use any page builders. It has two versions available. One is the free version, and another one is the paid version. Free version contains 11 blocks. Paid version contains extra 7 blocks, including all remaining blocks from the free version.

Possessed Blocks:

  • Row Layout
  • Advanced Heading
  • Advanced Button
  • Tabs
  • Icon
  • Spacer / Divider
  • Info
  • Accordion
  • Advanced Gallery
  • Icon List
  • Testimonial
  • Image Overlay (Paid)
  • Split Content (Paid)
  • Post Grid / Carousel (Paid)
  • Modal (Paid)
  • Advanced Gallery Extras (Paid)
  • Video Popup (Paid)
  • Advanced Image (Paid)

Atomic Blocks

Atomic BlocksAtomic Blocks is a compilation of page building blocks for the new Gutenberg block editor. Creating pages with the block editor and Atomic Blocks gives you more control to quickly create and launch any kind of site you want. Installing the customizable Atomic Block plugin adds a collection of beautiful, site-building blocks to help you customize page layouts, increase engagement, and get results for your business. Atomic Blocks provides everything from customizable buttons, to beautifully-designed page sections and full-page layout designs via the Section & Layout block. It has 15 blocks.

Possessed Blocks:

  • Post Grid
  • Container
  • Testimonial
  • Inline Notice
  • Accordion
  • Share Icons
  • Call-To-Action
  • Customizable Button
  • Space & Divider
  • Author Profile
  • Drop Cap
  • Section & Layout
  • Advanced Columns
  • Newsletter
  • Pricing

Stackable

StackableStackable is a collection of wonderful ready-to-use custom blocks that builds on and supercharges the newly published WordPress block editor Gutenberg. Its blocks give you the capability to create great websites with just a few clicks easily. It offers feature-rich blocks that gives you more design functionalities for your site. Stackable’s blocks look amazing out of the box and will make website building a breeze. This plugin’s custom blocks come with multiple block layouts that you can use to build your perfect site without writing a single line of code. Stackable blocks are also responsive and will look great even on small screens. It provides 23 blocks.

Possessed Blocks:

  • Container
  • Posts
  • Feature Grid
  • Accordion
  • Image Box
  • Feature
  • Icon List
  • Call To Action
  • Card
  • Header
  • Divider
  • Count Up
  • Video Popup
  • Pricing
  • Testimonial
  • Team Members
  • Notification
  • Number Box
  • Expand/Show More
  • Button
  • Blockquote
  • Spacer
  • Separator

Advanced Gutenberg

Advanced Gutenberg

Advanced Gutenberg supplies the missing blocks and configuration you really need to build professional websites. You can take control of the new Gutenberg editor with user edition profile configuration and 20+ new blocks and options. This plugin provides 23 blocks.

Possessed Blocks:

  • Latest Post Slider
  • Latest WooCommerce Product Slider
  • Advanced Button
  • Contact Form
  • Advanced List
  • Map
  • Advanced Table
  • Accordion
  • Tabs
  • Testimonial
  • Counter
  • Advanced Image
  • Advanced Video
  • Separator
  • Social Links
  • Lightbox Effect
  • Image Information In A Lightbox
  • Gutenberg Post Summary
  • Email Opt-In
  • WordPress login
  • WordPress register
  • Search Bar
  • Columns Manager

Editor Blocks

Editor Blocks

A unique collection of Gutenberg blocks. This plugin will really help you to improve your business model. Blocks provided by this plugin very simple and easy to use. It contains 11 blocks.

Possessed Blocks:

  • Wrapper
  • Hero
  • Pricing Table
  • Author Profile
  • Team Members
  • Testimonial
  • Callout
  • Brands
  • Features
  • Horizontal Feature
  • Vertical Feature

Easy Blocks

Easy Blocks

This plugin is famous for all types of necessary blocks. No matter which type of website or landing page you are going to create, Easy Blocks is the perfect solution. There are blocks for Marketing Perspective (Call to Action, Buttons, Testimonial, Counter Up, Logo Slider), Services (Feature box, Feature Grid, Pricing Table), Social (Social Share, Instagram Grid), Customizable Header (Hero Image), Content layout (Title & Subtitle, Image & Content, Card, Author Profile), etc. It has 21 blocks.

Possessed Blocks:

  • Testimonial
  • Alert or Notification
  • Call To Action
  • Card
  • Image and Content
  • Title & Sub Title
  • Blockquotes
  • Testimonial Slider
  • Click to Tweet
  • Hero Image
  • Instagram
  • Feature Box
  • Feature Grid
  • Pricing Table
  • Author Profile or Box
  • Blog Post Grid
  • Row and Columns
  • Counter Up
  • Default Row Paragraph
  • Logo Slider
  • Social Share

Blocks by Templatic

Blocks by TemplaticGutenberg block editor provides new & customizable content blocks. Along with content blocks, there are blocks that lets you place the social media icons anywhere you desire. This is a mild plugin to let you create colorful & attractive content sections. This flexible Blocks Builder adds more customization possibilities to the basic blocks like the text block or the heading block. Every block of Blocks Builder come with some simple and intuitive options to manage the block and the content. The general settings include changing the color of the text, size, background color management, etc. The plugin comes with 12 blocks.

Possessed Blocks:

  • Profile
  • Alert
  • Drop Cap
  • Social Media
  • Separator
  • Cover Image
  • Heading
  • Text
  • Map
  • Price
  • Button
  • Tweet

Advanced Gutenberg Blocks

Advanced Gutenberg BlocksAdvanced Gutenberg Blocks is the perfect tool for the new WordPress Editor. Advanced Gutenberg Blocks features a setting page with all the blocks where you can edit default settings and manage your blocks. There are also some options that let you customize the editor. The plugin comes with 16 blocks.

Possessed Blocks:

  • Notice
  • Post
  • WooCommerce Product
  • WooCommerce Add To Cart Button
  • Banner Ad
  • Text + Rectangle Ad
  • WordPress Plugin Card
  • Website Card Preview
  • Testimonial
  • Google Map
  • Click to tweet
  • Table of Contents
  • Intro
  • Giphy
  • Unsplash
  • Code

Bokez

Bokez

Bokez is a combination of essential WordPress blocks. With 15 Awesome blocks, you can create stunning pages/posts in minutes. Give it a try. It is super easy to use with a ton of options to make your pages unique and beautiful.

Possessed Blocks:

  • Video Popup
  • Pricing Table
  • Posts Grid
  • Testimonial
  • Accordion / FAQ
  • Profile
  • Cover
  • Share Icons
  • Button
  • Notification
  • Blockquote
  • Divider
  • Progress bar
  • Separator With Heading
  • Section (Row) / Columns

Google Maps Gutenberg Block

Google Maps

WebFactory Ltd developed this  Google Maps plugin. It is really a very helpful plugin. The plugin does not require any supplementary setting or customization. This free plugin is good for you if you do not want additional blocks in your Gutenberg editor but only want a map block. It has only Google Map block.

Possessed Blocks:

  • Google Map

Conclusion

Now we have come to the ending point of this article. I hope this article will assist you to realize what is Gutenberg Editor and also you can realize the Gutenberg Blocks. We choose those Gutenberg Blocks plugins which are really good. If this article really assists you then please do not forget to rate us or leave a comment on the comment section. And again thank you very much for reading this article. That is all for today. Have a nice day.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares