How To Create a Block Pattern in The WordPress Block Editor

How To Create a Block Pattern in The WordPress Block Editor

Introduction

One of the biggest time-wasters when designing pages in WordPress’s block editor is having to add each block of a complex layout one by one on every page.

Wouldn’t it be great to have an easy system to speed up your design process? One that gives you direct access to any available patterns within the Block Library, especially your own custom designs?

That’s where custom Block Patterns come in. 

Block Patterns can be created and designed manually, stored, and slotted in wherever you’d like on your WordPress website.

If that all sounds way too much like hard work, you can also use pre-made block patterns from a number of developers and sites.

In this article, we’ll take a quick look at StudioPress’s Genesis Blocks’s patterns offering. Then, we’ll run through a brief tutorial on how you can manually create and store a block pattern of your very own to be used again and again.

The Gutenberg Block Editor

WordPress’s Block Editor was an early Christmas present given to us back in 2018 with version 5.0. Block Patterns as a feature came along with the release of WordPress 5.5 in August 2020.

We currently find ourselves on version 5.8, with the editor having grown in leaps and bounds over the last nearly three years.

Love it or loathe it (and if you do happen to loathe it, the good old Classic Editor is still available to you as an option), it’s very much here to stay. 

Its evolution, growth, and constant improvement appear to be very much part of WordPress’s future plans.

A Block-Based Approach

WordPress’s Gutenberg Block Editor works with a block-based approach to creating sites, pages, and blog posts. 

Those familiar with it will know that there is already a block for nearly everything you need. This could be anything from adding columns, an embedded video, a section divider, a gallery, or anything else used to improve a page.

Of course, once you’ve spent the time getting your page built exactly the way you want it by laying out all the different blocks, it’s a pretty safe net that you’d like to use it, or at least parts of it, again.

What you really don’t want is to have to start from scratch each and every time to do so.

Enter Block Patterns

This is where block patterns come in. 

What’s a block pattern? Well, this is just WordPress’s fancy name for what is essentially a template, be it an entire page or just a small section of a page. It’s a template made up of customized block arrangements. Multiple blocks laid out just the way you want, used as a single “pattern”.

Pre-Made Premium Block Patterns

One of the great things about WordPress and its massive user base is that there are external (i.e. made by anyone other than

[…]

 



This article was written by Stuart Alderson-Smith and originally published on WP Mayor.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top