Let's code! Diving into theme.json
Download as PPTX, PDF1 like122 views
The document is a transcript of a WordPress coding session focused on theme.json, a configuration file that allows developers to manage theme styles and block settings in block themes. Key topics include how to implement styles globally and at the block level, as well as links to further resources for learning. Participants were encouraged to engage by asking questions during the session.
Let's code! Diving into theme.json
- 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?
- 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.
- 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/
Editor's Notes
- #2: TITLE SLIDE: Make a copy of this presentation to your Google Drive, and edit to replace with your details.