Best Gutenberg Blocks Plugins and Tutorial to Use This Latest Editor

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:

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:

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:

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 block3 Additionally, 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 block By 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 block Productivity 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 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

Best Gutenberg Blocks Plugins and Tutorial to Use This Latest Editor

What is Gutenberg and Gutenberg Block?

What is a Gutenberg Blocks Plugin?

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

Step No 1: Add a block to your post

Step No 2: Customizing your block

Step No 3: Put the finishing touches to your post

Ultimate Blocks

KingBlocks

Qubely

Getwid

Ultimate Addons plugin for Gutenberg

CoBlocks

Otter Blocks

Kadence Blocks

Atomic Blocks

Stackable

Advanced Gutenberg

Editor Blocks

Easy Blocks

Blocks by Templatic

Advanced Gutenberg Blocks

Bokez

Google Maps Gutenberg Block

Conclusion

Share on: