 Hey there, and welcome to Learn WordPress. In this lesson, you're going to learn about the theme JSON file that allows block theme developers to define theme settings, and then apply those settings to the elements of the theme. Introduced in WordPress 5.8, the theme JSON file allows block theme developers to control the settings and styles of the blocks in the editor. With the introduction of blocks into the site editing experience, the number of settings theme developers may need control over has increased. By making these settings available in a specific standard, the theme JSON file allows for a central point of configuration, while also providing a more consistent experience when configuring theme settings and styles. Let's take a look at the theme JSON file in a code editor. The theme JSON file resides in the root directory of a WordPress theme. It contains a JSON object, which is a collection of key value pairs. JSON, which is an abbreviation of JavaScript object notation, is a standard text-based format for representing structured data based on the JavaScript object syntax. Note that the main JSON object is always wrapped in curly braces, and that each key value pair is separated by a comma. The comma is important and must be included after each key value pair, except for the last one in any given object. If you're using a good code editor, you'll notice that leaving out the comma will result in the code editor highlighting an error. In this example, version is the first key, with a value of 2. The values of the next two keys, settings and styles, are also objects, indicated by the curly braces. These are additional collections of key value pairs, which also follow the JSON syntax. The theme JSON file is validated against a schema, which provides autocompletion in code editors. This means that as you type, the editor will suggest the available options and possible available values for each option. This is a great way to learn about the available options and ensure that you are using the correct syntax. To enable the schema validation, the schema key and value needs to be added to the top of the file. The schema value can be found in the block editor handbook, theme JSON reference guide, under the schema heading. With this added, most modern IDEs and code editors will automatically suggest the available options as you type, and will also provide a description of each option. For example, watch what happens if you create an empty theme JSON in Visual Code Studio with just the schema key. As soon as you start a new key by opening the double quotes, a list of available top-level keys is suggested. If you select version, it automatically populates the value with 2, which is the latest version of theme JSON. By default, WordPress Core ships with a default theme JSON, which enables a specific set of settings and creates a set of predefined CSS variables. The settings key is where the theme developer can extend the default theme JSON or enable or disable specific theme settings and functionality, as well as configure new CSS variables. These settings can then be applied to the theme globally, or to specific block elements. Let's look at one of the first settings that a theme developer can enable, Appearance Tools. Appearance Tools is disabled by default, and this one setting controls all of the following features on blocks that support them. The ability to set border color, radius, style and width. The ability to set link color. The ability to set block, gap, margin and padding values. And the ability to set the text line height. By enabling Appearance Tools, the theme developer is enabling all of these features. If you're editing a theme in the site editor, you can now see these features in the sidebar. So we can set link color on the header block. We can set border and radius on the featured image, for example. And on a paragraph, we can set things like padding and margin and the link color. The ability to enable or disable theme specific settings in a theme JSON file replaces the requirement to use add theme support in a functions.php file. For example, let's look at the ability to define custom colors for elements in the site editor. By default, if the user wanted to change the color of something, say the text, it is possible to select a custom color by selecting it from the custom color picker. In a classic theme, if a theme developer wants to disable this functionality, they would need to add the following code in their functions.php file. Add theme support, disable custom colors. However, using theme JSON, you could do so by setting the settings, color, custom key to a value of false. Doing so would disable the custom color picker across all elements in the site editor. If we click on a paragraph, we can't select a custom color. However, you could specifically enable the color picker for a single block. For example, you could enable the custom color picker specifically on the paragraph block by adding the following to the paragraph block in the theme JSON settings. Blocks, core paragraph, color, custom, and set that to true. Now, if you edit the paragraph block, you'll be able to choose a custom color. Next, custom color picker. It is also possible to create new CSS preset variables for a theme. CSS variables are defined once, but can be used throughout the theme. For example, let's say you wanted to add a new color to the color palette available to WordPress. You could do so by adding a new color object to the settings, color, palette key. Notice how the color palette key defaults to square braces. This indicates a JavaScript array, meaning you can add multiple objects to the color palette. To add a color to the color palette, give it a name, a hex color value, and a slug. This new alternative color would then be available in the color palette in the site editor. Additionally, users can now use this color for any element that supports color. For example, if you wanted to apply this color to a paragraph block's text. With this new color available to the color palette of the theme, let's look at some ways it can be applied to a theme, globally, to specific block elements, or to a specific block. By creating this color, you've not only made it available in the site editor, but you've also created a new CSS variable for the color, which can be applied to various elements in the theme. The format for the CSS variable is dash dash wp, dash dash preset, dash dash color, dash dash slug. In this case, the slug is alternative. So the CSS variable is wp preset color alternative. Let's say you wanted to style all text across the entire theme or site to use the new alternative color. For this, you would use the styles key and set the color text key to the new CSS variable wp preset color alternative. If you load this in the site editor, you'll see that all the text across all blocks is now the alternative color. Let's say you wanted to apply the new color to a specific block. For example, you wanted to apply the new color to any instances of the post content block. You could do so by removing the global text color and adding the color to the specific block in the styles block key post content color text. And again, the CSS variable wp preset color alternative. Now, if you're a fresher site editor, you'll see that the post content block is now the alternative color, but all other text is the default color. Since WordPress 6.1, it is not also possible to apply predefined CSS variables to certain elements across the theme. For example, let's say you wanted to apply this color to the background of all button elements. You could apply this in the theme JSON by targeting the styles elements button key button color background and again the CSS variable. This would apply the color to any blocks that use the button elements, for example, the buttons block or the search block. This is just a high level overview of what's possible with theme JSON. For more information on how to use it, please see the global settings and styles guide as well as the theme JSON reference in the block editor handbook. And also take a look at the theme JSON documentation in the theme handbook. Happy coding!