How to Build A Simple WordPress Gutenberg Block Patterns Plugin

In this video, Paul shows you step by step on how to code your own very simple WordPress block pattern plugin.

IMPORTANT!
One thing to note, is on the video, I created the plugin locally and did not create the blocks on a live production server, therefore the block pattern images will not load or be found when adding the blocks to the editor on another site. If you are going to create your own block plugin, make sure to do so on a WordPress site that any images used in the block patterns are hosted on a live server, otherwise they will break. This is something I realised after I finished recording the video.

Table of Contents

1. Intro 0:00
2. Block Patterns VS Reusable Blocks 2:45
3. Project Overview 5:36
4. Create File and Register Plugin 8:14
5. Add plugin security restrict direct access code 11:16
6. Register Pattern Category 12:04
7. Register Block Pattern 14:54
8. Creating the first Block Pattern 20:05
9. Escape Block Pattern JSON 22:45
10. Adding Escaped Block Code Content and troubleshooting 24:21
11. Testing first successful block pattern 26:16
12. Building out the remaining patterns and demonstrating categories - 26:36
13: Outtro 41:16

Content Resources

1. Register Plugin header code - https://developer.wordpress.org/plugi...
2. Plugin security code - https://wordpress.stackexchange.com/q...
3. Register Block Pattern Category code - https://developer.wordpress.org/refer...
4. Register Block Pattern code - https://developer.wordpress.org/refer...
5. Escape Block Pattern JSON tool - https://jsonformatter.org/json-escape

Paul is using the following plugins and themes:

Block Editor: Greenshift - https://wordpress.org/plugins/greensh...
Block FSE Theme: Greenshift Theme - https://wordpress.org/themes/greenshift/

Purchase Greenshift Addons: https://shop.greenshiftwp.com/downloa...

Looking for Greenshift Block Templates? Check out https://gstemplates.com where you can download free block layout templates for the Greenshift block pagebuilder.

Affliate disclosure
The links I share are affiliated products and if you decide to purchase anything with my affiliate links, I will receive a small commission payment.

Thank you for your support and watching my videos.