Foto mostrando bloques de madera apilados

Cuando creas y editas páginas con el editor de bloques de WordPress seguramente más de una vez te has frustado intentando cambiar la disposición o los estilos de algunos bloques sin querer recurrir a tocar código. Particularmente, cuando recurres a crear columnas para crear diseños para los que no están pensadas las columnas, es cuando más te desesperas.

En esta entrada veremos que tenemos alternativas más adecuadas para algunos diseños de partes de página. Con un par de ejemplos, verás algunas de las posibilidades que te ofrecen los bloques grupo, fila y pila («group», «raw» y «stack», respectivamente en inglés) que solucionan algunos de los problemas que encontrábamos con columnas.

Para los ejemplos mostrados en esta entrada he usado la versión de WordPress 6.0.1 y el tema Twenty Twenty-Two.

Ejemplos usando columnas

Veamos, por ejemplo, dos sencillos diseños del primer bloque que nos gustaría mostrar en la página de una agencia de turismo.

Primer ejemplo de primer bloque
Primer ejemplo de primer bloque para mostrar en una página web de una agencia de turismo.
Segundo ejemplo de primer bloque
Segundo ejemplo de primer bloque para mostrar en una página web de una agencia de turismo.

Para reproducir el primer ejemplo en el editor de bloques, una opción es primero añadir un bloque de tipo fondo con la imagen seleccionada y luego añadir un par de columnas de distinto tamaño. La columna de la derecha ocupa un tercio y le añadimos un título, un párrafo y dos botones y ya tenemos nuestro primer bloque creado.

Creación del primer bloque con una imagen de tipo fondo y dos columnas
Creación del primer bloque con una imagen de tipo fondo y dos columnas.

Al visualizarlo a tamaño completo lo vemos bien pero si reducimos el tamaño de la ventana, el navegador mantiene la visualización en forma de columnas y muestra los botones uno encima de otro.

Visualización del primer ejemplo en una ventana de tamaño más pequeño
Visualización del primer ejemplo en una ventana de tamaño más pequeño.

Ya ves que con esta solución no sólo hemos añadido una columna vacía sinó que además no es exactamente la visualización que estariamos buscando en dispositivos más pequeños.

De forma similar, para el segundo ejemplo también añadimos primero un bloque de tipo fondo, a continuación un par de columnas y el contenido. En este ejemplo, en vez de dos botones tenemos un icono de un sobre seguido de una dirección de email. La opción de mostrarlo con un bloque de medios y texto, no es posible ya que el tamaño mínimo de la imagen del bloque supera el tamaño de lo que queremos mostrar. Optamos por crear dos columnas, en una añadimos la imagen del icono y, a continuación, en la siguiente el texto. Alineamos las dos columnas centradas para que quede bien su visualización.

Creación del segundo ejemplo con una imagen de fondo y columnas
Creación del segundo ejemplo con una imagen de fondo y columnas.

Al igual que antes, además de haber añadido columnas vacías, al reducir el tamaño de la ventana, el resultado que se nos muestra en pantalla no es exactamente el que desearíamos.

Visualización del segundo ejemplo en una ventana de tamaño más pequeño.
Visualización del segundo ejemplo en una ventana de tamaño más pequeño.

Como puedes ver en la imagen anterior, aparte de quedar todo el texto muy agrupado a la izquierda, la combinación de la imagen del sobre con la dirección de correo no queda bien. Se pierden las proporciones y se parte el texto del correo.

Veamos cómo podemos solucionar los problemas anteriores si, en vez de usar columnas, usamos los bloques de tipo grupo, fila y pila.

El bloque grupo

El bloque grupo, como ya seguramente sabes, es un bloque que nos sirve para agrupar un conjunto de bloques dentro de un contenedor. Es como el bloque «padre» que tiene un conjunto de hijos.

Se añade como cualquier otro bloque pero una vez insertado no se muestra como tal y la forma de navegar a él es haciendo clic al mismo mostrado en la Lista de Vista o al final del editor posicionando el cursor sobre el bloque grupo.

Lo más usual es usar un bloque de grupo para agrupar un conjunto de columnas o párrafos y añadirles un color de fondo o un espaciado y margen único y distinto al resto.

Propiedades del bloque grupo
Propiedades del bloque grupo.

También puedes indicar un tamaño máximo a todo su contenido y añadirle un borde con cierto estilo y color.

Nelio Unlocker

Pásate a WordPress manteniendo tus diseños y contenidos

Mejora hoy mismo el SEO de tu web y acelera su velocidad de carga convirtiendo tus páginas a estándares HTML, CSS y WordPress. No necesitas conocimientos técnicos y solo pagarás por aquello que necesites.

Los bloques fila y pila

El bloque fila y el bloque pila son un tipo de bloques que te permiten insertar varios bloques en una fila (o columna, con el bloque Pila) y espaciarlos uniformemente. Puedes utilizar el bloque fila o pila para crear separadores o añadir varios elementos en la misma línea como si estuvieran incluidos en columnas.

Las propiedades que puedes especificar en ambos bloques son muy parecidas a las de grupo, a excepción de que no puedes indicar el tamaño máximo de su contenido. Y en este caso, puedes añadir la justificación de todo el bloque respecto a su contenedor.

Veamos cómo podemos crear los dos ejemplos anteriores usando estos tipos de bloques en vez de columnas, y las ventajas que nos proporcionan.

Ejemplos con bloques de grupo, fila y pila

Para crear el primer bloque del primer ejemplo sin usar columnas, creamos primero el bloque de tipo fondo con la imagen igual que antes. A continuación, dentro del bloque fondo añadimos un bloque de tipo grupo. Una de las características del bloque de tipo grupo es que su alineación es siempre de ancho completo y está centrado en su contenedor. Por lo tanto, al añadir el título, párrafo y los dos bloques y alineando en el centro cada uno de estos bloques, el resultado es el siguiente.

Ejemplo de primer bloque creado con un bloque fondo y un bloque grupo
Ejemplo de primer bloque creado con un bloque fondo y un bloque grupo.

No es lo que queríamos inicialmente, ya que el bloque de grupo nos muestra toda la información en el centro en vez de a la derecha del bloque fondo.

Ejemplo 1 creado con un bloque grupo
Ejemplo 1 creado con un bloque grupo.

Pero tiene la ventaja de que podemos indicar un ancho máximo al mismo de forma que el texto mostrado no ocupe todo el ancho del bloque fondo. Y a diferencia de la columna, por mucho que reduzcamos el tamaño de la ventana, los botones siempre quedan alineados uno al lado del otro.

Ejemplo 1 creado con un bloque grupo limitando el ancho del bloque
Ejemplo 1 creado con un bloque grupo limitando el ancho del bloque.

¿Cómo conseguimos mostrar el grupo en la parte derecha de la imagen? Aquí es donde el grupo tipo pila nos aporta la solución que estábamos buscando.

Tras crear el bloque de tipo fondo, añade un bloque de tipo pila y justificación derecha. A continuación añade el bloque grupo limitando su tamaño y añade el contenido.

Ejemplo 1 creado con los bloques pila y grupo
Ejemplo 1 creado con los bloques pila y grupo.

Ahora, no tenemos ningún bloque vacio y al visualizar la página sea cual sea el tamaño de la página, el contenido se muestra con los botones alineados uno al lado del otro en todo momento.

Visualización en una ventana de menores dimensiones del ejemplo creado
Visualización en una ventana de menores dimensiones del ejemplo creado.

El segundo ejemplo es muy parecido pero, ¿cómo solucionamos el problema del icono y la dirección de correo?

La solución es, en vez de añadir dos columnas en las que añadíamos la imagen y el texto, crear un bloque de tipo fila en el que añadimos un bloque de imagen y un párrafo.

Ejemplo 2 creado con bloques pila, grupo y fila
Ejemplo 2 creado con bloques pila, grupo y fila.

Ahora, cuando reducimos el tamaño de la ventana, la visualización del primer bloque de la página sigue viéndose genial, manteniendo la imagen y la dirección de correo alineados y sin romperse el texto.

Previsualización del segundo ejemplo creado con los bloques pila, fila y grupo
Previsualización del segundo ejemplo creado con los bloques pila, fila y grupo en una ventana de tamaño reducido.

Conclusión

Con estos dos ejemplos hemos podido ver que algunos de los problemas de diseño que nos encontrábamos con las columnas ahora pueden resolverse con los bloques de tipo grupo, pila y fila. Con estos bloques ganas flexibilidad respecto a columnas al poder añadir justificaciones y márgenes. Además no te ves forzado a ir añadiendo columnas vacías que no tienen ningún sentido. Así que olvídate de crear páginas con columnas vacías.

Imagen destacada de La-Rel Easter en Unsplash.

2 respuestas a «Por qué y cuándo usar los bloques grupo, fila y pila de WordPress»

  1. Avatar de Gustavo
    Gustavo

    Un post muuuuy práctico. Gracias!

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.