Hace un tiempo, Ganesh Dahal escribió una publicación aquí sobre CSS-Tricks en respuesta a un tweet que preguntaba sobre cómo agregar sombras de cuadro CSS a los bloques y elementos de WordPress. Hay muchas cosas geniales allí que usan nuevas funciones entregadas en WordPress 6.1 que proporcionan controles. para aplicar sombras a las cosas directamente en el editor de bloques y en la interfaz de usuario del editor de sitios.
Ganesh se refirió brevemente a los elementos de los botones en esta publicación. Quiero investigarlo y profundizar en los enfoques de diseño de botones en los temas de bloque de WordPress. En concreto, abriremos uno nuevo theme.json y desglose los diferentes enfoques para diseñar los botones en el esquema.
¿Por qué botones, preguntas? Esa es una buena pregunta, así que empecemos con ella.
Los diferentes tipos de botones.
Cuando hablamos de botones en el contexto del Editor de bloques de WordPress, debemos distinguir entre dos tipos diferentes:
- Bloques secundarios dentro del bloque Botones
- Botones que están anidados en otro bloque (por ejemplo, el bloque de formulario de comentario de publicación)
Si añadimos ambos bloques a una plantilla, por defecto tienen el mismo aspecto.
Pero el marcado es muy diferente:
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button">
<input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment">
</p>Como podemos ver, los nombres de las etiquetas HTML son diferentes. Estas son las clases generales: .wp-block-button y .wp-element-button — que proporcionan un estilo consistente entre los dos botones.
Si estuviéramos escribiendo CSS, apuntaríamos a estas dos clases. Pero como sabemos, los temas de bloque de WordPress tienen una forma diferente de administrar los estilos y eso es a través de theme.json Ganesh también cubrió esto con gran detalle y harás bien en leer su artículo.
Entonces, ¿cómo definimos los estilos de los botones en theme.json ¿Sin escribir CSS real? Hagámoslo juntos.
Creando estilos base
theme.json es un conjunto estructurado de esquemas escritos en pares propiedad:valor. Las propiedades de nivel superior se denominan "secciones" y trabajaremos con styles Aquí es donde van todas las instrucciones de estilo.
Nos centraremos específicamente en elements en stylesEste selector apunta a elementos HTML que se comparten entre bloques. Este es el shell principal con el que trabajamos:
// theme.json
{
"version": 2,
"styles": {
"elements": {
// etc.
}
}
}Lo que tenemos que hacer es definir un button elemento.
={
"version": 2,
"styles": {
"elements": {
"button": {
// etc.
}
}
}
}eso button corresponde a los elementos HTML que se utilizan para marcar los elementos de los botones frontales. Estos botones contienen etiquetas HTML que pueden ser uno de nuestros dos tipos de botones: un componente independiente (es decir, el bloque de botones) o un componente anidado dentro de otro bloque (es decir, el bloque de comentarios de publicación).
En lugar de tener que diseñar cada bloque individual, creamos estilos compartidos. Avancemos y cambiemos el fondo y el color de texto predeterminados para ambos tipos de botones en nuestro tema. Hay color objeto allí, que a su vez soporta background y text properties donde establecemos los valores que queremos:
{
"version": 2,
"styles": {
"elements": {
"button": {
"color": {
"background": "#17a2b8",
"text": "#ffffff"
}
}
}
}
}Esto cambia el color de ambos tipos de botones:
Si abres DevTools y miras el CSS que genera WordPress para los botones, vemos que .wp-element-button class agrega los estilos que definimos en theme.json:
.wp-element-button {
background-color: #17a2b8;
color: #ffffff;
}¡Estos son nuestros colores predeterminados! A continuación, queremos dar a los usuarios comentarios visuales cuando interactúan con el botón.
Implementar estilos de botones interactivos
Dado que este es un sitio totalmente CSS, apuesto a que muchos de ustedes ya están familiarizados con los estados interactivos de enlaces y botones. :hover Pase el mouse sobre ellos, tabúelos en :focushaz clic en ellos para hacerlos :activeDiablos, incluso hay :visited estado para dar a los usuarios una indicación visual de que han hecho clic en esto antes.
Estas son pseudoclases de CSS y las usamos para orientar las interacciones de un enlace o botón.
En CSS podemos diseñar un :hover indicar así:
a:hover {
/* Styles */
}en theme.jsonextenderemos nuestra declaración de botón existente con estas pseudoclases.
{
"version": 2,
"styles": {
"elements": {
"button": {
"color": {
"background": "#17a2b8",
"text": "#ffffff"
}
":hover": {
"color": {
"background": "#138496"
}
},
":focus": {
"color": {
"background": "#138496"
}
},
":active": {
"color": {
"background": "#138496"
}
}
}
}
}
}Tenga en cuenta la naturaleza "estructurada" de esto. Básicamente seguimos un patrón:
Ahora tenemos una definición completa de los estilos estándar e interactivo de nuestro botón. Pero, ¿y si queremos diseñar ciertos botones que están anidados en otros bloques?
Botones de estilo anidados en bloques separados
Imaginemos que queremos que todos los botones tengan nuestros estilos principales, con una excepción. Queremos que el botón Enviar en el bloque del formulario de comentario de la publicación sea azul. ¿Cómo lograremos esto?
Este bloque es más complejo que el bloque Botón porque tiene más partes móviles: un formulario, entradas, texto de instrucciones y un botón. Para enrutar el botón en este bloque, debemos seguir el mismo tipo de estructura JSON que hicimos para button pero adjunto al bloque Formulario de publicación de comentarios que está asignado a core/post-comments-form elemento:
{
"version": 2,
"styles": {
"elements" {
"button": {
// Default button styles
}
}
"blocks": {
"core/post-comments-form": {
// etc.
}
}
}
}Tenga en cuenta que ya no operamos en elements En su lugar, trabajamos dentro blocks que está reservado para configurar bloques reales.Los botones, por otro lado, se consideran un elemento global porque pueden anidarse dentro de bloques, aunque sean también disponible como unidad independiente.
La estructura JSON admite elementos dentro de elementos. entonces si hay button en el bloque Formulario de publicación de comentarios, podemos señalarlo en el core/post-comments-form bloquear:
{
"version": 2,
"styles": {
"elements" {
"button": {
// Default button styles
}
}
"blocks": {
"core/post-comments-form": {
"elements": {
"button": {
"color": {
"background": "#007bff"
}
}
}
}
}
}
}Este selector significa que no solo estamos apuntando a un bloque específico, estamos apuntando a un elemento específico contenido dentro de ese bloque. Ahora tenemos un conjunto de estilos de botones predeterminados que se aplican a todos los botones del tema y un conjunto de estilos que se aplican a botones específicos que se encuentran en el bloque Formulario de publicación de comentarios.
Como resultado, el CSS generado por WordPress tiene un selector más preciso:
.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link {
background-color: #007bff;
}¿Y si queremos definir diferentes estilos interactivos para el botón del formulario de comentario de publicación? Este es el mismo trato que hicimos para los estilos predeterminados, solo que están definidos dentro del core/post-comments-form bloquear:
{
"version": 2,
"styles": {
"elements" {
"button": {
// Default button styles
}
}
"blocks": {
"core/post-comments-form": {
"elements": {
"button": {
"color": {
"background": "#007bff"
}
":hover": {
"color": {
"background": "#138496"
}
},
// etc.
}
}
}
}
}
}¿Qué pasa con los botones que no están en bloques?
WordPress genera e implementa automáticamente las clases correctas para representar estos estilos de botones. Pero, ¿qué sucede si está utilizando un tema de WordPress "híbrido" que admite bloques y edición completa del sitio, pero que también contiene plantillas PHP "clásicas"? ¿O qué sucede si creó un bloque personalizado o incluso tiene un código corto heredado que contiene botones? Ninguno de ellos es manejado por Motor de estilo de WordPress!
Sin preocupaciones. En todos estos casos se añadiría .wp-element-button La clase en la plantilla, el bloque o el marcado de código abreviado Los estilos generados por WordPress se aplicarán en esos casos.
Y puede haber algunas situaciones en las que no tenga control sobre el etiquetado. Por ejemplo, un complemento de bloque puede ser demasiado seguro de sí mismo y aplicar generosamente su propio estilo. Aquí es donde generalmente puede ir a la opción Avanzado en la configuración del bloque del panel y aplicar la clase allí:
resumiendo
Mientras escribe "CSS" en el theme.json puede parecer incómodo al principio, he descubierto que se convierte en una segunda naturaleza Al igual que CSS, hay un número limitado de propiedades que puede aplicar de manera amplia o muy limitada utilizando los selectores correctos.
Y no olvidemos los tres principales beneficios de usarlo theme.json:
- Los estilos se aplican a los botones tanto en la vista frontal como en el editor de bloques.
- Su CSS será compatible con futuras actualizaciones de WordPress.
- Los estilos generados funcionan tanto con temas de bloque como con temas clásicos, sin necesidad de duplicar nada en una hoja de estilo separada.
si has usado theme.json estilos en sus proyectos, por favor comparta sus experiencias y pensamientos. ¡Espero leer cualquier comentario y retroalimentación!
Deja una respuesta