Transcript
Introduction
In this lesson, we will explore how styles are generated. If you’ve completed the Customization module of the Intermediate WordPress User Learning Pathway, you’ll remember that WordPress offers two ways to modify colors, fonts, and layout via the Site Editor. One is to use Global Styles, and the other is to use the Style Book, which gives you a visual representation of the block you are modifying. But where do these built-in styles come from, and where are they defined?
Theme.json
The answer is in a file named theme.json, which is the focus of this lesson. But first, what is theme.json? The theme.json file is used to define the global and block-based styles for your theme. Every visual aspect of every property is there, from color and typography to spacing and dimensions. This approach is often referred to as having a single source of truth. In this case, theme.json is the primary file that’s responsible for specifying and organizing all the theme’s design aspects, making it easier to update, modify, and manage. So, where do we find theme.json? In the first lesson of this chapter, we peeked into our site’s theme files. Let’s return to that page and navigate to Tools and then Theme File Editor. You’ll be greeted with a warning message advising you not to edit your theme directly. This is only a brief introductory visit, so you can safely hit the I understand button. In the right sidebar, under Theme Files, click on Theme Styles and Block Settings. If you followed the previous lesson, The Building blocks of WordPress templates, you might have noticed that theme.json includes mostly JSON, a universal data format. JSON represents data in pairs, a key, and its value.
Examples
In this example, we have a Button’s block. The keys are the properties of the Button’s block, for example, background color, text color, and border-radius. The values are its styles and settings. Let’s look at two more examples. In this example, JSON defines a color palette. Each object in the palette array or list represents a color in the palette with the following properties. The hex code, a human readable name for the color and the slug or a short identifier for the color. In the last example below layout, we will see a key named Content Size and a value of 620 pixels. And that means the content width of this theme is set to 620 pixels. When you customize a style via the Editor, for example in this case we’re going to change the content width to 650 pixels, WordPress generates these changes as JSON, ensuring they are rendered into CSS styles that can be displayed properly in the browser. Take a moment to browse around Theme.json. Scroll down and search for words you’re familiar with from the Editor, such as color, layout, button, border, etc. Note how color, for example, appears numerous times across the file while the layout is only specified once. All these properties describe the predefined styles of the theme as determined by the designers and developers who created it.
Theme.json versus Editor
While you can alter these default styles right in theme.json, it’s not the recommended method, neither for users nor extenders. Customizing the design via the Editor is a more practical and intuitive approach. Going into the specifics of JSON is beyond the scope of this lesson. To continue your journey as a web maker, check out the Beginner WordPress Developer Learning Pathway, specifically the Global Settings and Style lesson in the Introduction to Developing WordPress Themes module.
Conclusion
So what is next? If you have already made changes to your styles in the Site Editor, for example, changing the Image block’s radius as in this example, or maybe picking a different color for a block, you won’t find these changes in theme.json. That’s because these customizations were stored in the database, not the theme files. To understand the difference between the database and theme files and how you can update the theme’s theme.json to include your modifications, check out the module How WordPress saves your content and the lesson, Use the Create Block Theme plugin for exports and theme variations.
Practical
Open the File Editor in WordPress Playground and navigate to Theme Styles and Block Settings to access the theme.json file. Review the properties within theme.json, paying attention to key style-related terms like color and layout. Observe how these properties are structured.