Me encontré con este tuit de Ana Segota buscando una manera de agregar un CSS box-shadow al estado de desplazamiento de un botón en WordPress en el theme.json archivo.
ella pregunta porque theme.json Es donde WordPress quiere que comencemos a mover estilos básicos para temas de bloque. Tradicionalmente, haríamos todos y cada uno de los estilos en style.css cuando se trabaja en un tema “clásico”. Pero con el tema predeterminado Twenty Twenty-Three (TT3) que se envió recientemente con WordPress 6.1, moviendo todos sus estilos a theme.json, cada vez estamos más cerca de poder hacer lo mismo con nuestros propios temas. Cubrí esto con gran detalle en un artículo reciente.
Digo "más y más cerca" porque todavía hay muchas propiedades CSS y selectores que no son compatibles en theme.json. Por ejemplo, si espera diseñar algo con como perspective-origin in theme.json, simplemente no sucederá, al menos mientras escribo esto hoy.
Ana está mirando box-shadow y, afortunadamente para ella, esa propiedad CSS es compatible con theme.json a partir de WordPress 6.1. Su tweet está fechado el 1 de noviembre. el mismo día exacto en que se lanzó 6.1. No es como si el soporte para la propiedad fuera una característica principal en el lanzamiento. Los titulares más importantes estaban más relacionados con las técnicas de espaciado y diseño de bloques y temas de bloques.
Así es como podemos aplicar un box-shadow a un bloque específico, digamos el bloque Imagen destacada, en theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Preguntándose si el nueva sintaxis de color ¿obras? ¡Yo también! Pero cuando lo intenté - rgb(0 0 0 / 0.66) - No tengo nada. Tal vez eso ya esté en proceso o podría usar una solicitud de extracción.
Fácil, ¿verdad? Claro, es muy diferente a escribir Vanilla CSS en style.css y lleva un tiempo acostumbrarse. Pero de hecho es posible a partir de la versión más reciente de WordPress.
Y, bueno, podemos hacer lo mismo con "elementos" individuales, como un botón. Un botón es un bloque en sí mismo, pero también puede ser un bloque anidado dentro de otro bloque. Entonces, para aplicar un box-shadow globalmente a todos los botones, haríamos algo como esto en theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Pero Ana quiere agregar la sombra al botón. :hover estado. Agradecidamente, soporte para diseñar estados interactivos para ciertos elementos, como botones y enlaces, usando pseudoclases, incluyendo :hover, :focus, :activey :visited — también ganó theme.json soporte en WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Si está utilizando un tema principal, ciertamente puede anular los estilos de un tema en un tema secundario. Aquí, estoy anulando por completo los estilos de botones de TT3.
Ver código completo
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--tertiary)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
}Así es como se representa:
Otra forma de hacerlo: estilos personalizados
El recientemente lanzado Pixl El tema del bloque proporciona otro ejemplo del uso en el mundo real del box-shadow propiedad en theme.json utilizando un método alternativo que define valores personalizados. En el tema, una costumbre box-shadow la propiedad se define como .settings.custom.shadow:
{
"version": 2,
"settings": {
// etc.
"custom": {
// etc.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// etc.
}
}Luego, más adelante en el archivo, la costumbre shadow La propiedad se llama en un elemento de botón:
{
"version": 2,
"settings": {
// etc.
},
"styles": {
"elements": {
"button": {
// etc.
"shadow": "var(--wp--custom--shadow) !important",
// etc.
":active": {
// etc.
"shadow": "2px 2px var(--wp--preset--color--primary) !important"
}
},
// etc.
}
}No estoy totalmente seguro sobre el uso de !important en este contexto. Mi corazonada es que es un intento de evitar la anulación de esos estilos mediante la interfaz de usuario de Estilos globales en el Editor del sitio, que tiene una alta especificidad que los estilos definidos en theme.json. Aquí hay un enlace anclado para obtener más información. de mi artículo anterior sobre la gestión de estilos de tema de bloque.
Actualizar: Resulta que hubo toda una discusión sobre esto en Solicitud de extracción n. ° 34689, que señala que se abordó en WordPress 5.9.
Y hay más ...
Además de las sombras, el CSS outline propiedad también ganada theme.json soporte en WordPress 6.1 y se puede aplicar a los botones y sus estados interactivos. Este Relaciones públicas de GitHub muestra un buen ejemplo.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}También puede encontrar los ejemplos reales de cómo el outline obras inmobiliarias en otros temas, incluyendo Volumen, Lona de bloquey base de bloques.
Terminando
¿Quién diría que había tanto de qué hablar con una sola propiedad CSS cuando se trata de bloquear temas en WordPress 6.1? Vimos los métodos soportados oficialmente para establecer un box-shadow en bloques y elementos individuales, incluidos los estados interactivos de un elemento de botón. También comprobamos cómo podíamos anular las sombras en un tema infantil. Y, finalmente, abrimos un ejemplo del mundo real que define y establece sombras en una propiedad personalizada.
Puede encontrar discusiones más detalladas y detalladas sobre WordPress y su box-shadow implementación en este Relaciones públicas de GitHub. También es un propuesta de GitHub para agregar UI directamente en WordPress para establecer valores de sombra en bloques, puede salta directamente a un GIF animado mostrando cómo funcionaría.
Hablando de que, justin tadlock recientemente desarrolló un bloque que representa una barra de progreso y controles de sombra de caja integrados en él. Lo muestra en este video:
Más información
Si desea profundizar en el box-shadow y otras propiedades CSS que son compatibles con el theme.json archivo en un tema de bloque, aquí hay un par de recursos que puede usar:
