{"id":376818,"date":"2023-01-31T07:45:02","date_gmt":"2023-01-31T15:45:02","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=376818"},"modified":"2023-03-01T06:56:56","modified_gmt":"2023-03-01T14:56:56","slug":"glossary-of-terms-for-theme-json","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/","title":{"rendered":"Glossary of Terms for theme.json"},"content":{"rendered":"\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> <em>(you are here!)<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-settings\/\">Defining Global Settings<\/a><\/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<h3 class=\"wp-block-heading\" id=\"common-json-terms\">Common JSON terms<\/h3>\n\n\n<p>We&#8217;re going to spend a quick moment getting familiar with JSON-related terms before jumping to the next section that outlines the six different types of JSON data types.<\/p>\n\n\n\n<details >\n  <summary>\n          JSON      <\/summary>\n  \n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/JSON\" rel=\"noopener\">JSON<\/a> refers to <em>JavaScript Object Notation<\/em>, a machine-readable data-sharing format. As the name suggests, JSON is derived from JavaScript and applied to many other languages like PHP, Ruby, Python, etc. Many software applications, including React, Gatsby, VS Code, and others, use JSON for settings environments.<\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Object      <\/summary>\n  \n\n<p><em>Objects<\/em> are key-value pairs separated by colons <code>:<\/code> and contained inside curly brackets (<code>{}<\/code>). You can think of it like CSS in a way. We have a property (or key) followed by a value that defines the property:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">color: #9DFF20;<\/code><\/pre>\n\n\n\n<p>In JSON, that is represented as an object like this:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{ \"color\": \"#9DFF20\" }<\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">Note: A JSON <em>object<\/em> property is also called a <strong>field<\/strong> or <strong>key<\/strong>. A <em>key-value<\/em> pair is also called an <strong>item<\/strong> or <strong>data<\/strong>.<\/p>\n\n\n\n<p>And like a CSS ruleset can contain many key-value pairs, so can a JSON object. This example is an object with three keys \u2014 <code>color<\/code>, <code>name<\/code>, and <code>slug<\/code> \u2014 each with a corresponding value:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{ \"color\": \"#9DFF20\", \"name\": \"Primary\", \"slug\": \"primary\" }<\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">Contrary to CSS, JSON is not a &#8220;forgiving&#8221; language, and even one typing error can break the entire website.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"nested-object\">Nested object<\/h4>\n\n\n<p>Objects in JSON can contain other objects. We call these <em>nested objects,<\/em> and it\u2019s what makes JSON a structured language.<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"object1\": {\n    \"object1a\": \"value\",\n    \"object1b\": \"value\"\n  },\n  \"object2\" : {\n    \"object2a\": \"value\",\n    \"object2b\": \"value\"\n  }\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s take an example straight from the <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/blob\/master\/emptytheme\/theme.json\" rel=\"noopener\">emptytheme<\/a> <code>theme.json<\/code> file:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"839\" height=\"300\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/empty-json-labelled.png?resize=839%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-376282\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/empty-json-labelled.png?w=839&amp;ssl=1 839w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/empty-json-labelled.png?resize=300%2C107&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/empty-json-labelled.png?resize=768%2C275&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Array      <\/summary>\n  \n\n<p>An <em>array<\/em> is a comma-separated group of objects in square brackets (<code>[]<\/code>). The idea is that we might need to define more than one object at a time. A good example is defining the colors of a block theme\u2019s color palette. An array allows us to define a group of colors for that palette:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"901\" height=\"566\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/json-array.jpg?resize=901%2C566&#038;ssl=1\" alt=\"\" class=\"wp-image-376283\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/json-array.jpg?w=901&amp;ssl=1 901w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/json-array.jpg?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/json-array.jpg?resize=768%2C482&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<\/details>\n\n<h3 class=\"wp-block-heading\" id=\"json-data-types\">JSON data types<\/h3>\n\n\n<p>JSON values must be one of the six data types: a <strong>string<\/strong>, a <strong>number<\/strong>, an <strong>object<\/strong>, an <strong>array,<\/strong> a <strong>boolean<\/strong> (true or false), and <strong>null<\/strong>. JSON data are assessed using dot <code>.<\/code> notation.<\/p>\n\n\n\n<p>Here is an abbreviated modified TT3 <code>theme.json<\/code> object file showing all the data types:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">{\n  \"version\": 2, \/\/ 1: Number (no quotes)\n  \"settings\": {\n    \"appearanceTools\": true, \/\/ 2: Boolean (true or false, no quotes)\n    \"useRootPaddingAwareAlignments\": false,\n    \"color\": {\n      \"palette\": [ \/\/ 3: Array of string object palette\n        { \n          \"color\": \"#ffffff\", \/\/ 4: Object (in curly brackets)\n          \"name\": \"Base\",\n          \"slug\": \"base\"\n        }\n      ]\n    },\n    \"layout\": { \"contentSize\": \"650px\"}, \/\/ 5: String (in double quotes)\n    \"styles\": {\n      \"typography\": { \"lineHeight\": \"1.6\" },\n      \"spacing\": { \"blockGap\": null } \/\/ 6: null (no quotes)\n    }\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"additional-resources\">Additional resources<\/h3>\n\n\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/styles\/#html-and-css\" rel=\"noopener\">HTML and CSS<\/a> (Block Editor Handbook | Explanations)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.json.org\/json-en.html\" rel=\"noopener\">Introducing JSON<\/a> (<a href=\"http:\/\/JSON.org\" rel=\"noopener\">JSON.org<\/a>)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/an-introduction-to-json\" rel=\"noopener\">An Introduction to JSON<\/a> (DigitalOcean)<\/li>\n\n\n\n<li><a href=\"https:\/\/restfulapi.net\/introduction-to-json\/\" rel=\"noopener\">What is JSON<\/a> (REST API Tutorial)<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"next-up\">Next up&#8230;<\/h3>\n\n\n<p>Now that we have a solid understanding of JSON and how it is structured in the <code>theme.json<\/code> of WordPress block themes, let&#8217;s take a closer look at how global styling works. We can define default styles for a block theme directly in <code>theme.json<\/code>. We can also use the Global Styles UI in WordPress.<\/p>\n\n\n\n<p>How do those work together? What sort of settings are available? When should you use one over the other? We&#8217;ll answer those questions and more next.<\/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> <em>(you are here!)<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/defining-global-settings\/\">Defining Global Settings<\/a><\/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>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 be seeing throughout this series.<\/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":[1279,264,14583,19028],"acf":[],"jetpack-related-posts":[{"id":376813,"url":"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/","url_meta":{"origin":376818,"position":0},"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":376823,"url":"https:\/\/css-tricks.com\/defining-global-styles-in-wordpress\/","url_meta":{"origin":376818,"position":1},"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":376820,"url":"https:\/\/css-tricks.com\/defining-global-settings\/","url_meta":{"origin":376818,"position":2},"title":"Defining Global Settings","date":"January 31, 2023","format":false,"excerpt":"Let'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.","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":376996,"url":"https:\/\/css-tricks.com\/how-the-style-engine-generates-classes\/","url_meta":{"origin":376818,"position":3},"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":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":376818,"position":4},"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":251134,"url":"https:\/\/css-tricks.com\/video-screencasts\/153-getting-started-with-css-grid\/","url_meta":{"origin":376818,"position":5},"title":"#153: Getting Started with CSS Grid","date":"February 20, 2017","format":false,"excerpt":"It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it's becoming something we should learning. I started reading a few posts and playing around with\u2026","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376818"}],"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=376818"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376818\/revisions"}],"predecessor-version":[{"id":377417,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376818\/revisions\/377417"}],"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=376818"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}