Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Using Block Patterns in your Block Theme
2
👋🏽
Welcome!
As you join, please get
your local WordPress
install ready:
Install and activate the Create Block Theme plugin
https://wordpress.org/plugins/create-block-theme/
Then, let everyone know in the chat where you’re
joining us from…
Introduction
○ My name is Jonathan
○ I am from Cape Town, South Africa
○ Ex-developer turned code instructor
○ Sponsored contributor at Automattic
Learn.WordPress.org
Let's code!
Creating Blocks
Patterns for your
Theme
Jonathan Bossenger
Announcements
○ Welcome, and thank you to Kathryn for co-hosting today!
○ We’ll be presenting in focus mode.
○ You are welcome to ask questions.
○ You are welcome to unmute to ask questions, or post them in the chat.
Announcements
○ Let’s get your local install ready:
• https://wordpress.org/plugins/create-block-theme/
○ If I am going too fast, please let me know!
○ We will be posting this session to https://wordpress.tv/ afterwards
○ For more WordPress focused content please visit https://learn.wordpress.org/
Learning Outcomes
○ What are Block Patterns
○ Comparing Patterns to Template Parts
○ An overview of the Block Pattern Directory
○ How to create block patterns in PHP
○ How to create block patterns using the patterns directory of your theme
○ How to use patterns for custom functionality
Resources
○ https://developer.wordpress.org/themes/advanced-topics/block-patterns/
○ https://wordpress.org/support/article/comparing-patterns-template-parts-and-
reusable-blocks/
○ https://wordpress.org/support/article/template-part-block/
○ https://wordpress.org/support/article/block-pattern/
Objectives 1
1. Create and use a simple button pattern
2. Create and use a custom header pattern
3. Register and use a pattern category
4. Create a cover pattern, with an image that is part of the theme
9
10
Let’s code.

Using Block Patterns in your Block Theme.pptx

Editor's Notes

  • #2 TITLE SLIDE: Make a copy of this presentation to your Google Drive, and edit to replace with your details.