Cómo el motor de estilo genera clases | trucos CSS
En el último artículo de esta serie, revisamos theme.json
preajustes y configuraciones de la sección de estilo. Luego discutimos cómo Motor de estilo de WordPress procesa JSON en CSS y lo consolida con datos consolidados obtenidos de varias fuentes (estilos de WordPress Core, estilos de temas y estilos personalizados) para crear una hoja de estilo global. También aprendimos cómo aplicar el CSS generado a elementos individuales, como encabezados y bloques específicos como Query Loop.
Guía de configuración de estilo de tema de bloque de CSS y WordPress
El motor de estilo es responsable de estructurar y organizar su CSS en una sola hoja de estilo global y comprender cómo analiza su theme.json
Los archivos y estilos provenientes de otras fuentes son muy importantes. De lo contrario, es posible que se encuentre en una situación en la que no esté seguro de por qué uno de sus estilos no funciona. De esa manera, tendrá una idea de dónde cavar y solucionar problemas sin estar en la oscuridad.
Discuto el motor de estilo de WordPress en otro artículo. Este es un excelente lugar para comenzar si está buscando un poco más de contexto sin todos los detalles esenciales que cubrimos aquí.
Contenido
De dónde vienen los estilos
El Style Engine tiene que obtener su información de alguna parte, ¿verdad? Lo cierto es que hay varios lugares donde Style Engine busca información antes de generar CSS.
- Núcleo de WordPress: Así es, WordPress viene con estilos predefinidos desde el primer momento. Piense en ellos como estilos predeterminados creados en el nivel de CMS, algo así como los estilos predeterminados en los navegadores. Están ahí por defecto, pero podemos reemplazarlos en el nuestro.
theme.json
archivo. - El
theme.json
archivo: Hemos cubierto este archivo en detalle a lo largo de la serie. Aquí es donde habilitamos ciertas funciones de estilo y definimos estilos predeterminados, como colores, fuentes y espaciado. Puedes verlo comostyle.css
archivo en un tema de WordPress “clásico”: los estilos que creamos a nivel de tema. - Estilos personalizados: WordPress tiene una serie de características que le permiten configurar estilos directamente en WordPress sin tocar el código. El "grande" de los cuales es el panel Estilos globales en el editor del sitio. Utiliza los estilos de WordPress Core y
theme.json
como la configuración predeterminada, pero cambiar la configuración de estilo anula las otras dos fuentes.
¿Puedes ver cómo esto forma una jerarquía? Los estilos básicos de WordPress pueden ser anulados por theme.json
ambos theme.json
y los estilos de WordPress Core pueden anularse con estilos personalizados. ¡Está estructurado de forma muy parecida a CSS Cascade!
Combinando fuentes
Solo para darle una buena idea de con qué estamos trabajando, aquí hay una captura de pantalla del Editor del sitio de WordPress con la configuración de Estilos globales en pantalla.
Esta es la interfaz donde estilos de usuario viene de. Observe cómo en la parte superior del panel hay un mosaico que proporciona una vista previa de la tipografía y los colores actuales del tema. Este mosaico se llama variación estilísticaque son básicamente configuraciones de estilo preestablecidas que se definen en JSON en la carpeta del tema. Un tema puede tener cualquier cantidad de variaciones de estilo predefinidas y, al seleccionar una, se intercambian instantáneamente las fuentes y los colores del tema con el mosaico seleccionado.
Así que ahora puede ver cómo los estilos personalizados son informados por theme.json
Pero observe las tres categorías de configuración de estilo en variaciones de estilo: Tipografía, Coloresy DiseñoAl hacer clic en cualquiera de estas configuraciones, usted, como usuario, puede anular la configuración de la variante de estilo actualmente seleccionada.
Ahora ves cómo theme.json
y los estilos de WordPress Core se reemplazan por estilos personalizados. Podemos confiar en los estilos de WordPress Core para el diseño y el estilo básicos, personalizarlos y definir nuestros propios estilos en theme.json
luego permita que el usuario tome más control sobre las cosas con estilos personalizados desde la configuración de estilo global del editor del sitio.
Todos estos datos de estilo se almacenan y analizan como JSON. El motor de estilo genera este JSON y luego lo consolida en una hoja de estilo global sobre el tema
Procesando theme.json
Durante la fase de consolidación, Style Engine considera theme.json
archivo ubicado en el directorio del tema. Anteriormente hablamos de la estructura de theme.json
y cómo se organiza en dos secciones de "nivel superior", settings
y styles
.
{
"version": 2,
// Top-level settings
"settings": {},
"styles": {
// Global element styles
"elements": {},
// Block styles
"blocks": {}
}
}
Style Engine maneja estas secciones de la siguiente manera. Primero, el nivel más alto. settings
genera variables CSS que se aplican a <body>
elemento (por ejemplo --wp--preset--<category>-<slug>
):
{
"version": 2,
"settings": {
// Top-level settings
"color": {
"palette": [
{
"color": "#F8A100",
"name": "Primary",
"slug": "primary"
}
]
}
},
"styles": {
// Global element styles
"elements": {},
// Block styles
"blocks": {}
}
}
En este ejemplo obtenemos una nueva variable CSS, --wp-preset--color--primary
Luego, Style Engine lo aplica a nuevas clases CSS con un .has-
prefijo:
body {
--wp--preset--color--primary: #F8A100;
}
.has-primary-color {
color: var(--wp--preset--color--primary) !important;
}
.has-primary-background-color {
background-color: var(--wp--preset--color--primary) !important;
}
.has-primary-border-color {
border-color: var(--wp--preset--color--primary) !important;
}
Genial, ¿verdad? ¡Estas clases ahora se pueden usar en cualquier parte del tema!
Entonces, styles.elements
el objeto genera selectores de elementos coincidentes del elemento HTML que representan (p. ej. styles.elements.h2
corresponde a <h2>
elemento).
{
"version": 2,
"settings": {},
"styles": {
// Global element styles
"elements": {
"h2": {
"color": {
"text": "#F8A100"
}
}
},
// Block styles
"blocks": {}
}
}
En este ejemplo, un h2
el selector se genera con un #F8A100
valor de color:
h2 {
color: #F8A100;
}
Y, bueno, podríamos usar la variable CSS que definimos anteriormente settings
Como valor de color, sabiendo que Style Engine lo generará:
{
"version": 2,
"settings": {},
"styles": {
// Global element styles
"elements": {
"h2": {
"color": {
"text": "var(--wp--preset--color--primary)"
}
}
},
// Block styles
"blocks": {}
}
}
... lo que nos da esto en CSS:
h2 {
color: var(--wp--preset--color--primary);
}
Y finalmente, settings.blocks
object usa la concatenación de los selectores de bloque y elemento, de esta manera, la especificidad de estos selectores es mayor, dándoles más prioridad sobre los otros estilos generados que hemos visto hasta ahora.
Por ejemplo, cambiemos el color del bloque de título del sitio:
{
"version": 2,
"settings": {},
"styles": {
// Global element styles
"elements": {},
// Block styles
"blocks": {
"blocks": {
"core/site-title": {
"color": {
"palette": [
{
"color": "#F8A100",
"name": "SF Orange",
"slug": "sf-orange"
}
]
}
}
}
}
}
}
Así es como funciona en CSS. Style Engine genera una clase para el bloque de título del sitio (.wp-block-site-title
) y para el color como combinador sucesor selector:
.wp-block-site-title .has-sf-orange-color {
color: var(--wp--preset--color--sf-orange) !important;
}
.wp-block-site-title .has-sf-orange-background-color {
background-color: var(--wp--preset--color--sf-orange) !important;
}
.wp-block-site-title .has-sf-orange-border-color {
border-color: var(--wp--preset--color--sf-orange) !important;
}
Clases CSS generadas
Así que ahora tenemos una idea bastante buena de cómo el motor de estilo de WordPress procesa los datos que recibe de varias fuentes en el CSS de un tema de bloque.
También deberíamos ver cómo la configuración y los estilos de theme.json
producir variables y clases CSS. Lo que probablemente le interese ahora es qué otras clases de CSS obtenemos del Style Engine. Profundicemos en ellos.
Clases de bloques
Un "Bloque" en WordPress es un componente independiente que se puede colocar en cualquier página o publicación. Cada bloque obtiene una clase CSS que se usa como contenedor principal del bloque.
Y todos los nombres de clase tienen un wp-block
Por ejemplo, el bloque Cover obtiene un .wp-block-cover
clase que podemos usar para seleccionar y diseñar todo el bloque. WordPress los llama clases semánticas porque identifican el bloque en el nombre.
Los bloques obtienen otra clase además de su clase semántica llamada su clase con estadoEstas clases describen el estado del bloque como si "tuviera" un color de texto en particular o "fuera" un color de fondo o tipo de diseño en particular.
Por ejemplo, digamos que agregamos un bloque de título de publicación a una de nuestras plantillas de tema en el editor del sitio, pero luego lo cambiamos para que tenga un color de fondo, el color "SF Orange" que definimos en un ejemplo anterior.
Esto conduce a una condición clase de elemento. Aquí está el HTML:
<h1 class="wp-block-post-title has-background has-sf-orange-background-color">
<a href="https://css-tricks.com/how-the-style-engine-generates-classes/#" target="_self">Hello world!</a>
</h1>
¿Ves las dos clases de CSS con estado que esto hizo?
.has-background
: Esto agrega relleno al elemento para que el título de la publicación no golpee los bordes del contenedor, lo que permite que se muestre más fondo..has-sf-orange-background-color
: Esto aplica la variable CSS para el color.
Aquí hay una tabla de bloques de WordPress seleccionados y ejemplos de los tipos de clases que se generan y aplican a ellos.
bloquear | clase semántica | clase de estado |
---|---|---|
Botones | .wp-block-buttons |
.has-custom-width |
Encubrir | .wp-block-cover |
.is-light.has-parallax .has-position-vertical |
columnas | .wp-block-columns |
.has-2-columns .has-background |
Título | .wp-block-heading |
.has-text-color |
Galería | .wp-block-gallery |
.has-nested-images |
imagen | .wp-block-image |
.alignleft .aligncenter .alignright .has-custom-border |
espaciador | .wp-block-spacer |
.is-style-dots .has-text-color |
cita | .wp-block-quote |
.is-layout-constrained |
Una vez más, esta no es una tabla de bloques exhaustiva. Sin embargo, puede encontrar una lista completa de Guía del editor de bloques de WordPressSi existe una lista completa de clases con estado en alguna parte, no pude encontrarla. Entonces, si bien los ejemplos de clases con estado en la tabla son precisos según mis pruebas, tampoco debe considerarse una lista completa de clases.
Clases de diseño
WordPress proporciona diferentes diseño tipos que se pueden aplicar a los bloques basados en contenedores. Con esto nos referimos a los siguientes bloques:
- columnas
- Grupo
- Publicar contenido
- Ciclo de solicitud
A cada uno de estos bloques se le puede asignar un tipo de diseño y tiene tres opciones:
- Diseño de transmisión: Agrega espacio vertical entre bloques anidados en
margin-block
Estos bloques anidados también se pueden alinear a la izquierda, a la derecha o al centro. - Diseño limitado: El mismo trato exacto que el diseño de flujo, pero con límites de ancho de bloque anidados que se basan en
contentWidth
ywideWidth
configuración (o entheme.json
o estilos globales). - Diseño flexible: Esto no se modificó en WordPress 6.1. Utiliza CSS Flexbox para crear un diseño que fluye horizontalmente (en una fila) de forma predeterminada, pero también puede fluir verticalmente para que los bloques se apilen uno encima del otro. El espaciado se aplica usando CSS
gap
Propiedad.
Dependiendo de la configuración seleccionada, esto corresponde a las siguientes clases de CSS:
.is-layout-flow
.is-layout-constrained
.is-layout-flex
¿Ves cómo la convención de nomenclatura de estado persistente se traslada a estos? Sin embargo, estas no son las únicas clases relacionadas con el diseño. Aquí están todas las clases disponibles como se documenta en Guía del editor de bloques de WordPress:
justin tadlock hay un gran articulo que explica estos tipos de diseño y clases semánticas con casos de uso y ejemplos. También puede consultar mi artículo "Uso del nuevo diseño restringido en los temas de bloque de WordPress" para obtener aún más información sobre el uso de diferentes diseños.
Fuentes adicionales de estilos de usuario
Ahora sabemos que podemos usar la configuración de estilo global en el editor del sitio para anular los estilos CSS que provienen de WordPress Core y theme.json
Llamamos a estos estilos de usuario.
Pero ese no es el único lugar del que pueden provenir los estilos personalizados. Por ejemplo, supongamos que está escribiendo una nueva publicación y desea diseñar un párrafo en particular de cierta manera. Y digamos que tienes una clase CSS que theme.json
¡o tal vez incluso su propia hoja de estilo! Siempre que el CSS para estas clases esté cargado en la página, puede agregarlas a cualquier bloque en la configuración avanzada del bloque.
este Agregue clases CSS adicionales a los bloques guía lo guía a través del uso de clases de CSS personalizadas en su sitio.
Hay otro lugar donde pueden ir los estilos personalizados. Gutemberg 14.8una nueva costumbre Cuadro "CSS adicional". se ha agregado a la configuración de estilos globales.
Y, bueno, un gran aviso: CSS de estas fuentes de estilo personalizadas puede anular o incluso eliminar la configuración de CSS en theme.json
. Otra cosa importante a tener en cuenta es que cualquier estilo que defina aquí puede perderse al cambiar de tema. Probablemente sea mejor crear estos estilos en el theme.json
o insertando su propia hoja de estilo.
Bloquear hojas de estilo
Hay un lugar más donde el motor de estilo de WordPress puede obtener algunos datos de estilo, ¡y eso es de sus propias hojas de estilo! Así es: puede agregar sus propias hojas de estilo a un tema.
Por supuesto, también puedes usar los necesarios. style.css
archivo como su hoja de estilo. La mayoría de los temas de bloque no lo usarán de todos modos. Pero hay una manera aún más eficiente de hacerlo: poner en cola hojas de estilo para bloques específicos.
En primer lugar, es posible que ya esté familiarizado con el concepto de haciendo cola archivos de trabajar con temas clásicos de WordPress y wp_enqueue_style()
funciónEsto carga un archivo CSS proporcionando una ruta donde WordPress puede encontrarlo.
Podemos hacer lo mismo pero bloque por bloque. Cada bloque de WordPress tiene su propia hoja de estilo asociada y podemos establecer nuestras propias hojas de estilo para ellos. Por ejemplo, aquí agrego una hoja de estilo con estilos personalizados para Bloque de cotización en mi hilo functions.php
archivo:
add_action( 'init', 'emptytheme_enqueue_block_styles' );
function emptytheme_enqueue_block_styles() {
wp_enqueue_block_style( 'core/quote', array(
'handle' => 'emptytheme-block-quote',
'src' => get_theme_file_uri( "assets/blocks/quote.css" ),
'path' => get_theme_file_path( "assets/blocks/quote.css" )
) );
}
Mire esto: es prácticamente la misma forma en que cargaríamos hojas de estilo personalizadas en un tema clásico de WordPress, PHP y todo.
Si desea agregar estilos a varios bloques, debe poner en cola los archivos CSS usando una matriz y luego iterarlos. El blog de desarrolladores de WordPress tiene uno agradable ejemplo escrito por Justin Tadlock:
add_action( 'init', 'themeslug_enqueue_block_styles' );
function themeslug_enqueue_block_styles() {
// Add the block name (with namespace) for each style.
$blocks = array(
'core/button'
'core/heading',
'core/paragraph'
);
// Loop through each block and enqueue its styles.
foreach ( $blocks as $block ) {
// Replace slash with hyphen for filename.
$slug = str_replace( "https://css-tricks.com/", '-', $block );
wp_enqueue_block_style( $block, array(
'handle' => "themeslug-block-{$slug}",
'src' => get_theme_file_uri( "assets/blocks/{$slug}.css" ),
'path' => get_theme_file_path( "assets/blocks/{$slug}.css" )
) );
}
}
¡Todo esto está en desarrollo activo!
Tenga en cuenta que WordPress Style Engine todavía es bastante nuevo y un trabajo en progreso Documento de motor de estilo enumera algunos de los próximos trabajos planificados:
- Consolidar procesamiento y colas globales y de bloques (actual)
- Considere el manejo de reglas CSS de representación previa con la intención de duplicar otros estilos de bloques comunes y/o repetidos. (ahora)
- Amplíe el alcance de los nombres de clase semántica y/o diseñe expresiones de token y encapsule reglas en clases de utilidad sólidas.
- Ofrezca una forma de controlar la jerarquía y la especificidad, y haga que la jerarquía de estilos sea accesible y predecible. Esto puede incluir la preparación para las capas en cascada de CSS hasta que sean más compatibles y habilitar el soporte para la inclusión en Gutenberg a través de
theme.json
. - Vuelva a trabajar en todos los bloques para usar consistentemente el atributo 'estilo' para todas las personalizaciones, es decir, para anular atributos preestablecidos específicos como
attributes.fontSize
.
Puede realizar un seguimiento del estado de desarrollo. a bordo del proyecto GitHub.
Incluso con estas limitaciones, este tuit de Rich Tabor y el siguiente video demuestra las posibilidades ilimitadas que tenemos para personalizar la apariencia de un tema de bloque, ¡sin siquiera tocar el código!
⚠️ Contiene medios de reproducción automática
Todo es posible gracias a WordPress Style Engine y sus superpoderes de análisis JSON.
Recursos adicionales
¡Cubrimos mucho en este artículo! Pensé en compartir algunos de los recursos en los que confié para obtener la información.
Documentación
Lecciones
Problemas de GitHub
Gran parte del contexto de este artículo proviene de sugerencias y problemas informados en el repositorio de WordPress GitHub.
Próximo…
¡Ya hemos terminado! Pero he creado una página que reúne todo lo que hemos aprendido sobre CSS en temas de bloque de WordPress y le brinda un lugar para consultar cuando lo necesite.
Deja una respuesta