Cómo darle estilo al bloque de columnas de Gutenberg

Índice
  1. Convenciones de nomenclatura de bloques
  2. Columnas de estilo
  3. Terminando

WordPress 5.0 se acerca rápidamente y con él llega el nuevo editor Gutenberg. Ha habido mucha discusión en la comunidad de WordPress sobre qué significa exactamente eso para los usuarios, diseñadores y desarrolladores. Y aunque Gutenberg seguramente mejorará la experiencia de escritura, puede causar un poco de dolor de cabeza a los desarrolladores que ahora necesitan asegurarse de que sus complementos y temas estén actualizados y sean compatibles.

Una de las formas más claras de asegurarse de que su tema sea compatible con WordPress 5.0 y Gutenberg es agregar algunos estilos básicos para los nuevos bloques que presenta Gutenberg. Aparte de los bloques HTML básicos (como párrafos, encabezados, listas e imágenes) que probablemente ya tienen estilos, ahora tendrá algunos bloques complejos que probablemente no haya tenido en cuenta, como citas, imágenes de portada, botones y columnas. En este artículo, veremos algunas convenciones de estilo para los bloques de Gutenberg y luego agregaremos nuestros propios estilos para el bloque Columnas de Gutenberg.

Convenciones de nomenclatura de bloques

Lo primero es lo primero: ¿cómo se nombran los bloques de Gutenberg? Si está familiarizado con el inspector de código, puede abrirlo en una página usando el bloque al que desea aplicar estilo y comprobarlo usted mismo:

Ahora bien, puede resultar complicado hacer eso para cada uno de los bloques a los que se desea aplicar estilo, y por suerte, existe un método para esta locura. Los bloques de Gutenberg utilizan una forma de la convención de nomenclatura Bloque, Elemento, Modificador (BEM). La principal diferencia es que el nivel superior de cada uno de los bloques es wp. Por lo tanto, para nuestra cita destacada, el nombre es wp-block-pullquote. Las columnas serán wp-block-columns, y así sucesivamente. Puede leer más sobre esto en el Manual de desarrollo de WordPress.

Advertencia sobre el nombre de la clase

Aquí hay una pequeña advertencia: el nombre del bloque puede no ser el único nombre de clase con el que estás tratando. En el ejemplo anterior, vemos que la clase alignrighttambién se aplica. Y Gutenberg viene con dos nuevas clases: alignfully alignwide. Verás en nuestras columnas que también hay una clase para decirnos cuántos hay. Pero llegaremos a eso pronto.

Aplicar sus propios nombres de clase

Los bloques de Gutenberg también nos brindan una forma de aplicar nuestras propias clases:

Esto es excelente si desea tener un conjunto común de clases para bloques de diferentes temas, desea aplicar clases previamente existentes a bloques donde tenga sentido o desea tener variaciones en los bloques.

Al igual que el editor de publicaciones de WordPress actual (o “clásico”), Gutenberg toma la menor cantidad de opciones posibles para la interfaz, dejándonos la mayor parte del trabajo pesado para nosotros. Esto incluye las columnas, que básicamente solo incluyen estilos suficientes para formar columnas. Entonces necesitamos agregar relleno, márgenes y estilos responsivos.

Columnas de estilo

Es hora de ir al grano de la cuestión: ¡démosle estilo a algunas columnas! Lo primero que tendremos que hacer es encontrar un tema que podamos usar. No hay muchos que tengan un amplio soporte de Gutenberg todavía, pero eso es realmente bueno en caso nuestro. En su lugar, usaremos un tema que sea lo suficientemente flexible como para brindarnos un buen punto de partida: Astra.

Astra es un tema gratuito, rápido y flexible que ha sido diseñado para funcionar con creadores de páginas. Eso significa que puede brindarnos una plantilla inicial realmente buena para nuestras columnas. Hablando de eso, necesitamos algo de contenido. Esto es con lo que trabajaremos:

Tenemos un diseño de tres columnas con imágenes, títulos y texto. La imagen de arriba es cómo se ven las columnas dentro del editor Gutenberg. Así es como se ven en la parte delantera:

Puedes ver que hay algunas diferencias entre lo que vemos en el editor y lo que vemos en la interfaz. Lo más notable es que no hay espacio entre las columnas en la parte frontal. El extremo izquierdo del encabezado en el frente también está alineado con el borde izquierdo de la primera columna. En el editor, no es porque estamos usando la alignfullclase.

Nota: Para los fines de este tutorial, trataremos .alignfull, .alignwide, y no alineamiento de la misma manera, ya que el tema Astra aún no admite las nuevas clases.

Cómo funcionan las columnas de Gutenberg

Ahora que tenemos un tema, debemos responder la pregunta: “¿cómo funcionan las columnas en Gutenberg?”

Hasta hace poco, en realidad usaban CSS grid, pero luego cambiaron a flexbox. (El razonamiento fue que flexbox ofrece una compatibilidad más amplia con el navegador). Dicho esto, los estilos son súper ligeros:

.wp-block-columns {  display: flex;}.wp-block-column {  flex: 1;}

Disponemos de un bolígrafo con los estilos finales por si quieres ver el resultado que buscamos. Puede ver en él que Gutenberg solo define el flexbox y luego indica que cada columna debe tener la misma longitud. Pero también notarás un par de cosas más:

  • El contenedor principal es wp-block-columns.
  • También está la clase has-3-columns, que nos anota el número de columnas. Gutenberg soporta entre dos y seis columnas.
  • Las columnas individuales tienen la clase wp-block-column.

Esta información es suficiente para que podamos comenzar.

Estilizando a los padres

Dado que tenemos flexbox aplicado de manera predeterminada, la mejor acción a tomar es asegurarnos de que estas columnas se vean bien en el frontend en un contexto de pantalla más grande como vimos anteriormente.

Lo primero y más importante es agregarles algunos márgenes para que no se topen entre sí ni con otros elementos:

/* Add vertical breathing room to the full row of columns. */.wp-block-columns {  margin: 20px 0;}/* Add horiztonal breathing room between individual columns. */.wp-block-column {  margin: 0 20px;}

Dado que es razonable suponer que las columnas no serán los únicos bloques de la página, agregamos márgenes superiores e inferiores a todo el contenedor principal para que haya cierta separación entre las columnas y otros bloques de la página. Luego, para que las columnas no se superpongan entre sí, aplicamos márgenes izquierdo y derecho a cada columna individual.

¡Estos ya están empezando un verso mejor! Si quieres que luzcan más uniformes, siempre puedes tirar text-align: justify;también las columnas.

Hacer que las columnas sean responsables

El diseño comienza a desmoronarse cuando pasamos a anchos de pantalla más pequeños. Astra hace un buen trabajo reduciendo el tamaño de fuente a medida que lo reducimos, pero cuando empezamos a rondar los 764px, las cosas empiezan a ponerse un poco apretadas:

En este punto, dado que tenemos tres columnas, podemos darle estilo de formación detallada mediante la .has-3-columnsclase. La solución más sencilla sería eliminar flexbox por completo:

@media (max-width: 764px) {  .wp-block-columns.has-3-columns {    display: block;  }}

Esto convertiría automáticamente nuestras columnas en bloques. Todo lo que tendríamos que hacer ahora es ajustar el relleno y listo: no es la solución más bonita, pero es legible. Aunque me gustaría ser un poco más creativo. En cambio, haremos que la primera columna sea la más ancha y luego las otras dos seguirán siendo columnas debajo de la primera.

Esto sólo funcionará dependiendo del contenido. Creo que aquí es perdonable darle prioridad a Yoda como el Maestro Jedi más notable.

Veamos cómo se ve:

@media screen and (max-width: 764px) {  .wp-block-columns.has-3-columns {    flex-flow: row wrap;  }    .has-3-columns .wp-block-column:first-child {    flex-basis: 100%;  }}

En las primeras líneas después de la consulta de medios, nuestro objetivo .has-3-columnses cambiar el flex-flowformato a row wrap. Esto le indicará al navegador que permita que las columnas llenen el contenedor pero que se ajusten cuando sea necesario.

Luego, apuntamos a la primera columna .wp-block-column:first-childy le dejamos al navegador que haga el flex-basis100%. Esto dice: “hace que la primera columna llene todo el espacio disponible”. Y mientras estamos ajustando columnas, las otras dos se moverán automáticamente a la siguiente línea. Nuestro resultado es este:

Lo bueno de este diseño es que con row wraptodas las columnas ocupan todo el ancho en las pantallas más pequeñas. Sin embargo, como empiezan a resultar difíciles de leer antes de eso, deberíamos encontrar un buen punto de interrupción y configurar los estilos nosotros mismos. Alrededor de 478 px deberían funcionar bien:

@media (max-width: 478px) {  .wp-block-columns.has-3-columns {    display: block;  }    .wp-block-column {    margin: 20px 0;  }}

Esto elimina el diseño flexible e invierte los márgenes de las columnas individuales, manteniendo el espacio entre ellas a medida que pasan a un diseño apilado.

Nuevamente, puedes ver todos estos conceptos reunidos en la siguiente demostración:

Si quieres ver un ejemplo en vivo diferente, puedes encontrarlo aquí.

Terminando

¡Ahí lo tienes! En este tutorial, examinamos cómo funciona el bloque Columnas de Gutenberg, sus convenciones de nombres de clase y luego aplicamos estilos básicos para que las columnas se vean bien en todos los tamaños de pantalla en la interfaz. Desde aquí, puedes tomar este código y ejecutarlo: apenas hemos arañado la superficie y puedes hacer mucho más solo con el CSS. Por ejemplo, recientemente hice esta tabla de precios usando solo Columnas de Gutenberg:

Y, por supuesto, están los otros bloques. Gutenberg pone mucho poder en manos de los editores de contenido, pero aún más en manos de los desarrolladores de temas. Ya no necesitamos crear la infraestructura para realizar diseños más complejos en el editor de WordPress, y ya no necesitamos indicar a los usuarios que inserten códigos cortos o HTML para obtener lo que necesitan en una página. Podemos agregar un poco de CSS a nuestros temas y dejar que los creadores de contenido hagan el resto.

Si quieres profundizar más en la preparación de tu tema para Gutenberg, puedes consultar mi curso, Creación de temas con Gutenberg. Repasaremos cómo diseñar muchos bloques diferentes, configurar paletas de colores personalizadas, plantillas de bloques y más.

SUSCRÍBETE A NUESTRO BOLETÍN 
No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Este sitio web utiliza cookies para mejorar tu experiencia mientras navegas por él. Este sitio web utiliza cookies para mejorar tu experiencia de usuario. Al continuar navegando, aceptas su uso. Mas informacion