Gutenberg Block Patterns: Next Awesome Gutenberg Feature

When it comes to the features of the Gutenberg – the new WordPress block editor – the sky’s the limit. The Gutenberg development team is continuing to enhance the editor after each release to bring users more features. One of those features is Gutenberg block patterns, which is a game changer. Before you know it, we’ll be able to create a full site right inside the editor. 

In this article, we’ll cover the Gutenberg block patterns feature and walk you through how we can quickly create our very own custom ones.

Note: To use the block patterns feature, you’ll need to install the latest Gutenberg plugin on your site.

Why block patterns?

If you’re familiar with Elementor, they have a Template feature that allows theme and plugin authors to create reusable combinations of elements/blocks and distribute them for users. This is not only the case for Elementor but nearly every popular page builder has a similar feature. 

This feature was missing in the WordPress new editor and it was proposed in Github. This feature got enough attention and the initial version was released in Gutenberg v7.7 and was stable enough when v8.0 was released.

Creating custom Gutenberg block patterns

This feature starts to shine more when we can create our own block patterns and release them for others to use. Let’s start to create our first pattern. 

It’s worth mentioning that we omitted some technical and other explanations, so you can more easily follow this post’s flow in making your first pattern.

1. Install the Code Snippets plugin

Install and activate the Code Snippets plugin. We’ll use this plugin to add the pattern registration codes in the following sections. You may also use a child theme or plugin to add the codes.

gutenberg block patterns

2. Create a pattern in the editor

Creating a pattern is a fairly easy job. We only need to create a new page and add some blocks in the editor. We used Image, Columns and Paragraph blocks to create the previously shown pattern.

3. Export the pattern codes

For registering a pattern, we need to export the created pattern as explained below.

1. Switch to Code editor and copy the codes.

gutenberg block patterns

2. Escape them by using the Onlinestringtools site.

<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->

4. Register your pattern

To display our pattern in the list of patterns, we need to register it via the register_pattern PHP function. This function, as described in the WordPress handbook, receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument.

Add a new snippet from Snippets > Add New then fill in the settings as shown below. Make sure to click on the Save Changes and Activate button.

gutenberg block patterns
if ( ! function_exists( 'register_pattern' ) ) {
	return;
}

register_pattern(
    'my-custom-patterns/pattern-1',
    [
        'title'   => __( 'Pattern 1' ),
        'content' => "<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
    ]
);

Finally, you should be able to see the pattern at the end of the Patterns section.

gutenberg block patterns

Conclusion

By now, it’s probably dawned on you the significance of Gutenberg block patterns and how to create a custom pattern in WordPress. We recommend that you keep up-to-date with the Gutenberg Github project to stay informed about developments regarding the feature. 

We’d love to hear about your experiences with the Gutenberg block patterns feature, so please share your patterns with us in the comment section below.

Extend Gutenberg with Free Blocks

Released in late 2018, the WordPress Gutenberg editor is getting more and more popular by the day. By default, it has some blocks for you to kickstart creating a website, but they are far from enough to create a professional website. To do this, you’ll need to install some add-ons to access advanced blocks.In this article, we’ve included some popular, free plugins to help you extend Gutenberg with free blocks. Now let’s briefly name and introduce the plugins.

Note: It’s worth mentioning that the following statistics are relevant to when this article was written. These figures might have changed by the time you read this article.

Page Builder Gutenberg Blocks – CoBlocks

extend Gutenberg with free blocks - coblocks

CoBlocks contains an amazing archive of page building blocks to be used with the Gutenberg WordPress block editor.

One of the best features of CoBlocks is that the page builder is robust but lightweight, which means that you’ll be able to get maximum functionality without compromising on performance.

Read more about CoBlocks on WordPress.org

Specifications

Gutenberg Blocks – Ultimate Addons for Gutenberg

This add-on simplifies that website building process. It provides you with several  unique and creative blocks for Gutenberg that help you create pages or posts without writing a single line of code.

Read more about Gutenberg Blocks on WordPress.org

Specifications

  • 200,000+ active installations
  • 20 blocks
  • Frequent updates
  • 5 star rating
  • Translated to 6 languages
  • Compatible with free popular Gutenberg ready themes
  • Pre-built templates
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.
  • Developed by Brainstorm Force.

Kadence Blocks – Gutenberg Page Builder Toolkit

extend Gutenberg with free blocks - kadence

This plugin adds custom blocks and options to extend Gutenberg’s editing capabilities so you can create custom layouts and more engaging content.

This plugin is meant to be a toolkit that makes the WordPress block editor capable of creating content usually only possible through popular page builder plugins.

Read more about Kadence Blocks on WordPress.org

Specifications

  • 50,000+ active installations
  • 12 blocks (interactive demo).
  • Frequent updates
  • 5 stars rating.
  • Translated to 3 languages.
  • Compatible with free popular Gutenberg ready themes.
  • Block management to help you enable/disable the blocks.
  • Documentation and support friendly.
  • Developed by Kadence WP.

Atomic Blocks – Gutenberg Blocks Collection

extend Gutenberg with free blocks - atomic blocks

Atomic Blocks is a collection of page building blocks for the new Gutenberg block editor.

On top of the handy, time-saving blocks already found in Atomic Blocks, this plugin has a new Section and Layout block! This block comes with a library of pre-designed sections and layouts to help you quickly and easily build a beautiful site with the new block editor.

Read more about Atomic Blocks on WordPress.org

Specifications

  • 40,000+ active installations
  • 15 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 7 languages.
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Pre-designed sections and layouts.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Stackable – Gutenberg Blocks

extend Gutenberg with free blocks - stackable

Stackable is one of the first and most expansive block libraries made specifically for the new WordPress Block Editor (Gutenberg).

It adds essential custom blocks to Gutenberg’s arsenal to achieve a smooth page building experience.

Read more about Stackable on WordPress.org

Specifications

  • 20,000+ active installations
  • 23 blocks (interactive demo)
  • Frequent updates
  • 5 stars rating.
  • Translated to 5 languages
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Advanced Gutenberg

advanced gutenberg

Advanced Gutenberg adds the missing blocks and configuration you need to build professional websites.

This plugin helps you to take control of the new Gutenberg editor with a user edition profile configuration.

Read more about Advanced Gutenberg on WordPress.org

Specifications

  • 20,000+ active installations
  • 27 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 3 languages
  • Compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Conclusion

In this article, we did our homework and briefly presented some helpful plugins to extend Gutenberg with free blocks. Gutenberg is becoming more and more popular in the WordPress community, which will lead to the development of more add-ons.

Feel free to share your favorite Gutenberg add-on with us in the comments.

More Than a Block Editor: Pros and Cons of WordPress 5.0

The new version of WordPress was already released in the market on the 27th of November 2018 and advanced editor for the CMS system called Gutenberg was also published on the same day. The newly released WordPress 5.0 is given the name ‘Bebo’ after the Cuban jazz composer Bebo Valdes.

Here, you will get to know about the pros and cons of WordPress 5.0 block editor. While recognizing the leading pros and cons of WordPress 5.0 block editor, you will be able to use the CMS more conveniently. As WordPress is one of the leading CMS platforms in the world, it is remarkable how the new version can be more attractive to users.

When it comes to the statistics, WordPress is backed by a prominent position. In a report by the W3 techs, WordPress holds a significant market share of 58.55%. This market share is much more significant than other CMS systems like Joomla and Drupal combined.

Meanwhile, Netcraft published a recent report which shows that WordPress dominates over nearly 27% of the entire internet. This data implies that over 20% of websites present on the internet in self-hosted style are built with WordPress.

In such a scenario, you can be sure that the latest update can help a large number of web developers. With the latest WordPress features, you can comfortably carry out the necessary tasks related to the web building process.

The Pros and Cons of WordPress 5.0 with the Gutenberg Block Editor

Pros

  • Better visualization for faster work

As we all know, Gutenberg is a block editor; thus, it can provide a more convenient display to the users. As a user, you can prominently use your creativity. You need not worry about the functionality of the site much while creating the web pages.

Pros and Cons of WordPress 5.0 Pro 1
  • The minimized dependency of TinyMCE

The new WordPress 5.0 version beside the block editor has a much lesser dependence on the TinyMCE. The TinyMCE is one of the online rich-text editors through which the earlier WordPress editor used to convert the HTML. In WordPress 5.0, the block editor is meant to deliver better integration of the plug-in’s cores and themes.

With the new Gutenberg editor, you can get a speedy editing experience as there is less need to visit the TinyMCE. As a result, there is a distinct chance of completing the work related to the page makeup faster.

  • All the benefits of Medium Editor are present

There is good news for most web developers who have earlier used the Medium Editor and worked conveniently in the WordPress. The Gutenberg editor contains similar benefits as the Medium Editor and gives the user a chance to create any content easily.

Thus, by the Bebo version of WordPress, the users can have full control over the content they are creating. One can also get total access to third-party tools whenever necessary.

  • Gadget-Friendly

While discussing the pros and cons of the WordPress 5.0 Gutenberg Editor, the central positive fact we came across is its gadget-friendliness. The interface you get is efficiently gadget-friendly. You can quickly work with this interface in tablets, smartphones, or laptops, as well as the traditional desktops.

Pros and Cons of WordPress 5.0 Pro Gadget
  • Friendly to the Users

You should be aware that user-friendliness is one of the leading pros that older versions of WordPress have forever possessed. Now, the latest version with the WordPress 5.0 Gutenberg Editor is easier to use. So, you should always consider the fact that the new version has better usability along with the Block Editor.

Cons

  • Compatibility Issues

As WordPress provides the benefits of working with numerous plug-ins, it is essential for the editing system to be compatible with them. The main con of the WordPress Bebo version is that it might not work well with several themes and plug-ins.

Moreover, the Gutenberg editor demands more work from the end of the developer. This happens due to the decreased use of TinyMCE. However, all the updates that will be made later can improve the backward situation of the compatibility of the editor.

  • No Full Meta Box Support

In the case of the Beta version of the Gutenberg, you cannot get many essential components of the Meta box. This is another con which might ruin your convenience of working with the WordPress 5.0 version. The only good thing that the Gutenberg editing system has is the Yoast SEO support. There is a prominent expectation that other Meta boxes might work efficiently with Gutenberg in the future.

Pros and Cons of WordPress 5.0 Con 1
  • No Markdown Support

However, working with WordPress is beneficial in many ways; the Gutenberg review might spoil the markdown support. The WordPress Bebo beside that block editor has a prominent con as Markdown is absent. It is a markup language of the lightweight with the ugly test syntax.

If you are the one who has so far used the Markdown language, there might be some problems in getting accustomed to the Gutenberg editor. You should nevertheless expect that the compatibility to the Markdown language will be added shortly.

  • Bad Accessibility

You must be aware that the Gutenberg Editor that comes with the WordPress Bebo is hard to access. In this editor, you cannot find the API that the CRM earlier used to rely upon for building the plug-ins as well as the themes.

So, these are some of the pros and cons of WordPress 5.0 along with the Gutenberg editor. You should always incorporate it only after thoroughly researching the worthiness of the WordPress Bebo. In case you have lighter jobs to do, and you are a beginner, the 5.0 version is best for you.

Verdict

In spite of all its shortcomings, you should be aware that the latest WordPress is the future. The CRM developers are trying their best to make the WordPress Bebo the best among all the versions available so far. You should also expect a quick road to perfection given the position which WordPress holds in the CRM market.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.