One of the great benefits of the Global Styles system in WordPress block themes is the ability to create multiple variations that users can choose from. With variations, theme developers can create multiple different websites using the same base theme code, providing a wider range of options to their users. In this session, we'll be taking a block theme, and creating a new Global Style variation for it, to ship with the theme.

1. Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Global Styles Variations in Block Themes

2. 2
👋🏽
Welcome!
As you join, please get
your local WordPress
install ready:
Install and activate the following plugins:
• Create Block Theme plugin -
https://wordpress.org/plugins/create-block-theme/
• SQL Buddy plugin -
https://wordpress.org/plugins/sql-buddy/
Then, let everyone know in the chat where you’re joining
us from…
Hello!
○ My name is Jonathan Bossenger
○ From Cape Town, South Africa
○ Ex-developer turned code instructor
○ Sponsored contributor at Automattic
○ @jon_bossenger in Twitter

3. Learn.WordPress.org
Let's code!
Global Styles
Variations in
Block Themes
Jonathan Bossenger

4. 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.

5. Announcements
○ Please consider taking the Learn WordPress Learner Survey
• https://learn.wordpress.org/individual-learner-survey/
○ Make sure your local install is ready
• Create Block Theme plugin - https://wordpress.org/plugins/create-block-theme/
• SQL Buddy plugin - https://wordpress.org/plugins/sql-buddy/
○ 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/

6. Learning Outcomes
○ What is a Global Styles variation
○ How Global Styles variations work
○ How to create a Global Styles variation using the Site Editor
○ How to export and create the style variation file
• Manually
• Using Create Block Theme

7. Objectives 1
1. Create a brand new blank theme
2. Create a simple style variation, and save it manually
a. Apply a different font
b. Apply some different colors
3. Create a slightly more complex style variation, and save it using Create Block Theme
a. Change the contentSize and wideSize
b. Add and apply an external font
c. Apply a bunch of different colors
7

8. What are Global Styles Variations?
○ Introduced in WordPress 6.0
○ https://make.wordpress.org/core/2022/05/03/global-styles-variations-in-wordpress-6-0/
○ Allows theme developers to create multiple different styles for their themes
○ Uses the same JSON format as theme.json
○ https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
○ https://developer.wordpress.org/themes/advanced-topics/theme-json/#global-styles-
variations
○ Most recently seen on the Twenty Twenty-Two theme
○ Extensively used for Twenty Twenty-Three.

9. 9
Let’s code.

10. Resources
○ https://learn.wordpress.org/individual-learner-survey/
○ Create Block Theme plugin - https://wordpress.org/plugins/create-block-theme/
○ SQL Buddy plugin - https://wordpress.org/plugins/sql-buddy/
○ https://make.wordpress.org/core/2022/05/03/global-styles-variations-in-wordpress-6-0/
○ https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
○ https://developer.wordpress.org/themes/advanced-topics/theme-json/#global-styles-
variations