WordPress 5.0 se acerca rápidamente y el nuevo editor de Gutenberg viene con él. 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 pequeño 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 tengan estilos, ahora tendrá algunos bloques complejos que probablemente no haya tenido en cuenta, como citas extraídas, 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 de 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 que desea diseñar y comprobarlo usted mismo:
El bloque Gutenberg Pull Quote tiene una clase de wp-block-pullquote.
Ahora, podría resultar engorroso hacer eso para todos y cada uno de los bloques que desea diseñar y, afortunadamente, hay un método para la 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 . Entonces, para nuestra cita de extracción, el nombre es wp-block-pullquote. Las columnas serían wp-block-columns, y así. Puede leer más sobre esto en el Manual de desarrollo de WordPress.
Advertencia sobre el nombre de clase
Aquí hay una pequeña advertencia en el sentido de que el nombre del bloque puede no ser el único nombre de clase con el que está tratando. En el ejemplo anterior, vemos que la clase alignright también se aplica. Y Gutenberg viene con dos clases nuevas: alignfull y 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 dan una forma de aplicar nuestras propias clases:
La clase agregada al panel de opciones en el editor de Gutenberg (izquierda). Se aplica al elemento, como se ve en DevTools (derecha).
Esto es excelente si desea tener un conjunto común de clases para bloques en 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 a nosotros. Esto incluye las columnas, que básicamente solo incluyen suficientes estilos para que formen columnas. Por lo tanto, debemos agregar el relleno, los márgenes y los estilos de respuesta.
Estilo de columnas
Es hora de llegar al meollo del asunto: ¡diseñemos algunas columnas! Lo primero que tendremos que hacer es encontrar un tema que podamos usar. Todavía no hay muchos que tengan un amplio soporte de Gutenberg, pero eso es realmente bueno en nuestro caso. En cambio, usaremos un tema que sea lo suficientemente flexible como para darnos un buen punto de partida: Astra.
Astra está disponible de forma gratuita en el directorio de temas de WordPress. (Fuente)
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 de inicio realmente buena para nuestras columnas. Hablando de eso, necesitamos algo de contenido. Esto es con lo que trabajaremos:
Nuestras columnas dentro del editor de Gutenberg.
Tenemos un diseño de tres columnas con imágenes, encabezados y texto. La imagen de arriba muestra el aspecto de las columnas dentro del editor de Gutenberg. Así es como se ven en la parte delantera:
Nuestras columnas en la parte delantera.
Puede ver que hay algunas diferencias entre lo que vemos en el editor y lo que vemos en la interfaz. En particular, no hay espacio entre las columnas en el extremo frontal. El extremo izquierdo del encabezado en el extremo frontal también está alineado con el borde izquierdo de la primera columna. En el editor, no es porque estemos usando el alignfull clase.
Nota: Por el bien de este tutorial, vamos a tratar .alignfull, .alignwide, y no hay alineación igual, ya que el tema de Astra aún no es compatible con las nuevas clases.
Cómo funcionan las columnas de Gutenberg
Ahora que tenemos un tema, debemos responder a la pregunta: “¿Cómo funcionan las columnas en Gutenberg?”
Hasta hace poco, en realidad usaban la cuadrícula CSS, pero luego cambiaron a flexbox. (El razonamiento fue que flexbox ofrece un soporte de navegador más amplio). Dicho esto, los estilos son súper ligeros:
.wp-block-columns {
display: flex;
}
.wp-block-column {
flex: 1;
}Tenemos un bolígrafo con los estilos finales si quieres ver el resultado que buscamos. Puede ver en él que Gutenberg solo está definiendo el flexbox y luego indica que cada columna debe tener la misma longitud. Pero también notarás un par de otras cosas:
- El contenedor principal es
wp-block-columns. - Tambien esta la clase
has-3-columns, señalando el número de columnas para nosotros. Gutenberg admite entre dos y seis columnas. - Las columnas individuales tienen la clase
wp-block-column.
Esta información es suficiente para comenzar.
Peinando a los padres
Dado que tenemos flexbox aplicado de forma predeterminada, la mejor acción a tomar es asegurarse de que estas columnas se vean bien en la parte frontal en un contexto de pantalla más grande como vimos anteriormente.
En primer lugar, agreguemos algunos márgenes a estos para que no se encuentren entre sí u 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 en la página, agregamos márgenes superior e inferior a todo el contenedor principal para que haya cierta separación entre las columnas y otros bloques en la página. Luego, para que las columnas no se encuentren entre sí, aplicamos los márgenes izquierdo y derecho a cada columna individual.
Columnas con algunos márgenes agregados.
¡Ya están empezando a verse mejor! Si quieres que luzcan más uniformes, siempre puedes lanzar text-align: justify; en las columnas también.
Hacer que las columnas respondan
El diseño comienza a desmoronarse cuando pasamos a anchos de pantalla más pequeños. Astra hace un buen trabajo al reducir el tamaño de las fuentes a medida que nos encogemos, pero cuando empezamos a tener alrededor de 764 px, las cosas comienzan a ponerse un poco apretadas:
Nuestras columnas de 764px de ancho.
En este punto, dado que tenemos tres columnas, podemos diseñar explícitamente las columnas usando el .has-3-columns clase. La solución más simple 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 tenemos que hacer ahora es ajustar el relleno y estamos listos para comenzar; no es la solución más bonita, pero es legible. Sin embargo, 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 permanecerán como columnas debajo de la primera.
Esto solo 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 eso:
@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, apuntamos .has-3-columns para cambiar la flex-flow a row wrap. Esto le indicará al navegador que permita que las columnas llenen el contenedor pero que se envuelvan cuando sea necesario.
Luego, apuntamos a la primera columna con .wp-block-column:first-child y le decimos al navegador que haga flex-basis 100%. Esto dice, “haz que la primera columna llene todo el espacio disponible”. Y como estamos ajustando columnas, las otras dos pasarán automáticamente a la siguiente línea. Nuestro resultado es este:
Nuestras columnas recientemente receptivas.
Lo bueno de este diseño es que con row wrap, todas las columnas se vuelven de ancho completo en las pantallas más pequeñas. Aún así, como comienzan a ser difíciles de leer antes de eso, deberíamos encontrar un buen punto de ruptura y establecer los estilos nosotros mismos. Alrededor de 478px debería 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 se mueven a un diseño apilado.
Nuestro diseño de pantalla pequeña.
Nuevamente, puede ver todos estos conceptos reunidos en la siguiente demostración:
Vea las columnas Pen Gutenberg de Joe Casabona (@jcasabona) en CodePen.
Si desea ver un ejemplo en vivo diferente, puede encontrar uno aquí.
Terminando
¡Ahí lo tienes! En este tutorial, examinamos cómo funciona el bloque Columns de Gutenberg, sus convenciones de nomenclatura de clases 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í, puede tomar este código y ejecutarlo; apenas hemos arañado la superficie y puede hacer muchas más cosas solo con CSS. Por ejemplo, recientemente hice esta tabla de precios usando solo columnas de Gutenberg:
(Demo en vivo)
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 construir la infraestructura para hacer diseños más complejos en el editor de WordPress, y ya no necesitamos instruir a los usuarios para 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 desea profundizar en la preparación de su tema para Gutenberg, puede consultar mi curso, Tematización con Gutenberg. Repasamos cómo diseñar muchos bloques diferentes, establecer paletas de colores personalizadas, plantillas de bloques y más.