Novedades Gutenberg para WordPress 5.7

Tenemos el lanzamiento de WordPress 5.7 a la vuelta de la esquina. La primera beta se lanzó a principios de Febrero, la Release Candidate prevista para el día 23 del mismo mes, y la versión final para el 9 de marzo, según el roadmap oficial. Entre todas las novedades que traerá la próxima actualización de WordPress, en este artículo nos hemos querido centrar en las que nos traerá Gutenberg, el editor que introdujo el CMS en su versión 5.0.

Para ello, focalizaremos la mirada en aquellas nuevas funciones que más va a notar el usuario final en su día a día de trabajo. Es decir, nuevas opciones en los bloques que nos ayudarán a personalizarlos mucho más, o funcionalidades generales que nos harán la vida más fácil al movernos por el editor. Por detrás también se han añadido muchos ajustes para que el comportamiento general del editor sea más fluido, pero eso lo dejaremos para otra ocasión.

En primer lugar, para los más impacientes, os mostraremos como podéis probar todas estas nuevas funciones de Gutenberg sin tener que esperar a la salida de WordPress 5.7. Eso sí, teniendo en cuenta alguna que otra consideración.

Probar las novedades antes del lanzamiento de WordPress 5.7

Para testear por vuestra propia mano todas las características que vamos a ir viendo a lo largo del artículo, es tan sencillo como instalar y activar el plugin Gutenberg que hay en el repositorio de WordPress. Una vez hecho esto, ya notaremos los cambios al crear cualquier entrada o página. Eso sí, hay que tener en mente que muchas de las características que añade este complemente están aun en pruebas. O puede que sean incompatibles con algunas plantillas. Por esto, solo recomendarlo usarlo en entornos de prueba, donde cualquier tipo de problema no nos suponga un quebradero de cabeza en nuestros proyectos reales.

A día de hoy, este complemento está en la versión 9.9.2. WordPress 5.7 traerá las novedades que el plugin Gutenberg ha ido añadiendo desde la versión 9.3 a la 9.9. Por lo que casi podemos asegurar que el listado estará cerrado, y que el nuevo editor que vendrá con la versión 5.7 tendrá el mismo aspecto que el del plugin. Una vez aclarado esto, pasemos a ver algunos de los cambios más interesantes que nos va a traer Gutenberg.

Justificación y ajuste del ancho del bloque Botones

Bloque Botones en Gutenberg, con opciones de justificación

Desde hace un tiempo, el bloque Botón se transformó en Botones, ya que nos permitía añadir más de un botón. Y en el futuro, Gutenberg nos permitirá justificar dichos botones tanto de forma central, como a derecha o izquierda de su contenedor, al igual que podemos hacer con cualquier texto.

Bloque Botones en Gutenebrg, con ancho al 75%

Por otra parte, podemos elegir el ancho que ocupará el botón con respecto al ancho del bloque, pudiendo elegir entre un 25%, 50%, 75% o 100%. Es muy importante saber que este ancho es con respecto al total del bloque. Si tenemos dos botones cada uno con un ancho del 75%, el segundo botón se mostrará por debajo del primero, ya que no caben los dos dentro de la misma fila.

Tamaño de tipografía en cualquier tipo de bloque de texto

Bloque Lista en Gutenberg, con tipos de tamaño de fuente

Hasta ahora, la elección del tamaño del texto se centraba en los bloques Párrafo y Encabezado. Ahora este listado se amplía, y ya podemos elegir el tamaño de la tipografía en bloques como Lista o Código. Una opción que se venía pidiendo desde hace mucho tiempo, y con la que podremos hacer que nuestro contenido se muestre de manera homogénea.

Alto completo en bloque Fondo

Bloque Fondo en Gutenberg, con altura de 100vh

Hasta ahora, teníamos la posibilidad de que el bloque fondo tuviese el alto en formato píxeles que quisiéramos. Pero a partir de ahora, también podemos hacer que ocupe todo el alto de la pantalla, sea cual sea el dispositivo donde lo veamos. Esto es gracias a la unidad vh (viewport height), con la que podemos designar el alto de este bloque con respecto a la pantalla. Si elegimos que sea 100vh, se mostrará a todo el alto de la pantalla. Si elegimos 50vh, ocupará la mitad de la pantalla. Muy fácil de utilizar.

Vista previa al reemplazar bloques

Vista previa al reemplazar bloque en Gutenberg

Si ya teníamos la vista previa de los bloques al pasar el puntero por encima de ellos en el panel izquierdo, ahora se añade también esta función cuando vayamos a reemplazar un bloque. Una forma de asegurarse que aquellas personas que aun no conocen que hace cada bloque, sepan en todo momento lo que van a añadir. O, en este caso, reemplazar.

Bordes redondeados en bloques Grupo e Imagen

Bloque Imagen en Gutenberg, con bordes redondeados

Gracias a la posibilidad de añadir clases a los bloques, mediante algunas líneas de CSS era bastante sencillo aplicar bordes redondeados a cualquier bloque. Pero dentro de poco, podremos hacerlo directamente desde el editor. Por el momento, se estrenará en los bloques Grupo e Imagen, aunque esperamos que se vaya ampliando a otro tipo de bloques.

Arrastrar y soltar bloques

Quizás una de las opciones que más van a asemejar a Gutenberg con cualquier page builder actual. Desde el panel izquierdo, podremos arrastrar y soltar cualquier bloque hasta el editor. Personalmente, no es una característica que vaya a usar mucho en el futuro. Pero seguro que muchos de vosotros la vais a agradecer para optimizar vuestro flujo de trabajo.

Y con esto terminamos. Estas eran las novedades de Gutenberg que queríamos enseñaros, y que estarán disponibles en pocos días una vez se lance WordPress 5.7. Vemos como poco a poco se van añadiendo funcionalidades interesantes, y que van convirtiendo al editor en un valor importante dentro de WordPress.

Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas y sugerencias. También, si sois usuarios habituales de Gutenberg, nos podéis decir que funciones echáis en falta en vuestro día a día al trabajar con Gutenberg.

Deja una respuesta

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