Creating a WordPress Block Theme — Creating Block Patterns

So we are continuing on in our efforts to create a WordPress block theme. This time we’re getting starting to create block patterns.

If you’re new to block patterns, they are essentially groups of blocks that you can save in a file in your theme or plugin and then quickly add to any post, page, template or custom post type in the block editor. And as you’ll see, they are really simple and easy to create and use.

So today let’s walk through how I created block patterns for this WordPress block theme.

Semplice Monospazio: https://wordpress.org/themes/semplice-monospazio/
Semplice Monospazio GitHub: https://github.com/JMWebDevelopment/Semplice-Monospazio
JM FSE Starter Theme GitHub: https://github.com/JMWebDevelopment/JM-Web-Development-FSE-Starter-Theme
WordPress Block Patterns Directory: https://wordpress.org/patterns/
Creating a Block Pattern with Plugins: https://wpmayor.com/how-to-create-a-block-pattern-in-the-wordpress-block-editor/
Code Beautify: https://codebeautify.org/json-escape-unescape
Frost WP Theme: https://github.com/wpengine/frost
WP Rig: https://github.com/wprig/wprig/
Website: https://jacobmartella.com/
Development Blog: https://devblog.jacobmartella.com/
Jacob Martella Web Development YouTube Channel: https://www.youtube.com/channel/UCpOHh4-E6XXVLaWtEtG1XpA
Small Business Website Starter Kit: https://jacobmartella.com/small-business-website-starter-kit/
WordPress Website Care: https://jacobmartella.com/wordpress-website-care/
Hire me as a Freelancer: https://jacobmartella.com/freelance-web-developer/
Twitter: https://twitter.com/ViewFromTheBox
LinkedIn: https://www.linkedin.com/in/jacob-martella/
GitHub: https://github.com/JMWebDevelopment
Instagram: https://www.instagram.com/thesportsjournalist/

Timestamps:
0:00 - Intro
1:00 - Theme structure
3:47 - Creating block pattern categories
5:11 - Structure of a block pattern file
7:02 - Creating a callout block pattern
11:38 - Adding the HTML for a block pattern
14:31 - Creating a query grid block pattern
20:44 - Outro

#WordPress #WebDevelopment #WordPressBlockThemes