CSS-TricksSVG Snippets Feed | CSS-Tricks https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Fri, 05 Apr 2024 22:21:03 +0000 hourly 1 https://wordpress.org/?v=6.5.2 https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1 SVG Snippets Feed | CSS-Tricks https://css-tricks.com 32 32 45537868 How the Style Engine Generates Classes https://css-tricks.com/how-the-style-engine-generates-classes/ https://css-tricks.com/how-the-style-engine-generates-classes/#respond Mon, 27 Feb 2023 14:46:43 +0000 Ganesh Dahal https://css-tricks.com/?page_id=376996 In the last article in this series, we went through theme.json presets and style section configurations. Then we discussed how the WordPress Style Engine processes the JSON into CSS and consolidates it with consolidated data received from different sources — WordPress Core styles, theme styles, and user styles — to create a global stylesheet. We also learned how to apply the generated CSS to individual elements, like headings, and specific blocks, like the Query Loop.

(more…)]]>
https://css-tricks.com/how-the-style-engine-generates-classes/feed/ 0 376996
WordPress Global Styles Reference Tables https://css-tricks.com/wordpress-global-styles-reference-tables/ https://css-tricks.com/wordpress-global-styles-reference-tables/#respond Tue, 31 Jan 2023 17:41:00 +0000 Ganesh Dahal https://css-tricks.com/?page_id=376849 The following information is based on the WordPress documentation for ease of reference only. At the time of writing, Global Styles (theme.json) and user interface customizations are being actively developed. And, of course, all of this is still very much in active development. If you notice something has changed or is incorrect, please let me know in the comments!

(more…)]]>
https://css-tricks.com/wordpress-global-styles-reference-tables/feed/ 0 376849
Defining Global Styles https://css-tricks.com/defining-global-styles-in-wordpress/ https://css-tricks.com/defining-global-styles-in-wordpress/#respond Tue, 31 Jan 2023 16:16:18 +0000 Ganesh Dahal https://css-tricks.com/?page_id=376823 In Part 2 of this series, we covered the process of enabling certain features in a WordPress block theme in the theme.json file. We spent time in the settings section of the file, outlining the various available features and how they allow us to customize the Global Styles UI in the WordPress Site Editor with preset values that map to CSS custom property values that are scoped to the <body> element.

(more…)]]>
https://css-tricks.com/defining-global-styles-in-wordpress/feed/ 0 376823
Defining Global Settings https://css-tricks.com/defining-global-settings/ https://css-tricks.com/defining-global-settings/#respond Tue, 31 Jan 2023 15:52:01 +0000 Ganesh Dahal https://css-tricks.com/?page_id=376820 So far, we’ve spent time getting familiar with theme.json, the foundation for all WordPress block themes. We covered the various JSON data types and common terminology related to working with the JSON syntax.

We are going to build on that knowledge in this article.

(more…)]]>
https://css-tricks.com/defining-global-settings/feed/ 0 376820
Glossary of Terms for theme.json https://css-tricks.com/glossary-of-terms-for-theme-json/ https://css-tricks.com/glossary-of-terms-for-theme-json/#respond Tue, 31 Jan 2023 15:45:02 +0000 Ganesh Dahal https://css-tricks.com/?page_id=376818

Common JSON terms

We’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.

JSON

JSON refers to JavaScript Object Notation, 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.

Object

Objects are key-value pairs separated by colons : and contained inside curly brackets ({}). You can think of it like CSS in a way. We have a property (or key) followed by a value that defines the property:

color: #9DFF20;

In JSON, that is represented as an object like this:

{ "color": "#9DFF20" }

Note: A JSON object property is also called a field or key. A key-value pair is also called an item or data.

And like a CSS ruleset can contain many key-value pairs, so can a JSON object. This example is an object with three keys — color, name, and slug — each with a corresponding value:

{ "color": "#9DFF20", "name": "Primary", "slug": "primary" }

Contrary to CSS, JSON is not a “forgiving” language, and even one typing error can break the entire website.

Nested object

Objects in JSON can contain other objects. We call these nested objects, and it’s what makes JSON a structured language.

{
  "object1": {
    "object1a": "value",
    "object1b": "value"
  },
  "object2" : {
    "object2a": "value",
    "object2b": "value"
  }
}

Let’s take an example straight from the emptytheme theme.json file:

Array

An array is a comma-separated group of objects in square brackets ([]). 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’s color palette. An array allows us to define a group of colors for that palette:

JSON data types

JSON values must be one of the six data types: a string, a number, an object, an array, a boolean (true or false), and null. JSON data are assessed using dot . notation.

Here is an abbreviated modified TT3 theme.json object file showing all the data types:

{
  "version": 2, // 1: Number (no quotes)
  "settings": {
    "appearanceTools": true, // 2: Boolean (true or false, no quotes)
    "useRootPaddingAwareAlignments": false,
    "color": {
      "palette": [ // 3: Array of string object palette
        { 
          "color": "#ffffff", // 4: Object (in curly brackets)
          "name": "Base",
          "slug": "base"
        }
      ]
    },
    "layout": { "contentSize": "650px"}, // 5: String (in double quotes)
    "styles": {
      "typography": { "lineHeight": "1.6" },
      "spacing": { "blockGap": null } // 6: null (no quotes)
    }
  }
}

Additional resources

Next up…

Now that we have a solid understanding of JSON and how it is structured in the theme.json of WordPress block themes, let’s take a closer look at how global styling works. We can define default styles for a block theme directly in theme.json. We can also use the Global Styles UI in WordPress.

How do those work together? What sort of settings are available? When should you use one over the other? We’ll answer those questions and more next.

]]>
https://css-tricks.com/glossary-of-terms-for-theme-json/feed/ 0 376818