Novedades que llegan con WordPress 5.8

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparación de dos variantes de la misma página mediante test A/B

Comparte este artículo

Tras ver las presentaciones de la WordCamp Europe 2021 y, en particular, la charla entre Matt Mullenweg y Matías Ventura que incluía un vídeo de las novedades que nos vienen en el editor de bloques, me entró el gusanillo de probar esta nueva versión de WordPress 5.8 que está a punto de lanzarse a mitad de julio.

Así que me he instalado la versión WordPress 5.8-beta2 para poderte comentar las nuevas funcionalidades que nos llegan e ir preparando motores. Ten en cuenta que esta versión la he probado con el tema Twenty Twenty-one de WordPress.org y puede ocurrir que alguna de las funcionalidades comentadas, dependiendo del tema que tengas instalado en tu sitio, no las tengas disponibles.

Bloques anidados y patrones

Con la llegada de WordPress 5.5, el editor de bloques incluyó el concepto de patrones de bloques. La idea de un patrón de bloques es muy sencilla: son secciones o fragmentos predefinidos formados por un grupo de bloques que puedes utilizar en la creación de páginas y entradas. Los patrones de bloques pueden ser algo tan simple como una sección en la que se muestran dos botones o un apartado de precios con diseños llamativos y complejos, o incluso el diseño de toda una página.

Se está trabajando mucho en facilitar que la edición de los bloques y los patrones de bloques sea más fácil y cómoda. Y, en particular, que la inserción y desplazamiento de ellos sea más rápido. Para empezar, se ha añadido la opción de que podamos, desde el listado de bloques y patrones que se muestran en la barra de menú lateral izquierda, seleccionarlos y arrastralos a la zona de la página en la que queremos insertarlos.

Captura de pantalla de la selección e inserción de un patrón en Gutenberg
Desde el listado de bloques y patrones puedes seleccionar y arrastrar el bloque o patrón que quieras para insertarlo directamente en tu página.

Recientemente también se incorporó el icono de arrastrar (icono de 6 puntitos) para que pudieramos mover cualquier bloque dentro del contenedor dónde se encuentra.

Opción de arrastrar un bloque en el editor de Gutenberg
Haciendo clic en el icono de arrastrar, puedes mover el bloque de tipo fondo que se encuentra dentro de un bloque tipo columna.

Cuando te posicionas en un bloque, con la tecla Esc puedes pasar a modo selección y con la tecla Intro volver a modo edición.

Modo selección en el editor de Gutenberg
En el editor de Gutenberg puedes cambiar de modo selección a edición con las telcas Intro y Esc.

En el modo selección (recuerda pulsar Esc), se optimiza la navegación entre la estructura de bloques. Al mover el ratón dentro de un bloque podemos ver los límites de cada uno de los bloques que contiene. De esta forma, es más fácil entender la estructura y arrastrar bloques dentro del bloque padre.

Captura de pantalla de la selección de un bloque anidado en el editor de bloques
En modo Selección, al ir moviendo el ratón en el bloque fondo, podemos ver lo límites de cada uno de los bloques que contiene.

Y ahora, con esta nueva versión, al cambiar a modo edición (pulsar en Intro), al mover un bloque también se visualizan los límites de su contenedor, de forma que el proceso de seleccionar, arrastrar y soltar es mucho más fácil e intuitivo.

Opción de arrastrar un bloque en el editor de WordPress 5.8
Captura de pantalla de la opción de arrastrar un bloque en el editor de WordPress 5.8.

Edición de imágenes

Siguiendo con la idea de mejorar la edición de los bloques, un bloque crítico es el bloque de tipo imagen. Ya hemos visto que ahora podemos insertar imágenes arrastrándolas en bloques de tipo imagen, texto y media, o en cualquier bloque de tipo contenedor como puede ser una columna.

Pero la gran novedad ahora con las imágenes insertadas es que, en el propio editor, sin necesidad de ir a la biblioteca de imágenes, podemos editarlas y modificarlas.

Opciones de edición de una imagen en el editor de bloques
Opciones de edición de una imagen en el editor de bloques.

Adicionalmente a los iconos de centrar y añadir enlace de una imagen, con WordPress 5.8 tenemos tres nuevos iconos: el de Recortar, el de Añadir Texto y el de Filtros duotono.

Recortar imágen

Al hacer clic en el icono de recortar imágen, nos aparecen tres opciones de menú adicionales: la de hacer zoom, cambiar el ratio de aspecto y rotar la imagen.

Captura de pantalla de la edición de una imagen en el editor de bloques
Tras seleccionar la opción de recortar, haz las modificaciones que quieras de zoom, aspecto y rotar, y aplica los cambios.

Como ves, ya no tienes ninguna necesidad de ir a la biblioteca de medios para que tu imagen tenga el aspecto que necesitas.

Filtros dúotono

Otra novedad que nos llega con WordPress 5.8 es la posibilidad de filtrar cualquier imágen en dúotono. Selecciona los dos colores del filtro que quieras aplicar a la imagen y ya está, la imagen sólo tendrá dos tonos.

Captura de pantalla de la opción de dúotono de imágenes en WordPress
Visualiza una imagen en sólo dos tonalidades con la opción de dúotono de imagen.

Añadir texto

Este nuevo icono, el de añadir texto a una imagen, es equivalente al de transformar la imagen a un bloque de tipo fondo. Y evidentemente, tras este cambio, ya puedes añadir el texto que quieras al bloque de tipo fondo como hayas hecho en otras ocasiones.

Captura de pantalla de la edición de un bloque tipo fondo en Gutenberg
Captura de pantalla de la edición de un bloque tipo fondo en Gutenberg.

Además, como puedes ver en las propiedades del bloque, ahora también puedes modificar el espaciado y añadirle padding al texto, de forma que el texto te quede exactamente donde quieras en la imagen. El padding puedes definirlo igual o distinto para cada uno de los 4 laterales del texto.

Personalmente, encuentro que está genial que puedas añadir y realizar todas estas transformaciones directamente en el editor sin necesidad de ir a la biblioteca de medios. Aún así, si quieres optimizar tus imágenes para el SEO, mucho me temo que tendrás que seguir yendo a la biblioteca.

Tranformaciones de bloques

De la misma forma que hemos visto cómo transformar un bloque de tipo imagen a tipo fondo, el editor de bloques ahora incorpora otro tipo de transformaciones. Por ejemplo, puedes seleccionar tres párrafos y transformarlos a encabezados, a columnas, a una lista, etc. Y antes de realizar la transformación, se previsualiza el nuevo aspecto que tendrá dicha transformación.

De forma similar, puedes cambiar un conjunto de bloques de tipo imagen a un bloque de tipo galería de imágenes, o incluso a un conjunto de botones, etc.

El bloque tipo fondo

Con todas estas nuevas funcionalidades incluídas en el propio editor, el bloque de tipo fondo nos permite crear diseños muy distintos a los que teníamos hasta ahora. Por ejemplo, ahora podemos tener dos bloques de tipo fondo anidados (con un padding entre el hijo y el padre) y cada uno con sus características de colores, sus textos y el enfoque que nos parezca adecuados.

Imagen mostrando dos bloques de tipo fondo anidados en Gutenberg
Imagen mostrando dos bloques de tipo fondo anidados.

El bloque de navegación

Otra de las grandes novedades del editor de bloques que avanzan en el vídeo presentado en la WordCamp es el nuevo bloque de navegación. Vemos que este bloque no está incluido en la versión beta instalada pero sí que la encontrarás en la última versión 10.8.1 del plugin Gutenberg.

El bloque navegación de Gutenberg
El bloque navegación de Gutenberg.

Este bloque te permite añadir en cualquier página, un menú de enlaces para que tus visitantes puedan ir a cualquier otra página. No pretende ser un sustituto a los menús de navegación que ya conocemos de WordPress, pero sí una alternativa para cuando te interese insertar algún menú adicional en una página.

Aparte de indicar si quieres el menú horizontal o vertical, tienes varias opciones cuando creas dicho menú:

Creación de un menú de navegación en Gutenberg
Opciones en la creación de un menú de navegación en eñ editor de bloques.
  • Crearlo a partir de un menú existente: puedes elegir mostrar un menú que ya tienes creado en tu sitio.
  • Crearlo vacío: esto crea un menú en blanco para que añadas manualmente cada enlace que quieras mostrar en la navegación.
  • Crearlo a partir de todas las páginas de nivel superior: esto agregará automáticamente cada página existente de tu sitio como un enlace, que luego puedes editar y reorganizar. Aquí sólo se añaden las páginas de nivel superior.

Para añadir un nuevo enlace a la navegación, tienes que hacer clic en el icono + que te permite elegir entre:

Añadir elemento en el menú de navegación
  • Enlace de página: una página de tu sitio.
  • Enlace de entrada: una entrada de tu sitio.
  • Enlace de categoría: todas las entradas con una categoría específica.
  • Enlace de etiqueta: todas las entradas con una etiqueta específica.
  • Enlace personalizado: una URL externa.
  • Iconos sociales: iconos para las redes sociales.
  • Búsqueda: un cuadro de búsqueda para que los visitantes busquen en tu contenido.

Una vez creado cualquier menú, también tienes opción de cambiar su estilo (tipografía y color de fuente y fondo), añadir submenús, mover los elementos, etc.

Propiedades del menú de navegación
Propiedades del menú de navegación.

De esta forma, con este bloque puedes crear diseños de menús muy fácilmente.

Menú creado con el bloque de navegación
Menú creado con el bloque de navegación.

Como ves, este nuevo tipo de bloque ofrecerá muchas más posibilidades en el diseño de nuestras páginas y entradas.

Diseño de plantillas

Otro gran cambio que nos viene con esta nueva versión del editor de WordPress es que el diseño de plantillas se integra totalmente en el editor de bloques. De esta forma puedes crear una plantilla a partir de una página creada, y también se añade la opción de que en la barra lateral izquierda puedas listar de listar la estructura de la misma.

Diseño de una plantilla en WordPress
Diseño de una plantilla en WordPress. A la izquierda podemos ver la estructura de la plantilla.

Podemos movernos por la estructura de la página o entrada y cada elemento se va viendo resaltado en el editor, de forma que es muy fácil hacer cambios donde corresponda y tienes una vista rápida de todos los elementos anidados en cada bloque contenedor.

Y aún hay más…

Y finalmente, en el vídeo que nos presentaron en la WordCamp también nos mostraron la opción de definir directamente en el editor de bloques estilos globales del tema para cambiar la paleta de colores, la tipografía etc. Por si todavía tenías alguna duda, con esta nueva versión WordPress 5.8 cada vez nos vamos acercando más al objetivo de que no necesites ningún otro maquetador visual para la creación de las páginas de tu web.

Imagen destacada de XPS en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

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

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.