Novedades en Gutenberg: Grupos, Columnas y más

Hacía ya bastante tiempo que no hablábamos en SiloCreativo de Gutenberg, el nuevo editor de WordPress que se estrenó de forma oficial con la versión 5.0. Y es que, a pesar de la amplia cantidad de críticas que recibió en un inicio, poco a poco está incorporando novedades y agregando nuevas funcionalidades a los bloques ya existentes.

Por estos motivos, queremos hacer un repaso de algunas de estas nuevas herramientas. Nunca esta de más estar al día de las nuevas incorporaciones que va haciendo Gutenberg. Porque lo que antes quizás no se podía realizar, o teníamos que escribir algunas líneas de CSS para conseguirlo, es posible que ya esté directamente incorporado en el editor.

Eso sí, comentar que mientras algunos de los bloques que vamos a ver en este artículo están ya disponible en Gutenberg, otras solo pueden ser usadas si tenemos el plugin Gutenberg instalado en nuestro WordPress. A día de hoy, este complemento que podéis encontrar en el repositorio oficial, está en la versión 7.2. Si soléis hacer uso de las funciones de Gutenberg, y queréis probar sus novedades antes que nadie, os recomendamos la instalación de este plugin.

Nuevas opciones del bloque Columnas

Hace un tiempo escribimos una artículo en SiloCreativo sobre como conseguir crear columnas asimétricas en Gutenberg gracias al uso de clases CSS y Flexbox por una parte, o mediante la instalación plugins. Por suerte, ahora podemos hacerlo sin necesidad de herramientas externas y sin escribir ninguna línea de código. Por lo que ese tutorial se ha quedado algo obsoleto, aunque puede servir para saber como usar las clases CSS en Gutenberg.

Lo primero que vamos a tener que elegir al insertar el bloque Columnas es una pantalla que nos muestran diferentes layouts. Aunque vamos a poder modificarlo posteriormente, ya podemos dar una pista sobre el tipo de configuración que queremos en nuestras columnas. Simplemente escogeremos entre dos o tres columnas, y si estas van a ser simétricas o no.

Una vez elegido, podemos ver nuestras columnas vacías en el editor. Como hasta ahora, se puede cambiar el número de columnas en el panel de ajustes a la izquierda. Otra novedad la vemos en la barra de herramientas, ya que ahora tenemos la posibilidad de alinear los elementos de las columnas.

Por último, para crear columnas asimétricas como hablábamos anteriormente, solo hay que seleccionar cualquier columna individual, y en el panel de ajustes habrá una opción llamada Ajuste de columna. Con ella, asignaremos el % que queremos que ocupe esa columna con respecto al ancho total del bloque. Por lo que el control que tendremos sobre las dimensiones de cada una de las columnas será total, y tan sencillo de realizar como elegir un número.

Bloque Medios y texto

Un bloque que lleva en el complemento Gutenberg desde antes de verano, pero que no ha llegado a todos el mundo hasta otoño del año pasado. Y se ha convertido en uno de los favoritos por su facilidad de uso. El bloque Medios y texto no es más que un bloque con dos columnas, donde en una va una imagen, y otra contenido, como pueda ser un texto.

Una vez que tenemos el bloque en nuestro editor, vemos que tenemos un área de medios a la izquierda (para insertar la imagen), y el área de contenido a la derecha. ¿Qué ocurre si lo queremos con la disposición contraria?. Tan fácil como ir a la barra de herramientas superior y pulsar en el icono Mostrar medios a la derecha. Junto a esta opción, y al igual que en el bloque Columnas, podemos alinear de forma vertical todo el contenido.

También mencionar la opción para decidir si queremos que la imagen y el contenido se apilen una sobre otra en formato móvil. Lo podemos seleccionar en el panel lateral de ajustes del bloque.

Crear varios botones en una fila

Hasta ahora, para tener varios botones, la única opción era crear un bloque Columnas, y en cada columna individual insertar un bloque Botón. No era mala solución, pero a poco que nos empezásemos a modificar, comenzábamos a ver las limitaciones. Había que alinear los botones dentro de la columna para que estuviesen juntos, dando problemas en responsive. Por suerte, esto ya se acabó.

Si agregamos el bloque Botón, vemos como podemos ir agregando nuevos botones a la derecha. Además de que podemos alinear el conjunto donde queramos, tanto al centro como a un lateral. Por lo que ya no nos dará problemas al ver los botones en resoluciones menores. A los que creáis Hero Images, seguro que os viene de maravilla esta actualización.

Agrupar diferentes bloques en uno

Personalmente, este quizás sea uno de los bloques que no puedo explicar como no estaba en Gutenberg desde el primer día. Porque algo tan sencillo como hacer que dos bloques tuviesen un fondo del mismo color, había que realizar alguna que otro truco. Veamos en un par de ejemplos, como podemos aprovechar la posibilidad de agrupar bloques en Gutenberg.

En el primero, quiero crear una sección que tenga un encabezado y dos párrafos, y que todos ellos tengan el mismo color de fondo. Hasta ahora, una vez que insertábamos estos bloques, teníamos que, mediante CSS, añadir una clase con el color de fondo para el encabezado. Además, otra clase para eliminar los margins superior e inferior que por defecto tienen los bloques en Gutenberg. Conseguíamos el resultado, pero después de realizar todos estos pasos.

Con la herramienta Grupo, solo tenemos que insertar dicho bloque y añadir dentro de él los bloques de Encabezado y Párrafo. O crear los bloques Encabezado y Párrafo, seleccionarlos y agruparlos. A continuación, veremos que en el panel de ajustes del bloque Grupo tenemos la opción de elegir un color de fondo. Ya tenemos nuestro diseño conseguido y sin escribir una sola línea.

El bloque agrupar también es muy útil para crear un bloque reutilizable que contenga varios bloques dentro de él. En mi caso, lo he usado cuando he creado un diseño en una página que va a repetirse en otras páginas. Así, cuando estoy en una nueva página en blanco, solo tengo que buscar dicho bloque reutilizable en donde insertar todo el contenido.

Como hemos podido ver, no son pocas las nuevas funcionalidades que nos ha traído Gutenberg durante los últimos meses. Junto con muchas más que se nos han quedado fuera, ya que solo os hemos querido mencionar las que usamos con más asiduidad. Pero el camino que está llevando el desarrollo de Gutenberg parece que es el correcto, y que serán muchas más las mejoras que van a ir añadiendo en el futuro.

Para vosotros, ¿cuales son vuestros bloques de Gutenberg favoritos?. ¿Echáis en falta alguno, o la incorporación de nuevas funciones en los ya existentes?. Podéis compartir con nosotros vuestras experiencias en los comentarios que, como siempre, están abiertos para todos.