Theme.json V3: Common Questions Answered  ## Metadata - Author: [[WP Development Courses]] - Full Title: Theme.json V3: Common Questions Answered - Category: #articles - Document Note: --- tags: [#WordPress, #ThemeDevelopment, #ThemeJsonV3, #WordPress6.6] - WordPress - ThemeJsonV3 - Development Author: Frank (from DP Development Courses) Source: YouTube Reference: [https://www.youtube.com/watch?v=ESYLt_Hm2So] date created: 2024-09-14 13:15 --- # Title: Understanding Theme.json Version 3 in WordPress 6.6 ## Table of Contents: - [Introduction](#Introduction) - [Why Was Theme.json Version 3 Introduced?](#Why-Was-Theme.json-Version-3-Introduced) - [Changes in Theme.json V3](#Changes-in-Theme.json-V3) - [Deciding Which Version to Use](#Deciding-Which-Version-to-Use) - [Migrating From Version 2 to Version 3](#Migrating-From-Version-2-to-Version-3) - [Using Developer Tools for Validation](#Using-Developer-Tools-for-Validation) ### References: - YouTube: [Theme.json V3 Overview](https://www.youtube.com/watch?v=ESYLt_Hm2So) ## 📝 Summary: In WordPress 6.6, Theme.json received an update to version 3, which introduces new features to improve theme development. This update addresses compatibility issues and offers developers better control over default settings, such as font sizes and spacing. The video explores the reasons for the new version, the changes it introduces, and the migration process for themes using older versions. ## 📖 Main Content: ### Why Was Theme.json Version 3 Introduced? Theme.json in WordPress is used to define theme settings like block styles and editor configurations. With WordPress 6.6, a new version was introduced due to issues in handling default settings for font sizes and spacing scales. This change was required to offer developers clearer and more consistent ways to manage theme defaults. ### Changes in Theme.json V3: - **Font and Spacing Defaults**: In version 2, removing default font sizes and spacing required workarounds (e.g., setting steps to zero). With version 3, developers can now simply toggle these defaults off using flags like `defaultFontSizes: false` and `defaultSpacingSizes: false`. - **Schema Updates**: The theme.json schema has been updated to align with WordPress 6.6. Developers must update their theme’s schema version when migrating to version 3. ### Deciding Which Version to Use: - **New Themes**: Use version 3 by default for any new themes. - **Existing Themes**: Stick with version 2 unless you need features from version 3 or plan to migrate fully. - **Child Themes**: The child theme should use the same theme.json version as the parent theme to avoid compatibility issues. ### Migrating From Version 2 to Version 3: Migrating from version 2 to version 3 is simple: 1. Update the version number at the top of the theme.json file. 2. Adjust the WordPress version in the schema to 6.6 or higher. 3. Toggle off the default settings (e.g., `defaultFontSizes` and `defaultSpacingSizes`) if required. ### Using Developer Tools for Validation: Modern code editors like VS Code have built-in support for theme.json schemas, providing real-time validation and error highlighting. This helps developers quickly identify and resolve issues in their configurations. ### 🗒️ Notes: - **Why Version 3?**: To simplify turning off default settings for font sizes and spacing. - **What Changed?**: New flags to disable default settings, improved clarity for developers. - **Migration**: Simple version update in the theme.json file. - **Validation**: Use VS Code for schema validation. ## 📖 References: - YouTube Video: [Theme.json V3 in WordPress 6.6](https://www.youtube.com/watch?v=ESYLt_Hm2So) - WordPress Documentation on Theme.json ## 🗣️ Paraphrase: 1. In WordPress 6.6, the default font sizes and spacing scales used to be difficult to override in version 2 of theme.json. Version 3 introduces clear flags that allow developers to easily toggle off these defaults. 2. Migrating to version 3 of theme.json involves simply updating the schema version and adding the new flags to turn off default settings. Developers can then benefit from cleaner configurations without complicated workarounds. ## 📰 Newsletter: 🚀 **WordPress 6.6 Brings New Theme.json V3 Updates!** In the latest WordPress update, theme.json has reached version 3, making it easier than ever to manage theme defaults like font sizes and spacing. Gone are the days of complicated workarounds—now you can toggle off these defaults with simple flags. If you're developing new themes, be sure to migrate and take advantage of the updated features. Read more about the migration process and how to update your themes to version 3 in our latest post! [Watch the breakdown here](https://www.youtube.com/watch?v=ESYLt_Hm2So). ## ✅ Action Items: For Developer Advocates working in WordPress, theme.json v3 aligns with the broader goal of streamlining development and supporting the open-source community. With this update, developers can adopt new features with minimal migration effort. This improvement fosters a more sustainable ecosystem where themes can evolve without breaking older versions. As someone deeply involved in supporting open-source contributors, I’ll ensure this update is included in upcoming training materials for new WordPress developers and contributors. Additionally, it serves as a solid example of backward compatibility done right—an essential aspect of sustainable open-source growth. ## 🧪 Hypotheses: - Developers who adopt theme.json v3 will experience faster development cycles due to reduced complexity in theme configuration. - Adoption of theme.json v3 will increase theme compatibility with WordPress block editor updates. ### 📊 Methodology: - Survey WordPress theme developers post-migration to gather feedback on ease of use and time savings. - Analyze theme compatibility and stability before and after migrating to version 3. ### ❓ Questions: - How long will it take for major theme developers to fully adopt theme.json v3? - Are there any edge cases where sticking to version 2 would be beneficial? ### 🔮 Future Research: - Study the impact of theme.json v3 on performance metrics for themes using WordPress block editor features. - Investigate additional opportunities for simplifying theme development in future WordPress releases. ### 💡 Implications: By standardizing how defaults are handled in theme.json, WordPress can streamline theme development. Future research could help uncover even more ways to make theme customization easier and more intuitive, pushing the platform towards greater accessibility for non-developers. ### 🧠 Learning Styles Assessment: 1. **Visual Learners (Spatial)**: - **Present**: Diagrams explaining theme.json structure. - **Improve**: More flowcharts showing the migration process. 2. **Aural Learners (Auditory-Musical)**: - **Present**: Video explanation with detailed verbal breakdown. - **Improve**: Audio summaries of each section. 3. **Verbal Learners (Linguistic)**: - **Present**: Clear, detailed explanations with relevant examples. - **Improve**: Add storytelling elements to show real-world use cases. 4. **Physical Learners (Kinesthetic)**: - **Present**: Code examples for hands-on practice. - **Improve**: Include interactive exercises for migration steps. 5. **Logical Learners (Mathematical)**: - **Present**: Step-by-step guide to the migration process. - **Improve**: Include a decision tree to help choose between version 2 and version 3. 6. **Social Learners (Interpersonal)**: - **Present**: Developer discussion forums linked from the video. - **Improve**: Create study groups for collaborative learning on theme.json updates. 7. **Solitary Learners (Intrapersonal)**: - **Present**: Self-paced video and article formats. - **Improve**: Add reflection prompts on how these changes might affect individual projects. 8. **Naturalistic Learners**: - **Present**: No references to nature or environmental contexts. - **Improve**: Could introduce analogies from nature to explain software evolution. ### 📊 Accessibility Assessment: - **Screen Reader Compatibility**: Ensure video descriptions and transcript are available. - **Keyboard Navigation**: Validate that navigation of the tutorial content is possible using only the keyboard. - **Contrast and Readability**: Ensu - Document Tags: [[theme.json]] [[wordpress developer]] - Summary: 01:04 Why was version 3 introduced? 02:08 What did version 3 change? 05:24 What theme.json version to use? 06:31 How to migrate from v2 to v3? *** Ressources: **** 🎥 Free Theme.json Explained Course: https://wpdevelopment.courses/lp/theme-json-explained/ WordPress Developer Note on theme.json v3: https://make.wordpress.org/core/2024/06/19/theme-json-version-3/ WordPress Theme.json V3 Reference: https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/ How to use theme.json schema: https://make.wordpress.org/themes/2021/11/30/theme-json-schema/ ➡️ Build performant, beautiful, and easy-to-use themes using Full-Site Editing: https://wpdevelopment.courses/courses/building-block-themes/ - URL: https://youtube.com/watch?v=ESYLt_Hm2So&si=AeFCMGI3V9CY-q9j hello this is Frank from DP development courses and in this video I want to talk you about theme Json version 3 so in WordPress 6.6 we got a new version for theme. Jason and so got a bunch of questions from the students of my Brock theme Academy course about this and so in this video I just want to collect all of the individual answers that I gave into one easy to reference resource and so this video assumes that you have basic knowledge of how theme. Json Works uh if you don't have it that's not a problem uh just check the description there bunch of useful resources in there that help you along and so what we're going to cover in this video are four points so first of all why did WordPress introduce new version of them not Json then the second thing is what were the changes that version 3 introduced then the third point is what version of theme the Chason should you use in your theme and then the fourth one we're just going to migrate a theme the Chason PRI from version two to version three so you can kind of see the changes that you would need to make to one of your themes if if you wanted to switch to new version of f. Chasm all right so let's start with why does WordPress even use a f. Chason version so this fer Chason file that looking at that is the one from 2024 and it contains a bunch of information that WordPress reads out to then style blocks configure the editor and do other things and so WordPress expects this file to have a certain format and so this format is described in a specification that's called schema and so you can extend on the specification by adding things and that doesn't cause any concerns with backwards compatibility however if you want to remove something or if you want to change the behavior of certain elements in here that creates concerns because if you just do that you will break existing themes and therefore whenever WordPress introduces a breaking change it would bump the version of the schema and so therefore whenever you have a theme. Json file you need to indicate the version of the schema that you're using so that way even though WordPress introduced a version three of the schema version two still works perfectly well and there are no backwards compatibility concerns now that being said what was the change that was backwards incompatible that caused WordPress to bump the version number now for that we need to look at two default pallets that are part WordPress so what you see here that's just an empty theme and we use it to show you the defaults that WordPress uses for font sizes and for spacing sizes if your theme that Chas and Fire doesn't specify those settings so here if your theme doesn't have any font sizes this is theault pet that WordPress will show in the same way if you don't have any spacing pallets then this is what WordPress will show here on Dimensions now we're going to look at how this is implemented so for that we're going to look at the theme. Chason file in doup includes so if we go into the WordPress directory doup includes there's actually theme. Chason file which works the same way as the theme. Chason file that you see in the themes out there and so this is where the defaults originate from and so for font sizes this is the array that contains Declaration of the default font sizes so this is where this is coming from and then when we looking at the spacing pallet here there is no pallet as we see here so an array of entries instead there's a spacing scale so spacing scale allows to generate a regular spacing size pallet so here we see that there seven steps inside of this and each step increments the spacing size by 1.7 so what was the issue about this well the issue for this was that if you wanted to get rid for example of the font sizes you had to do it in a bit of a roundabout way so for example if you wanted to have no font sizes what you need to do you needed to declare an empty array in your theme. CHS and in your theme to get rid of those which is of course a bit weird the other part is that if you were to declare phont sizes in your theme WordPress would merge this default declaration with your decoration and there could be a little bit of weird box with it so it wasn't as easy e to understand how to get rid of font sizes how to or how to do a proper pallet now for font size it wasn't as bad as it was for the spacing scale because to unset the default spacing scale what you actually had to do you had to set the steps to zero and you can see this here when I search here for spacing scale in 2024 so you see spacing spacing scale so to unset the default spacing sizes that WordPress provides you have to set the steps to zero and then here 2024 uses its own spacing pallet and so because this was so weird what reers decided to do is that they said hey we're going to implement the flag to turn off these default pallets so that follows a patterns which you have for example also for colors so for example if you don't want to have the default color palette there is a way to turn it off with default pets you just set it to false and so what version three in 6.6 introduces is that you have default spacing sizes entry here under spacing if you set that to false then the pallet does doesn't show up and then here when we go to typography there is also default font sizes flag you set it to false and then it doesn't show up so those are the changes that version 3 introduced and now this is not only a lot clearer for f developers but you also step around of a bunch of weird box uh that you can run into when you don't overwrite these settings correctly in your F Json in version two so then now I've seen the breaking changes the question that think comes is why should I use version two of Chason or should I use version three now that depends on your scenario so if you're creating a new theme from scratch of course use version three because that is the most recent one and therefore you on the most recent version and if version four comes around you don't have to upgrade from 2 to 3 to four now you have a theme that is on version two there are really no reasons for you to upgrade right so if you use the version two scheme in the right way you don't run into this issues so if everything is working for you just just stay on two until you need to upgrade because you want to use a new feature that is in version three now the third scenario is that if you create a child theme then your child theme needs to use the same version as the parent theme else you're going to run into weird bugs so if you're for example child theming 2024 it's still on version two so keep the child theme also on version two now speaking of 2024 let's migrate this theme from theme Chas in version two to version three so the first step need is you just change the version up here from 2 to three now when you change the version you also need to change the schema here to a WordPress version that actually supports version 3 so 6.5 doesn't know what version 3 is because at that time you only had version two available so what you need to do is you need to bump this as well so now when I have 6.6 here then I can now go ahead and use the new flags that I got so so we can just go here and we're going to look for the typography and so here on the typography what I can then do is I can just go in here and then I can set default font sizes here to false so that is done that's quite easy uh 2024 defines its own font sizes so we don't need to change anything there what we also now can add is here for the spacing we can set Thea spacing sizes to fals as well right so now that we have done this you see that here my uh editor points out that steps zero is no longer valid so this previous approach that you use to turn off theault spacing scale it's no longer valid so all we have to do is we go in and then we save this and that's it now you have migrated this uh F chasing from version two to version three now here I'm using uh the vs code editor and it has buil-in support for the theme Json schema and so if you have that set your editor will warn you about anything which is invalid for example here if I set this to one just to show you you will see that here there is a warning where the editor shows that this is not the right value so this is something that's very useful and that you should definitely use when you create your own themes all right that's it for theme Jason version 3 now if you have any questions just feel free to reach out and then see you in the next video, Theme.json V3: Common Questions Answered, WP Development Courses, 01j7rznkzzq6mtmpzg38wstzk6.