Gutenberg Block Patterns and WordPress Starter Templates

When it comes to creating and building websites, WordPress is one of the most popular systems. The world’s leading blogging software is characterized by high usability and impressive customizability.

Gutenberg Block Patterns are templates made from a combination of different Gutenberg blocks. These block templates can be inserted anywhere in the block editor. Afterwards, all areas and texts are freely customizable.

However, from time to time it can get a bit complicated and enormously time-consuming when it comes to designing new pages and sub-pages for your own website.

But there is a solution: the Block Patterns and Starter Templates for the Gutenberg Editor. But what are they, where are the advantages and why are they so helpful? We clarify the most important questions about Gutenberg Block Pattern s and Starter Templates for you. No matter which WordPress theme you use, these functions are always available to you.

The popular Astra theme and Ultimate Addons for Gutenberg come with countless page templates and blog patterns.

Why are the templates useful and useful?

If you want to design a website from scratch, you’ll quickly find that it’s a complicated and time-consuming process – even with WordPress’ user-friendly software. First there’s research, then finalizing mockups, designing page layouts, and choosing colors, typographies, and a design to match. It’s a long list.

Time, as we all know, is money in the corporate world and therefore an important resource. That’s why Starter Templates come into play at this point, creating new and attractive opportunities for businesses.

What are Starter Templates for with WordPress?

Astra Starter Templates are time-saving solutions for creating your website. They are the ideal solution for all website design challenges. The question of why is easy to answer: the Starter Templates allow you to import entire pages and even complete websites with just one click.

This feature has been available to you in WordPress for quite a while. But now new possibilities are added, which have to do with the problem, that it needs some skill and know-how, if single sections should be adjusted and changed after importing the page. For this problem there is now a solution, the Gutenberg Block Patterns.

What are Gutenberg Block Patterns?

Gutenberg Block Patterns could also be translated as Gutenberg Block Patterns in German – which already gives a little insight into what they do. They are pre-built sections of websites that you can add to any design. It works simply, the Block Patterns can be inserted with just one click – anywhere on the page.

Using the handy drag-and-drop feature that you can use when creating pages anywhere in WordPress, you can add elements to the page in no time. That’s when Gutenberg Block Patterns come into play, allowing you to group individual elements together and wrap them in a common design. Not only does this make the creation process much easier, but most importantly, it doesn’t eat up so much important work time.

You can also create your pages with a combination of different patterns. Another plus: you can also apply a pattern to an existing page to improve the look and usability of the page and provide a better user experience. Gutenberg Block Patterns also help with sections like a call-to-action, a contact form, or similar – mostly recurring – elements.

Through the Block Patterns, WordPress now lets you choose not only over 150 Astra Starter templates, but also all the Block Patterns that have been added to the templates – and that’s quite a lot, too.

It already seems clear that Block Patterns will be the future of website creation and will shape it tremendously. The best part is that they are already included in the Astra Starter templates, so you can start using the revolutionary feature right away.

Where can you find the Gutenberg Block Patterns?

The way to the Block Patterns is – like so many things in WordPress – kept enormously simple. All you have to do is go to UAG Templates on the posts page and then click on the Block Patterns – or Block Patterns – tab.

Then you can choose any Block Patterns from a wide range of available patterns. Gutenberg blocks are designed with universal colors and work with all themes and furthermore on all devices.

The Gutenber Block Templates menu offers the following functions:

Search: In the top right corner is a search box that lets you jump to the block template you’re looking for. Of course you have to know what you are looking for. However, the names are kept quite simple and logical. For example, if you are designing the home page and you need a nice section at the beginning, it will be called “Hero”. In the search you can type “Hero” and you will be taken to all the Block Patterns that are available for that section.

Synchronize Library: With this option – which is also located in the upper right corner – you can update the library. If you click on it, it will be updated automatically and all currently available block patterns will be listed. It makes sense to use this function regularly, because there are always new Block Patterns available.

Category: On the left side you see a so called dropdown where you can select different categories. The Block Patterns are available in different groups. When you select a category, then you can find corresponding patterns which you can use for certain sections and groupings.

Pages: Next to the Patterns tab you will see a Pages tab. Here you have the possibility to import templates for single pages. These single page templates serve as a complete page for your website, e.g. for Home, About Us, Services, Features, Contact, etc. You can select any page from the Block Patterns library, which you can then easily import using the Block Editor.

Once selected, Gutenberg Block Patterns will take over your Customizer settings, saving you time and bringing all the important changes together in a single place. It’s important to keep Astra Starter Templates up to date – because then they’ll be more powerful than ever.

Gutenberg Block Patterns create many possibilities

Gutenberg Block Patterns are available in a variety because they are designed to meet different needs. However, there are also some block patterns which are suitable for almost all needs – these include the following:

• About
• Call to Action
• Clients
• Contact
• FAQ
• Features
• Services
• Teams
• Testimonials

Besides these classic Block Patterns, you have the possibility to create flexible and creative designs and generate unique pages at any time. These can be used again and again to find a typical style for your website, which is lived on every subpage.

For even more customization, Gutenberg Block Patterns can be combined in any way to ensure a unique design. Each block pattern can be added, removed and replaced with one click – easy as pie.

Because of the extremely high number of different combinations, you have all the possibilities to create an individual page with simple means and find your own style – without having to search for it forever.

Advantages of Gutenberg Block Patterns

The Block Patterns have been designed and tested by experts. One of the advantages of this is that you don’t have to worry about compatibility and usage. But there are many more reasons why Gutenberg Block Patterns are the future and why you should use them. Finally, we have summarized the most important advantages for you:

Designed with native Gutenberg blocks: All block patterns are designed with native Gutenberg blocks, without using any third-party plugins. This has the advantage that you can use all patterns without installing any additional plugins.

Works with all themes: you can import the block patterns with your favorite theme and customize them easily. It is not necessary to have a specific theme installed.

Adoption of settings: Once you import a pattern, it will take over all your customizer settings like color, typography, layout and other settings. This saves a lot of time and effort when using the patterns.

Easy to customize: You can easily edit the block patterns and tweak them with just a few clicks. There is no complex process behind having to design them.

Black and white blocks: In the library for all Block Patterns, you’ll see that half of the blocks have a black hue and half have a white hue. You can use a combination of dark and light blocks to create a unique look for your website.

Responsiveness: you don’t have to worry about responsiveness, because Gutenberg Block Patterns have been tested on all screen sizes and look good everywhere.

Free: With the “Starter Templates” plugin, the Block Patterns are available for free. The plugin is again available for free on the WordPress site. However, in most cases it is already built in.

Create Block Patterns yourself

WordPress and the Astra plugins do not yet offer the possibility to create or save Block Patterns yourself. For this, WordPress has simply provided thereusable blocks(Reusable Blocks).

Below I want to show you two ways how you can create your own Gutenberg Block Patterns.

Variant 1: Per code in functions.php

function j0e_register_block_patterns() {

  if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {

    register_block_pattern(
      'j0e-header-pattern',
        array(
        'title' => __( 'header', 'j0e-patterns' ),
        'description' => _x( 'Here is the description of the pattern', 'Block pattern description', 'j0e-patterns' ),
        'categories' => array('hero'),
        'content' => "",
      )
    );
    
  }

}
add_action( 'init', 'j0e_register_block_patterns' );

If you add the above code to your functions.php file, you will find a new template called Heading in your block templates.

This is a simple basic framework that you can use to create a block template yourself. I used the register_block_pattern function to do this.

Variant 2: Block Pattern Builder Plugin

If you don’t know much about PHP, you can install the plugin called Block Pattern Builder by Justin Tadlock.

The plugin is available for free in the WordPress plugin directory.(Learn how to install a WP plugin)

Disable default WordPress Block Pattern

I think the default Gutenberg Block Patterns serve more as examples of how you could do it. These templates are neither pretty nor usable, so I would imagine you would also want to remove this unnecessary baggage.

This also works quite simply. Add the following line to your functions.php and save it:

function removeCorePatterns() {
  remove_theme_support('core-block-patterns');
}
add_action('after_setup_theme', 'removeCorePatterns');

Yes, sometimes a single line of code really is enough….

Block Pattern Questions

Block Pattern instead of Page-Builder

You don’t need a bloated Page-Builder like Elementor or Beaver Builder anymore. Even if you’re using a closed system like Thrive Themes, I’d recommend using WordPress’ default editor for regular blog posts.

The blocks are really super easy to use and with the pre-built block patterns you have access to a wealth of well thought out templates.

Install either the Starter Templates plugin or the UAG plugin.

Block templates are easy to customize, lightweight, and adapt to any device. It’s a new way to make website design faster and easier.