Glosario de términos para theme.json | trucos CSS

Guía de configuración de estilo de tema de bloque de CSS y WordPress

Términos comunes de JSON

Dedicaremos un tiempo a familiarizarnos con los términos relacionados con JSON antes de pasar a la siguiente sección, que describe los seis tipos diferentes de tipos de datos JSON.

JSON

JSON Recomendar a notación de objetos de JavaScriptformato legible por máquina para compartir datos. Como sugiere el nombre, JSON se deriva de JavaScript y se aplica a muchos otros lenguajes como PHP, Ruby, Python, etc. Muchas aplicaciones de software, incluidas React, Gatsby, VS Code y otras, usan JSON para entornos de configuración.

objeto

Objetos son pares clave-valor separados por dos puntos : y contenido entre llaves ({}). Puedes pensar en ello como CSS de alguna manera. Tenemos una propiedad (o clave) seguida de un valor que define la propiedad:

color: #9DFF20;

En JSON esto se representa como un objeto como este:

{ "color": "#9DFF20" }

Nota: JSON objeto propiedad también se llama campo o llave.A valor clave un par también se llama un cosa o datos.

Y así como un conjunto de reglas CSS puede contener muchos pares clave-valor, también puede hacerlo un objeto JSON. Este ejemplo es un objeto con tres llaves - color, namey slug — cada uno con el valor correspondiente:

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

A diferencia de CSS, JSON no es un lenguaje "perdonador" e incluso un error tipográfico puede romper todo el sitio web.

Un objeto anidado

Los objetos en JSON pueden contener otros objetos. Nosotros los llamamos objetos anidados, y esto hace que JSON sea un lenguaje estructurado.

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

Tomemos un ejemplo directo de sujeto vacio theme.json archivo:

Formación

Ana formación es un grupo de objetos separados por comas entre corchetes ([]). La idea es que es posible que necesitemos definir más de un objeto a la vez. Un buen ejemplo es definir los colores de la paleta de colores de un tema de bloque. La matriz nos permite definir un grupo de colores para esta paleta:

Tipos de datos JSON

Los valores JSON deben ser uno de los seis tipos de datos: a una cuerdaa númeroun objetoun formación, a booleano (verdadero o falso) y ceroLos datos .JSON se evalúan mediante un punto . notación.

Aquí hay un TT3 modificado corto theme.json archivo de objeto que muestra todos los tipos de datos:

{
  "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)
    }
  }
}

Recursos adicionales

Próximo…

Ahora que tenemos una sólida comprensión de JSON y cómo está estructurado en theme.json de temas de bloque de WordPress, echemos un vistazo más de cerca a cómo funciona el estilo global. Podemos definir estilos predeterminados para el tema del bloque directamente en theme.jsonTambién podemos usar la interfaz de usuario de Global Styles en WordPress.

Como trabajan juntos? ¿Qué tipo de ajustes están disponibles? ¿Cuándo se debe usar uno sobre el otro? Responderemos a estas preguntas y más a continuación.

Guía de configuración de estilo de tema de bloque de CSS y WordPress

Deja una respuesta Cancelar la respuesta