1. Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Diving into theme.json

2. 2
👋
Welcome!
As you join, feel free to
answer these questions in
the chat:
1. What region are you joining us from?
2. What do you do with WordPress?
3. What is your favourite thing about
WordPress?

3. Learn.WordPress.org
Let's code!
Diving into
theme.json
Jonathan Bossenger

4. Announcements
○ Welcome, and thanks to Ross for co-hosting with me 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
○ Block course theme code from this session:
• https://github.com/WordPress/block-course-theme
• https://github.com/WordPress/block-course-
theme/releases/download/1.0.0/block-course-theme.zip
○ 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
○ A quick overview of block themes
○ What is theme.json?
○ Developing with theme.json
• Enable debug mode
• Include the schema

7. Learning Outcomes (continued)
○ Enabling and disabling settings globally
• appearanceTools
• layout
• dropCap
○ Adding styles
• Adding a color to the color pallete
○ Applying styles globally
• Applying the color to the theme
○ Applying styles at the block level
• Applying the color to the core/post-title block

8. Block themes
○ https://developer.wordpress.org/themes/block-themes/
○ A block theme is a type of WordPress theme built using blocks.
○ You can edit all parts of a block theme in the Site Editor.
○ https://wordpress.org/themes/tags/full-site-editing/

9. theme.json
○ https://developer.wordpress.org/themes/advanced-topics/theme-json/
○ theme.json is a configuration file for theme styles and block settings.
○ theme.json allows the block theme developer to control settings globally and per block
○ Top-level settings apply to all blocks that support the relevant setting.
○ Block-level settings can override the top-level settings for a specific block.
○ https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/

10. Development resources
○ https://schemas.wp.org/trunk/theme.json
○ https://developer.wordpress.org/themes/advanced-topics/theme-json/
○ https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
○ https://developer.wordpress.org/block-editor/reference-guides/theme-json-
reference/theme-json-living/
○ https://developer.wordpress.org/block-editor/reference-guides/core-blocks/

11. 11
Let’s code.

12. Learn.WordPress.org
Thank You!
Questions?

13. Link Vault
○ https://developer.wordpress.org/themes/block-themes/
○ https://wordpress.org/themes/tags/full-site-editing/
○ https://developer.wordpress.org/themes/advanced-topics/theme-json/
○ https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/
○ https://schemas.wp.org/trunk/theme.json
○ https://developer.wordpress.org/themes/advanced-topics/theme-json/
○ https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
○ https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/
○ https://developer.wordpress.org/block-editor/reference-guides/core-blocks/