Definir configuración global | trucos CSS

Hasta ahora hemos dedicado tiempo a conocer theme.jsonla base para todos los temas de bloque de WordPress. Hemos cubierto los diferentes tipos de datos JSON y la terminología general involucrada en el trabajo con la sintaxis JSON.

Desarrollaremos este conocimiento en este artículo.

Contenido

---

Lo que entendemos por "nivel superior"

Discutimos cómo JSON tiene una sintaxis estructurada. Podemos ver esto en los esquemas básicos de theme.json archivo:

{
  "version": 2,
  "settings": {},
  "styles": {},
  "customTemplates": {},
  "templateParts": {}
}

Cada objeto en el ciclo principal es el "nivel superior" del archivo. Puede pensar en los objetos como secciones donde se configuran diferentes cosas. Ignorar versionhay cuatro secciones de nivel superior:

• settings: Aquí es donde definimos los ajustes preestablecidos y predeterminados de WordPress; aquí también podemos habilitar o deshabilitar ciertas funciones de WordPress.
• styles: Aquí es donde definimos CSS para estilos de temas globales y de bloque.
• customTemplates: Aquí es donde registramos nuevas plantillas de temas personalizados. Esto es equivalente a lanzar un nuevo archivo de plantilla PHP en un tema clásico.
• templateParts: Esta sección contiene piezas modulares que se pueden incluir en plantillas. Esto es equivalente a parts subcarpeta que suele ver en los temas clásicos.

Pasamos la mayor parte de nuestro tiempo en settings y styles Secciones Ambos proporcionan formas de configurar los estilos globales de un tema de bloque de WordPress, así que echemos un vistazo a cada uno y las diferentes opciones que tenemos para personalizar el aspecto del tema.

La sección de configuración (settings)

Nuevamente, aquí es donde configuramos las características de WordPress, más o menos add_theme_support función irías por un tema clásico functions.php archivo.

{
  "version": 2,
  "settings": {
    // etc.
  }
}

¿Por qué es esto relevante para los estilos globales de un tema? Varias funciones de WordPress afectan el estilo, como los controles de interfaz de usuario para almohadillas, márgenes, colores y fuentes. Sin habilitarlos, no hay forma de aplicar estos y otros estilos en la interfaz de usuario de Estilos globales en el Editor del sitio.

En resumen: lo que estamos definiendo aquí es lo que WordPress usa para agregar soporte de tema para la configuración de estilo global del editor del sitio que se usa en todo el tema.

Funciones admitidas

El Guía del editor de bloques de WordPress proporciona una tabla que describe las funciones disponibles que podemos habilitar en el settings sección y los compara con su equivalente add_theme_support argumentos de la función.

Configuración JSON del tema	add_theme_support
color.custom	custom-colors
color.palette	editor-color-palette
color.gradients	editor-gradient-presets
spacing.padding	custom-spacing
spacing.units	custom-units
typography.lineHeight	custom-line-height
typography.fontSizes	editor-font-sizes
useRootPaddingAwareAlignments	N / A

Por ejemplo, usaste add_theme_support en su tema clásico para deshabilitar los tamaños de fuente personalizados:

<?php
add_theme_support(disable-custom-font-sizes);

El equivalente en theme.json es settings.typography.customFontSize Propiedad:

{
  "version": 2,
  "settings": {
    "typography": {
      "customFontSize": false;
    }
  }
}

Como puedes imaginar, estas funciones tienen funciones anidadas. Por ejemplo, si añadimos soporte para spacing controles, hay una serie spacing-Funciones relacionadas que podemos activar individualmente:

{
  "version": 2,
  "settings": {
    "spacing": {
      "margin": false,
      "padding": false,
      "blockGap": null,
      "units": [ "px", "em", "rem", "vh", "vw" ]
    },
  }
}

A partir de WordPress 6.1 estos son settings características que se pueden configurar en theme.json:

Ver la tabla completa

Ajustes	Característica	Tipo de datos
border	radius	valor booleano
	color	valor booleano
	style	valor booleano
	width	valor booleano
color	custom	valor booleano
	customDuotone	valor booleano
	customGradient	valor booleano
	duotone	Formación
	gradients	Formación
	link	valor booleano
	palette	Formación
	text	valor booleano
	background	valor booleano
	defaultGradients	valor booleano
	defaultPalette	valor booleano
layout	contentSize	una cuerda
	wideSize	una cuerda
	type	cadena (default y constrained)
spacing	margin	valor booleano
	padding	valor booleano
	blockGap	una cuerda
	units	Formación
typography	customFontSize	valor booleano
	lineHeight	valor booleano
	dropCap	valor booleano
	fontStyle	valor booleano
	fuentePeso	valor booleano
	letterSpacing	valor booleano
	textDecoration	valor booleano
	textTransform	valor booleano
	fontSizes	Formación
	fontFamilies	Formación

Hay debates actuales agregar outline y border propiedades al panel Estilos globales. Se incluyen en esta tabla antes de su adopción oficial.

El appearanceTools taquigrafía

Sé que la tabla muestra muchas funciones. Configurar cada ajuste puede volverse engorroso. Aquí es donde appearanceTools el ajuste surte efecto.

{
  "version": 2,
  "settings": {
    "appearanceTools": true
  }
}

Configuración de la true permite las siguientes configuraciones de una sola vez:

{
  "version": 2,
  "settings": {
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    },
    "color": {
      "link": true
    }
    "spacing": {
      "margin": true,
      "padding": true,
      "blockGap": true,
    },
    "typography": {
      "lineHeight": true
    }
  }
}

¡Puedes ver cuántas líneas de código podemos ahorrar de esta manera! Pero digamos que quieres aprovechar appearanceToolspero deshabilite una o dos de sus funciones compatibles. Puede hacer esto de forma individual para anular esta configuración en particular:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "border": {
      "radius": false
    }
  }
}

La siguiente captura de pantalla muestra cómo la configuración appearanceTools a true muestra estos controles en la interfaz de usuario de los estilos globales tomados del valor predeterminado Tema veintitrés.

este Aprenda videos de WordPress por Nick Diego explica appearanceTools propiedades y la interfaz de estilos globales con gran detalle.

Alineaciones compatibles con revestimientos

Vale la pena llamar a esta función porque se entrega antes que muchas otras funciones como parte de ella. WordPress 6.1.Este es otro atajo para configurar dos spacing Característica.

Así que esto:

{
  "version": 2,
  "settings": {
    "useRootPaddingAwareAlignments": true
  }
}

... es equivalente a:

{
  "version": 2,
  "settings": {
    "spacing": {
      "margin": true,
      "padding": true
    },
  }
}

El verdadero beneficio de useRootPaddingAwareAlignments está en el nombre. Habilitándolo, seleccionamos una función que define un pad global de <body> de nuestro tema y permite que los bloques "salgan" de ese panel y se amplíen por completo si necesitamos que un bloque se extienda de extremo a extremo.

Consulte mi artículo anterior para ver en profundidad las alineaciones con reconocimiento de relleno.

Configurar ajustes preestablecidos

Preajustes son valores predefinidos utilizados por las funciones de Global Styles, específicamente, definen propiedades CSS personalizadas utilizadas en un tema de bloque.

Entonces, digamos que define la paleta de colores predeterminada de su tema de bloque y agrega negro (#000000) a él:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#000000",
          "name": "Base",
          "slug": "base"
        }
      ]
    }
  }
}

Detrás de escena, algo llamado Motor con estilo toma estos valores y genera clases CSS y propiedades de tema personalizadas. Describí Style Engine en un artículo anterior:

Style Engine es una nueva API en WordPress 6.1 que tiene como objetivo brindar coherencia a la forma en que se generan los estilos y dónde se aplican. En otras palabras, utiliza todas las fuentes de estilo posibles y es el único responsable de generar correctamente los estilos de bloque. […] Tener una API centralizada para estilos es probablemente la solución más elegante, dado que los estilos pueden provenir de diferentes lugares.

Cuando Style Engine detecta nuestra stylescrea un conjunto de propiedades personalizadas predefinidas. ¿Te gusta el ejemplo de la paleta de colores de arriba? Crea una propiedad CSS personalizada basada en la información que le damos.

Si tuviéramos que abrir DevTools y verificar <body> elemento, veremos nuestras propiedades personalizadas allí:

Observe cómo se formatean los nombres de las propiedades personalizadas:

--wp-preset--<feature>--<slug>: <value>

Entonces, volviendo a nuestro ejemplo original donde definimos el negro en una paleta de colores:

"color": {
  "palette": [
    {
      "color": "#000000",
      "name": "Base",
      "slug": "Base"
    }
  ]
}

Podemos esperar encontrar esta propiedad personalizada aplicada a la <body> elemento:

body {
  --wp--preset--color--base: #000000;
}

Todo lo que hemos visto son settings.color presets, pero casi cualquier valor que definamos en el settings la sección da como resultado una propiedad personalizada:

{
  "version": 2,
  "settings": {
    "spacing": {
      "spacingSizes": [
        {
          // Creates: --wp-preset--spacing--40: 1rem
          "slug": "40",
          "size": "1rem",
          "name": "Small"
        },
        // etc.
      ]
    }
  }
}

Preajustes globales

Ahora que sabemos cómo definir valores preestablecidos en theme.jsones posible que desee saber qué ajustes preestablecidos están disponibles. La siguiente tabla describe lo que está disponible actualmente en el momento de escribir este artículo y lo que producen.

Ajustes	Característica	Propiedades personalizadas de CSS	clases de css
color	duotone	N / A	N / A
	gradients	--wp-preset--gradient--<preset-slug>	.has-<preset-slug>-<preset-category>
	palette	--wp--preset--palette--<preset-slug>	Tres clases de valor: .has-<preset-value>-color .has-<preset-value>-background-color .has-<preset-value>-border-color
spacing	spacingScalmi	N / A	N / A
	spacingSizes	--wp--preset--spacing--<preset-slug>	.has-<preset-slug>-spacing
typography	fontSizes	--wp--preset--font-size--<preset-slug>	.has-<preset-slug>-font-size
	fontFamilies	--wp--preset--font-family--<preset-slug>	.has-<preset-slug>-font-family

Ajustes preestablecidos de bloque

Podemos ser más detallados cuando definimos presets en el theme.json.Además de los ajustes preestablecidos globales que acabamos de ver, podemos definir presentaciones a nivel de bloque.

Digamos que tenemos los siguientes colores preestablecidos globales:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          // --wp-preset--color--base: #ffffff
          "color": "#FFFFFF",
          "name": "Base",
          "slug": "base"
        },
        {
          // --wp-preset--color--contrast: #000000
          "color": "#000000",
          "name": "Contrast",
          "slug": "contrast"
        }
      ]
    }
  }
}

Las propiedades personalizadas generadas por esta configuración se utilizan en todo el tema, incluidos los bloques. Entonces, si agregamos un Bloque de separación a una página en el editor de bloques, hará referencia a la misma paleta de colores cuando se represente.

Pero podemos anular esta paleta, o cualquiera de las otras en el mundo. settings — con una paleta específica para el tabique:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [ // etc. ]
    },
    "blocks": {
      "separator": {
        "color": {
          "palette": [
            {
              "color": "#F8A100",
              "name": "Orange",
              "slug": "orange"
            }
          ]
        }
      }
    }
  }
}

En este ejemplo, la paleta del bloque divisor reemplaza la paleta global con una sola naranja (#F8A100) valor de color.

Preajustes personalizados

También puede crear propiedades personalizadas CSS "personalizadas" para cada propiedad settings funciones que hemos visto hasta ahora tiene un custom propiedad donde podemos hacer eso.

{
  "version": 2,
  "settings": {
    "custom": {
      // etc.
    }
  }
}

Style Engine toma lo que definamos allí y genera propiedades personalizadas CSS a partir de él. La convención es bastante similar a las propiedades personalizadas generadas por las otras configuraciones:

--wp--custom--<variable-name>: <value>

Tus valores definidos en custom se transformará en propiedades CSS personalizadas y se usará --wp--custom--<variable-name> convenio de denominación.

Aquí hay un ejemplo condensado de configuraciones personalizadas extraídas directamente del tema predeterminado Twenty Twenty-Two. Tiene configuraciones personalizadas para typography.font-size y typography.line-height:

{
  "version": 2,
  "settings": {
    "custom": {
      "typography": {
        "font-size": {
          "huge": "clamp(2.25rem, 4vw, 2.75rem)",
          "gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
          "colossal": "clamp(3.25rem, 8vw, 6.25rem)"
        },
        "line-height": {
          "tiny": 1.15,
          "small": 1.2,
          "medium": 1.4,
          "normal": 1.6
        }
      }
    }
  }
}

resumiendo

Aprendimos mucho sobre settings Sección de theme.json archivo. Observamos las configuraciones disponibles y cómo se usan para definir estilos globales que se usan en la interfaz de usuario de Estilos globales del editor del sitio de WordPress. A partir de ahí, aprendimos sobre los valores preestablecidos, incluidos los que podemos configurar y cómo se generan en las propiedades CSS personalizadas desde Style Engine.

Lo que no hemos cubierto es cómo podemos usar theme.json para definir estilos CSS en un tema de bloque Esto sucede en otra sección de nivel superior llamada stylesque es el enfoque de la siguiente parte de esta serie.