{"id":376820,"date":"2023-01-31T07:52:01","date_gmt":"2023-01-31T15:52:01","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=376820"},"modified":"2023-03-01T07:01:49","modified_gmt":"2023-03-01T15:01:49","slug":"defining-global-settings","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/defining-global-settings\/","title":{"rendered":"Defining Global Settings"},"content":{"rendered":"\n<p>So far, we\u2019ve spent time getting familiar with <code>theme.json<\/code>, the foundation for all WordPress block themes. We covered the various JSON data types and common terminology related to working with the JSON syntax.<\/p>\n\n\n\n<p>We are going to build on that knowledge in this article.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-group ticss-ad1a3c1b\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"simpletoc-hidden wp-block-heading\" id=\"wordpress-block-theme-css-and-style-settings-guide\">WordPress Block Theme CSS and Style Settings Guide<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/\">Introduction<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/\">Glossary of Terms for <code>theme.json<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-settings\/\">Defining Global Settings<\/a> <em>(you are here!)<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-styles-in-wordpress\/\">Defining Global Styles<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/how-the-style-engine-generates-classes\/\">How the Styles Engine Generates Classes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/\">Global Styles Reference Tables<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<details >\n  <summary>\n          <h3>Table of contents<\/h3>\n      <\/summary>\n  \n<ul class=\"simpletoc-list\"   >\n<\/li><li>\n<a  href=\"#what-we-mean-by-top-level\">What we mean by \u201ctop level\u201d<\/a><\/li><li>\n<a  href=\"#the-settings-section-settings\">The settings section (settings)<\/a><\/li><li>\n<a  href=\"#supported-features\">Supported features<\/a><\/li><li>\n<a  href=\"#the-appearancetools-shorthand\">The appearanceTools shorthand<\/a><\/li><li>\n<a  href=\"#paddingaware-alignments\">Padding-aware alignments<\/a><\/li><li>\n<a  href=\"#configuring-preset-values\">Configuring preset values<\/a><\/li><li>\n<a  href=\"#wrapping-up\">Wrapping up<\/a><\/li><\/ul>\n<\/li><\/ul>\n\n<\/details>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"what-we-mean-by-top-level\">What we mean by \u201ctop level\u201d<\/h3>\n\n\n<p>We discussed how JSON has a structured syntax. We can see that in the basic outline of the <code>theme.json<\/code> file:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {},\n  \"styles\": {},\n  \"customTemplates\": {},\n  \"templateParts\": {}\n}<\/code><\/pre>\n\n\n\n<p>Each object in the basic outline is a \u201ctop level\u201d of the file. You can think of the objects as sections where various things are configured. Disregarding the <code>version<\/code>, there are four top-level sections:<\/p>\n\n\n\n<ul>\n<li><strong><code>settings<\/code>:<\/strong> This is where we define WordPress presets and defaults; it\u2019s also where we can enable or disable certain WordPress features.<\/li>\n\n\n\n<li><strong><code>styles<\/code>:<\/strong> This is where we define CSS for global and block-level theme styles.<\/li>\n\n\n\n<li><strong><code>customTemplates<\/code>:<\/strong> This is where we register new custom theme templates. It\u2019s the equivalent of dropping a new PHP template file in a classic theme.<\/li>\n\n\n\n<li><strong><code>templateParts<\/code>:<\/strong> This section contains modular pieces that can be included in templates. It\u2019s the equivalent of the <code>parts<\/code> subfolder you typically see in classic themes.<\/li>\n<\/ul>\n\n\n\n<p>We\u2019re spending most of our time in the <code><strong>settings<\/strong><\/code> and <code><strong>styles<\/strong><\/code> sections. Both provide ways to configure the global styles of a WordPress block theme. So, let\u2019s look at each one and the various options we have to customize the theme appearance.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-settings-section-settings\">The settings section (<code>settings<\/code>)<\/h3>\n\n\n<p>Again, this is where we configure WordPress features, sort of like the <a href=\"https:\/\/developer.wordpress.org\/reference%252Ffunctions%252Fadd_theme_support%252F\/\" rel=\"noopener\"><code>add_theme_support<\/code> function<\/a> you\u2019d reach for in a classic theme\u2019s <code>functions.php<\/code> file.<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \/\/ etc.\n  }\n}<\/code><\/pre>\n\n\n\n<p>Why is this relevant to a theme\u2019s global styles? Several WordPress features affect styling, like UI controls for padding, margins, colors, and fonts. Without enabling those, there\u2019s no way to apply these and other styles in the Global Styles UI in the Site Editor.<\/p>\n\n\n\n<p>In short: what we define here is what WordPress uses to add theme support for the Site Editor\u2019s global style settings that are used throughout the theme.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"supported-features\">Supported features<\/h3>\n\n\n<p>The <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#backward-compatibility-with-add_theme_support\" rel=\"noopener\">WordPress Block Editor Handbook<\/a> provides a table that outlines available features we can enable in the <code>settings<\/code> section and compares them to their equivalent <code>add_theme_support<\/code> function arguments.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Theme JSON&nbsp;settings<\/th><th><code>add_theme_support<\/code><\/th><\/tr><\/thead><tbody><tr><td><code>color.custom<\/code><\/td><td><code>custom-colors<\/code><\/td><\/tr><tr><td><code>color.palette<\/code><\/td><td><code>editor-color-palette<\/code><\/td><\/tr><tr><td><code>color.gradients<\/code><\/td><td><code>editor-gradient-presets<\/code><\/td><\/tr><tr><td><code>spacing.padding<\/code><\/td><td><code>custom-spacing<\/code><\/td><\/tr><tr><td><code>spacing.units<\/code><\/td><td><code>custom-units<\/code><\/td><\/tr><tr><td><code>typography.lineHeight<\/code><\/td><td><code>custom-line-height<\/code><\/td><\/tr><tr><td><code>typography.fontSizes<\/code><\/td><td><code>editor-font-sizes<\/code><\/td><\/tr><tr><td><code>useRootPaddingAwareAlignments<\/code><\/td><td>N\/A<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>For example, you were using <code>add_theme_support<\/code> in your classic theme to disable custom font sizes:<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">&lt;?php\nadd_theme_support(disable-custom-font-sizes);<\/code><\/pre>\n\n\n\n<p>The equivalent in <code>theme.json<\/code> is the <code>settings.typography.customFontSize<\/code> property:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"typography\": {\n      \"customFontSize\": false;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>As you might imagine, there are nested features within these features. For example, if we were adding support for <code>spacing<\/code> controls, there are a number of <code>spacing<\/code>-related features we can individually enable:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"spacing\": {\n      \"margin\": false,\n      \"padding\": false,\n      \"blockGap\": null,\n      \"units\": [ \"px\", \"em\", \"rem\", \"vh\", \"vw\" ]\n    },\n  }\n}<\/code><\/pre>\n\n\n\n<p>As of WordPress 6.1, these are the <code>settings<\/code> features that can be configured in <code>theme.json<\/code>:<\/p>\n\n\n\n<details >\n  <summary>\n          View full table      <\/summary>\n  \n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Setting<\/th><th>Feature<\/th><th>Data type<\/th><\/tr><\/thead><tbody><tr><td><code>border<\/code><\/td><td><code>radius<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>color<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>style<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>width<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><code>color<\/code><\/td><td><code>custom<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>customDuotone<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>customGradient<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>duotone<\/code><\/td><td>Array<\/td><\/tr><tr><td><\/td><td><code>gradients<\/code><\/td><td>Array<\/td><\/tr><tr><td><\/td><td><code>link<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>palette<\/code><\/td><td>Array<\/td><\/tr><tr><td><\/td><td><code>text<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>background<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>defaultGradients<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>defaultPalette<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><code>layout<\/code><\/td><td><code>contentSize<\/code><\/td><td>String<\/td><\/tr><tr><td><\/td><td><code>wideSize<\/code><\/td><td>String<\/td><\/tr><tr><td><\/td><td><code>type<\/code><\/td><td>String&nbsp;(<code>default<\/code>&nbsp;and&nbsp;<code>constrained<\/code>)<\/td><\/tr><tr><td><code>spacing<\/code><\/td><td><code>margin<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>padding<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>blockGap<\/code><\/td><td>String<\/td><\/tr><tr><td><\/td><td><code>units<\/code><\/td><td>Array<\/td><\/tr><tr><td><code>typography<\/code><\/td><td><code>customFontSize<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>lineHeight<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>dropCap<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>fontStyle<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td>fontWeight<\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>letterSpacing<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>textDecoration<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>textTransform<\/code><\/td><td>Boolean<\/td><\/tr><tr><td><\/td><td><code>fontSizes<\/code><\/td><td>Array<\/td><\/tr><tr><td><\/td><td><code>fontFamilies<\/code><\/td><td>Array<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details>\n\n\n<p class=\"is-style-explanation\">There are <a href=\"https:\/\/make.wordpress.org\/design\/2022\/11\/21\/design-share-nov-7-nov-18\/\" rel=\"noopener\">ongoing discussions<\/a> to add the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/45995\" rel=\"noopener\"><code>outline<\/code> and <code>border<\/code><\/a> properties to the Global Styles panel. They are included in this table before formal adoption.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-appearancetools-shorthand\">The <code>appearanceTools<\/code> shorthand<\/h3>\n\n\n<p>I know that the table shows a ton of features. Configuring each setting could get cumbersome. That\u2019s where the <code>appearanceTools<\/code> setting comes into play.<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"appearanceTools\": true\n  }\n}<\/code><\/pre>\n\n\n\n<p>Setting it to <code>true<\/code> enables the following settings in one fell swoop:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"border\": {\n      \"color\": true,\n      \"radius\": true,\n      \"style\": true,\n      \"width\": true\n    },\n    \"color\": {\n      \"link\": true\n    }\n    \"spacing\": {\n      \"margin\": true,\n      \"padding\": true,\n      \"blockGap\": true,\n    },\n    \"typography\": {\n      \"lineHeight\": true\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>You can see how many lines of code we can save this way! But let\u2019s say you want to take advantage of <code>appearanceTools<\/code>, but disable one or two of its supported features. You can do that on an individual basis to override that particular setting:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"border\": {\n      \"radius\": false\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>The following screenshot shows how setting <code>appearanceTools<\/code> to <code>true<\/code> exposes those controls in the Global Styles UI, taken from the default <a href=\"https:\/\/wordpress.org\/themes\/twentytwentythree\/\" rel=\"noopener\">Twenty Twenty-Three theme<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1003\" height=\"469\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_24DEF265EF8C89B41F9BB642366BE7BA2754CF882C77B5E3C0C67051AB08C126_1671195635502_globalstylesui.png?resize=1003%2C469&#038;ssl=1\" alt=\"The WordPress Site Editor.\" class=\"wp-image-376791\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_24DEF265EF8C89B41F9BB642366BE7BA2754CF882C77B5E3C0C67051AB08C126_1671195635502_globalstylesui.png?w=1003&amp;ssl=1 1003w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_24DEF265EF8C89B41F9BB642366BE7BA2754CF882C77B5E3C0C67051AB08C126_1671195635502_globalstylesui.png?resize=300%2C140&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_24DEF265EF8C89B41F9BB642366BE7BA2754CF882C77B5E3C0C67051AB08C126_1671195635502_globalstylesui.png?resize=768%2C359&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p class=\"is-style-explanation\">This <a href=\"https:\/\/wordpress.tv\/2022\/12\/09\/builder-basics-demystifying-theme-json-and-global-styles\/\" rel=\"noopener\">Learn WordPress video<\/a> by Nick Diego explains the <code>appearanceTools<\/code> properties and the Global Styles interface in great detail.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"paddingaware-alignments\">Padding-aware alignments<\/h3>\n\n\n<p>This feature is worth calling out because it shipped more recently than many other features as part of <a href=\"https:\/\/wordpress.org\/news\/2022\/11\/misha\/\" rel=\"noopener\">WordPress 6.1<\/a>. It is another shortcut for setting two <code>spacing<\/code> features.<\/p>\n\n\n\n<p>So, this:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"useRootPaddingAwareAlignments\": true\n  }\n}<\/code><\/pre>\n\n\n\n<p>\u2026is the equivalent of this:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"spacing\": {\n      \"margin\": true,\n      \"padding\": true\n    },\n  }\n}<\/code><\/pre>\n\n\n\n<p>The real benefit of <code>useRootPaddingAwareAlignments<\/code> is in the name. By enabling it, we opt into a feature that defines global padding on the <code>&lt;body&gt;<\/code> of our theme and allows blocks to \u201cbreak out\u201d of that padding and go full-width if we need a block to span edge-to-edge.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/using-the-new-constrained-layout-in-wordpress-block-themes\/#aa-userootpaddingawarealignments\">See my previous article<\/a> for a detailed overview of padding-aware alignments.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"configuring-preset-values\">Configuring preset values<\/h3>\n\n\n<p><em>Presets<\/em> are predefined values used by Global Styles features. More specifically, they define <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/\">CSS custom properties<\/a> used throughout a block theme.<\/p>\n\n\n\n<p>So, let\u2019s say you are defining your block theme\u2019s default color palette and add black (<code>#000000<\/code>) to it:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"color\": \"#000000\",\n          \"name\": \"Base\",\n          \"slug\": \"base\"\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Behind the scenes, something called the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-style-engine\/\" rel=\"noopener\">Style Engine<\/a> takes those values and generates the theme\u2019s CSS classes and custom properties. I described the Style Engine <a href=\"https:\/\/css-tricks.com\/managing-css-styles-in-a-wordpress-block-theme\/#aa-the-style-engine\">in a previous article<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The Style Engine is a new API in WordPress 6.1 that is meant to bring consistency to how styles are generated and where styles are applied. In other words, it takes all of the possible sources of styling and is singularly responsible for properly generating block styles. [\u2026] Having a centralized API for styles is probably the most elegant solution given that styles can come from a number of places.<\/p>\n<\/blockquote>\n\n\n\n<p>When the Style Engine notices our <code>styles<\/code>, it creates a set of preset custom properties. For example, that color palette example above? It produces a CSS custom property based on the information we supply it.<\/p>\n\n\n\n<p>If we were to open up DevTools and inspect the <code>&lt;body&gt;<\/code> element, we would see our custom properties there:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"767\" height=\"214\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/styles-global.png?resize=767%2C214&#038;ssl=1\" alt=\"DevTools window showing CSS custom variables on the body element.\" class=\"wp-image-376792\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/styles-global.png?w=767&amp;ssl=1 767w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/styles-global.png?resize=300%2C84&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Notice how the custom property names are formatted:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--wp-preset--&lt;feature>--&lt;slug>: &lt;value><\/code><\/pre>\n\n\n\n<p>So, going back to our original example where we defined black in a color palette:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\"color\": {\n  \"palette\": [\n    {\n      \"color\": \"#000000\",\n      \"name\": \"Base\",\n      \"slug\": \"Base\"\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n<p>We can expect to find this custom property applied to the <code>&lt;body&gt;<\/code> element:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  --wp--preset--color--base: #000000;\n}<\/code><\/pre>\n\n\n\n<p>All we\u2019ve looked at are <code>settings.color<\/code> presets, but nearly every value we define in the <code>settings<\/code> section results in a custom property:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"spacing\": {\n      \"spacingSizes\": [\n        {\n          \/\/ Creates: --wp-preset--spacing--40: 1rem\n          \"slug\": \"40\",\n          \"size\": \"1rem\",\n          \"name\": \"Small\"\n        },\n        \/\/ etc.\n      ]\n    }\n  }\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"global-presets\">Global presets<\/h4>\n\n\n<p>Now that we know how to define preset values in <code>theme.json<\/code>, you might want to know what presets are available. The following table outlines what is currently available as of this writing and what they produce.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Setting<\/th><th>Feature<\/th><th>CSS custom property<\/th><th>CSS class<\/th><\/tr><\/thead><tbody><tr><td><code>color<\/code><\/td><td><code>duotone<\/code><\/td><td>N\/A<\/td><td>N\/A<\/td><\/tr><tr><td><\/td><td><code>gradients<\/code><\/td><td><code>--wp-preset--gradient--&lt;preset-slug&gt;<\/code><\/td><td><code>.has-&lt;preset-slug&gt;-&lt;preset-category&gt;<\/code><\/td><\/tr><tr><td><\/td><td><code>palette<\/code><\/td><td><code>--wp--preset--palette--&lt;preset-slug&gt;<\/code><\/td><td>Three classes per value:<br><br><code>.has-&lt;preset-value&gt;-color<\/code><br><br><code>.has-&lt;preset-value&gt;-background-color<\/code><br><br><code>.has-&lt;preset-value&gt;-border-color<\/code><\/td><\/tr><tr><td><code>spacing<\/code><\/td><td><code>spacingScal<\/code>e<\/td><td>N\/A<\/td><td>N\/A<\/td><\/tr><tr><td><\/td><td><code>spacingSizes<\/code><\/td><td><code>--wp--preset--spacing--&lt;preset-slug&gt;<\/code><\/td><td><code>.has-&lt;preset-slug&gt;-spacing<\/code><\/td><\/tr><tr><td><code>typography<\/code><\/td><td><code>fontSizes<\/code><\/td><td><code>--wp--preset--font-size--&lt;preset-slug&gt;<\/code><\/td><td><code>.has-&lt;preset-slug&gt;-font-size<\/code><\/td><\/tr><tr><td><\/td><td><code>fontFamilies<\/code><\/td><td><code>--wp--preset--font-family--&lt;preset-slug&gt;<\/code><\/td><td><code>.has-&lt;preset-slug&gt;-font-family<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"block-presets\">Block presets<\/h4>\n\n\n<p>We can get more granular when defining preset values in <code>theme.json<\/code>. In addition to the global presets we just saw, we can define presents at the block level.<\/p>\n\n\n\n<p>Let\u2019s say we have the following global color presets:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \/\/ --wp-preset--color--base: #ffffff\n          \"color\": \"#FFFFFF\",\n          \"name\": \"Base\",\n          \"slug\": \"base\"\n        },\n        {\n          \/\/ --wp-preset--color--contrast: #000000\n          \"color\": \"#000000\",\n          \"name\": \"Contrast\",\n          \"slug\": \"contrast\"\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>The custom properties generated by those settings are used throughout the theme, including blocks. So, if we were to add a <a href=\"https:\/\/wordpress.org\/support\/article\/separator-block\/\" rel=\"noopener\">Separator block<\/a> to a page in the Block Editor, it will refer to the same color palette when it renders.<\/p>\n\n\n\n<p>But we can override that palette \u2014 or any of the others in the global <code>settings<\/code> \u2014 with a palette specifically for the Separator block:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [ \/\/ etc. ]\n    },\n    \"blocks\": {\n      \"separator\": {\n        \"color\": {\n          \"palette\": [\n            {\n              \"color\": \"#F8A100\",\n              \"name\": \"Orange\",\n              \"slug\": \"orange\"\n            }\n          ]\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>In this example, the Separator block\u2019s palette overrides the global palette with a single orange (<code>#F8A100<\/code>) color value.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"custom-presets\">Custom presets<\/h4>\n\n\n<p>You can also create \u201ccustom\u201d CSS custom properties on any property. In addition to the <code>settings<\/code> features we\u2019ve looked at so far, there is a <code>custom<\/code> property where we can do that.<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"custom\": {\n      \/\/ etc.\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>The Style Engine takes anything we define in there and generates CSS custom properties from it. The naming convention is pretty similar to the custom properties generated by the other settings:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--wp--custom--&lt;variable-name>: &lt;value><\/code><\/pre>\n\n\n\n<p>Your defined values in <code>custom<\/code> will be transformed into CSS custom properties and use the <code>--wp--custom--&lt;variable-name&gt;<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#custom\" rel=\"noopener\">naming convention<\/a>.<\/p>\n\n\n\n<p>Here\u2019s an abbreviated example of custom settings pulled straight from the default Twenty Twenty-Two theme. In it are custom settings for <code>typography.font-size<\/code> and <code>typography.line-height<\/code>:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2,\n  \"settings\": {\n    \"custom\": {\n      \"typography\": {\n        \"font-size\": {\n          \"huge\": \"clamp(2.25rem, 4vw, 2.75rem)\",\n          \"gigantic\": \"clamp(2.75rem, 6vw, 3.25rem)\",\n          \"colossal\": \"clamp(3.25rem, 8vw, 6.25rem)\"\n        },\n        \"line-height\": {\n          \"tiny\": 1.15,\n          \"small\": 1.2,\n          \"medium\": 1.4,\n          \"normal\": 1.6\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>We learned a great deal about the <code>settings<\/code> section of the <code>theme.json<\/code> file. We covered the available settings and how they are used to define global styles that are used in the Global Styles UI of the WordPress Site Editor. From there, we learned about preset values, including which ones we can configure and how they are generated into CSS custom properties by the Style Engine.<\/p>\n\n\n\n<p>What we haven\u2019t covered is how we can use <code>theme.json<\/code> to define CSS styles in a block theme. That happens in another top-level section called <code>styles<\/code>, which is the focus of the next part of this series.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-ad1a3c1b\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"simpletoc-hidden wp-block-heading\" id=\"wordpress-block-theme-css-and-style-settings-guide\">WordPress Block Theme CSS and Style Settings Guide<\/h4>\n\n\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/\">Introduction<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/\">Glossary of Terms for <code>theme.json<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-settings\/\">Defining Global Settings<\/a> <em>(you are here!)<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-styles-in-wordpress\/\">Defining Global Styles<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/how-the-style-engine-generates-classes\/\">How the Styles Engine Generates Classes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/\">Global Styles Reference Tables<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s take what we learned about the theme.json structure in WordPress block themes and apply it to two main sections of the file: settings and styles. These arrays are the \u201ctop level\u201d for configuring WordPress features and the theme\u2019s CSS output.<\/p>\n","protected":false},"author":275938,"featured_media":377047,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"guide-special.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[264,14583,19028],"acf":[],"jetpack-related-posts":[{"id":376818,"url":"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/","url_meta":{"origin":376820,"position":0},"title":"Glossary of Terms for theme.json","date":"January 31, 2023","format":false,"excerpt":"To kick things off, let\u2019s begin by reviewing a few glossary terms that are important for understanding what the theme.json file is, how it is structured, and how to configure it. We\u2019ll cover examples as we go, but the main goal here is to get familiar with terms that we\u2019ll\u2026","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376996,"url":"https:\/\/css-tricks.com\/how-the-style-engine-generates-classes\/","url_meta":{"origin":376820,"position":1},"title":"How the Style Engine Generates Classes","date":"February 27, 2023","format":false,"excerpt":"The WordPress Style Engine generates the CSS for a block theme. Why would you want to know how an invisible process like that works? Well, just like writing CSS, you will want to ensure your code is organized and structured so that your styles properly use the CSS Cascade.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376823,"url":"https:\/\/css-tricks.com\/defining-global-styles-in-wordpress\/","url_meta":{"origin":376820,"position":2},"title":"Defining Global Styles","date":"January 31, 2023","format":false,"excerpt":"Let\u2019s move to the other top-level section of theme.json where we can configure the CSS of a block theme: styles. We\u2019ll learn what it is exactly and how we can use it to override and apply the preset settings values we covered in Part 2.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":376820,"position":3},"title":"WordPress Global Styles Reference Tables","date":"January 31, 2023","format":false,"excerpt":"We\u2019ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376813,"url":"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/","url_meta":{"origin":376820,"position":4},"title":"WordPress Block Themes CSS and Style Settings Guide","date":"January 31, 2023","format":false,"excerpt":"Managing CSS in WordPress has dramatically changed since full-site editing features were introduced to block themes. This guide is geared toward block themes and how to configure them, from enabling editor features and controls to defining theme-wide CSS and customizaing the appearance of specific blocks.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":248860,"url":"https:\/\/css-tricks.com\/video-screencasts\/151-first-minutes-sublime-text\/","url_meta":{"origin":376820,"position":5},"title":"#151: The First Few Minutes with Sublime Text","date":"December 12, 2016","format":false,"excerpt":"Sublime Text is a pretty darn popular code editor. Despite its popularity and all the good things I've heard about it, I still lean heavily on other editors (Coda being my go-to for most projects) and have never given Sublime Text the time of day. Call it sheer laziness or\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376820"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/275938"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376820"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376820\/revisions"}],"predecessor-version":[{"id":377419,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376820\/revisions\/377419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377047"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376820"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}