Create Your Own Block Patterns for Gutenberg / the Block Editor



Block Patterns in Gutenberg are a powerful way to make reusable content templates without having to grab all of the blocks and build them from scratch in the WordPress Block Editor. But currently there isn’t a native no-code way to create patterns. Luckily, creating your own is as simple as copying and pasting some code. Here’s how to do it from start to finish.

Join the Build Something Club! https://buildsomething.club

## Links
Get the Code: https://github.com/jcasabona/jc-block-patterns
JSON Encoder: https://jsonformatter.org/json-escape
register_block_pattern: https://developer.wordpress.org/reference/functions/register_block_pattern/

## Chapters
00:00 – Intro
01:16 – Why Not Reusable Blocks?
03:11 – Designing the Block Pattern
04:42 – Copying the Block Code
05:05 – Escaping Block Code
05:53 – Plugin Setup
07:16 – Registering the Block Pattern
08:08 – The Block Pattern Definition
09:03 – Pattern Categories
09:47 – Adding our Block Code
10:02 – Testing
11:20 – Reviewing all the Steps
11:53 – Multiple Block Patterns
12:23 – That’s It!

~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~
To learn more, start here: https://casabona.org/start

Join my mailing list: https://buildsomething.email

Check out my Live Stream Gear: https://kit.co/jcasabona/youtube-live-stream-setup

Check out my Podcasting Gear: https://kit.co/jcasabona/my-podcasting-setup
~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~

Source

Similar Posts

  • How to Set a Custom Safari 15 Color

    As of both Safari 15 and iOS/iPad 15, the tab bar in Safari adopts the same color it detects at the top of a website. While in most cases, this works pretty well, there are situations where you might want to customize that color. Here’s the small bit of HTML you need to make the change, as well as how to do it with plain HTML, using Kadence for WordPress, and using a WordPress plugin that works with any theme.

  • Live Stream: Twenty Twenty One and WordPress Memberships

    WordPress 5.6 is out and with it a new default theme: Twenty Twenty One. We’ll take a walk through that and I see how closely I can convert my home page to the new theme, as well as explore some other customization. Then, we’ll test out Uncanny Automator with Restrict Content Pro! ~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ To…

  • BSL Clip: Processing a File (live code PHP Tutorial)

    Welcome to another Clip from the Build Something Live Stream! In this one, I’m writing some live code for a PHP tutorial, in preparation for a new feature in my memberships called “Tiny Web Projects.” Catch the streams live by subscribing. OR get access to the archive by becoming a member: https://buildsomething.club ~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ To…

  • Sell Products with ConvertKit!

    ConvertKit Commerce is currently in beta and this video is a first look at the how to create and sell products with the popular email management software! We go through creating a product, customizing the checkout process, and see how it all looks. Plus, some good ideas 😉 If you are a ConvertKit users, join…

  • Zapier Tutorial: Update Airtable When File is Added to Dropbox

    Automation is all about taking repetitive, time consuming, or forgettable tasks and putting the on autopilot. This allows you to focus on what matters! Well, one thing I’ve been doing manually for years is updating the status of various podcast episodes in the production pipeline – but there’s at least one step I don’t need…

  • Full Site Editing: Core Features (FREE PREVIEW)

    WordPress 5.8 has already introduced some key full site editing features into Core already, so let’s take a look at those – in particular, the page template editor – in this FREE preview of my Master Full Site Editing course. Source