Create Your Own Block Patterns for Gutenberg / the Block Editor

Posted



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

  • 3 SUPER SIMPLE Ways to Add Payments to WordPress (PayPal, GiveWP)

    Bycasabona

    Accepting payments is easier than ever. From Venmo to Apple Cash, you can basically get paid any time anywhere. But what if you want to add the ability to accept payments to your WordPress website? Sure you can use WooCommerce, but a full ecommerce solution seems like overkill. Luckily, you don’t need one. Here are…

  • Setting up a SiteGround Site and Pointing the DNS

    Bycasabona

    In the June 2nd Build Something Live, I started working on my Gutenberg Course update, from setting up a local and demo site to moving through the block editor and making notes for what to cover. In this clip, we set up a demo site on SiteGround AND point the DNS to SiteGround from Hover!…

  • Understanding A.I.’s Role in Online Course Creation

    Bycasabona

    If you create online courses, you won’t want to miss this very special discussion! I’ll be joined by Ronnie Burt, Business Lead at Automattic, who’s overseen development of the Sensei LMS plugin. We’re going to cover:

    – Managing emails for your online courses
    – A.I.’s role in assisting with online course creation.
    – Sensei’s upcoming A.I. Quiz Generator
    – Marketing automation tools for course creators and membership sites

    …plus we’ll be fielding questions live!

    This live stream is presented by Sensei. Learn more here: https://howibuilt.it/sensei

  • Sell Products with ConvertKit!

    Bycasabona

    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…

  • 3 Ways to Add Footnotes to Blog Posts in WordPress

    Bycasabona

    Adding footnotes to blog posts can be a great way to add extra context to your content without mucking up the main message. But if you’re using something like WordPress, how do you do it? There are three ways we’ll explore