Estilo de botones en temas de bloque de WordPress

Un poco más atrás, Ganesh Dahal escribió una publicación aquí en CSS-Tricks respondiendo a un tweet que preguntaba sobre agregar sombras de cuadro CSS en bloques y elementos de WordPress. Hay muchas cosas geniales que aprovechan las nuevas características que se incluyeron en WordPress 6.1 que proporcionan controles para aplicar sombras a las cosas directamente en la interfaz de usuario del Editor de bloques y del Editor de sitios.

Ganesh se refirió brevemente a los elementos de los botones en esa publicación. Quiero retomar eso y profundizar en los enfoques para dar estilo a los botones en los temas de bloque de WordPress. Específicamente, vamos a abrir una nueva theme.json y desglose varios enfoques para diseñar botones en el esquema.

¿Por qué botones, preguntas? Esa es una buena pregunta, así que empecemos con eso.

Los diferentes tipos de botones.

Cuando hablamos de botones en el contexto del Editor de bloques de WordPress, tenemos que distinguir entre dos tipos diferentes:

1. Bloques secundarios dentro del bloque Botones
2. Botones que están anidados dentro de otro bloque (p. ej., el bloque Formulario de publicación de comentarios)

Si agregamos estos dos bloques a una plantilla, tienen el mismo aspecto por defecto.

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. Son las clases comunes — .wp-block-button y .wp-element-button — que aseguran 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 la theme.json archivo. Ganesh también cubrió esto con gran detalle., y harías 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 los estilos base

theme.json es un conjunto estructurado de esquema escrito en pares propiedad:valor. Las propiedades de nivel superior se denominan "secciones", y vamos a trabajar con las styles sección. Aquí es donde van todas las instrucciones de estilo.

Nos centraremos específicamente en el elements existentes styles. Este selector apunta a elementos HTML que se comparten entre bloques. Este es el shell básico con el que estamos trabajando:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Así que lo que tenemos que hacer es definir un button .

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

Esa button corresponde a elementos HTML que se utilizan para marcar elementos de botón en la parte frontal. Estos botones contienen etiquetas HTML que pueden ser cualquiera de nuestros dos tipos de botones: un componente independiente (es decir, el bloque Botón) o un componente anidado dentro de otro bloque (por ejemplo, el bloque Publicar comentario).

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 una 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 abre DevTools y echa un vistazo al CSS que WordPress genera para los botones, vemos que el .wp-element-button class agrega los estilos que definimos en theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

¡Esos son nuestros colores predeterminados! A continuación, queremos dar a los usuarios comentarios visuales cuando interactúan con el botón.

Implementación de estilos de botones interactivos

Dado que este es un sitio sobre CSS, apuesto a que muchos de ustedes ya están familiarizados con los estados interactivos de enlaces y botones. Podemos :hover el cursor del mouse sobre ellos, tabúelos en :focus, haga clic en ellos para hacerlos :active. Diablos, incluso hay un :visited estado para dar a los usuarios una indicación visual de que han hecho clic en esto antes.

Esos son Pseudoclases CSS y los usamos para orientar las interacciones de un enlace o botón.

En CSS, podríamos diseñar un :hover Estado así:

a:hover { /* Styles */
}

In theme.json, vamos a ampliar 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" } } } } }
}

Note la naturaleza “estructurada” de esto. Básicamente estamos siguiendo un esquema:

Ahora tenemos una definición completa de los estilos predeterminados e interactivos 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 individuales

Imaginemos que queremos que todos los botones tengan nuestros estilos base, con una excepción. Queremos que el botón Enviar del bloque Formulario para publicar comentarios sea azul. ¿Cómo lograríamos eso?

Este bloque es más complejo que el bloque Botón porque tiene más partes móviles: el formulario, las entradas, el texto instructivo y el botón. Para orientar el botón en este bloque, tenemos que seguir el mismo tipo de estructura JSON que hicimos para el button pero se aplica al bloque Formulario de publicación de comentarios, que se asigna al 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 estamos trabajando en elements más. En cambio, estamos trabajando adentro blocks que está reservado para configurar bloques reales. Los botones, por el contrario, se consideran un elemento global, ya que se pueden anidar en bloques, aunque también están disponibles como un bloque independiente.

La estructura JSON admite elementos dentro de elementos. Entonces, si hay un button elemento en el bloque Formulario de publicación de comentarios, podemos apuntarlo en el core/post-comments-form bloque:

{ "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, sino que estamos apuntando a un elemento específico que está contenido en ese bloque. Ahora tenemos un conjunto predeterminado de estilos de botones 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.

El CSS generado por WordPress tiene como resultado 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 Formulario de publicación de comentarios? Es lo mismo que hicimos con los estilos predeterminados, solo que se definen dentro del core/post-comments-form bloque:

{ "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 y aplica automáticamente las clases correctas para generar estos estilos de botones. Pero, ¿qué sucede si usa un tema de WordPress "híbrido" que admite bloques y edición de sitio completo, pero que también contiene plantillas de PHP "clásicas"? ¿O qué pasa si creaste un bloque personalizado, o incluso tienes un shortcode heredado, que contiene botones? Ninguno de estos son manejados por el Motor de estilo de WordPress!

Sin preocupaciones. En todos esos casos, agregaría el .wp-element-button class en la plantilla, el bloque o el marcado de shortcode. Los estilos generados por WordPress luego se aplicarán en esos casos.

Y puede haber algunas situaciones en las que no tenga control sobre el marcado. Por ejemplo, algunos complementos de bloque pueden ser demasiado obstinados y aplicar generosamente su propio estilo. Ahí es donde normalmente puede ir a la opción "Avanzado" en el panel de configuración del bloque y aplicar la clase allí:

Terminando

Mientras escribe "CSS" en theme.json puede sentirse 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 forma amplia o muy limitada utilizando los selectores correctos.

Y no olvidemos las tres ventajas principales de usar theme.json:

1. Los estilos se aplican a los botones tanto en la vista frontal como en el editor de bloques.
2. Su CSS será compatible con futuras actualizaciones de WordPress.
3. Los estilos generados funcionan tanto con temas de bloque como con temas clásicos; no es necesario duplicar nada en una hoja de estilo separada.

Si ha utilizado theme.json estilos en sus proyectos, por favor comparta sus experiencias y pensamientos. ¡Espero leer cualquier comentario y retroalimentación!

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/