Novedades en WordPress 5.8

Después de ver las presentaciones en WordCamp Europe 2021 y, en particular, la charla entre Matt Mullenweg y Matias Ventura que incluía un video de las nuevas funciones que nos llegan en el editor de bloques, tenía muchas ganas de probar esta nueva versión de WordPress. 5.8 que está a punto de ser lanzado a mediados de julio.

Así que he instalado la versión de WordPress 5.8-beta2 para poder informarles sobre las nuevas funciones que se avecinan. Ten en cuenta que he probado esta versión con el tema Twenty Twenty-one de WordPress.org y puede suceder que algunas de las características mencionadas, dependiendo del tema que tengas instalado en tu sitio, no estén disponibles.

Bloques anidados y patrones de bloques

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 bloque es muy simple: son secciones predefinidas o fragmentos formados por un grupo de bloques que puedes usar en la creación de páginas y publicaciones. Los patrones de bloques pueden ser algo tan simple como una sección que muestra dos botones o una sección de precios con diseños llamativos y complejos, o incluso el diseño de una página completa.

Se está trabajando mucho para que la edición de bloques y patrones de bloques sea más fácil y cómoda. Y, en particular, para agilizar su inserción y desplazamiento. Para empezar, ahora podemos, de la lista de bloques y patrones que se muestra en la barra de menú del lado izquierdo, seleccionarlos y arrastrarlos al área de la página para insertarlos.

Recientemente, también se agregó el icono de arrastrar (icono de 6 puntos) para que pudiéramos mover cualquier bloque dentro del contenedor donde se encuentra.

Cuando esté en un bloque, presione Esc para cambiar al modo de selección y presione Enter para volver al modo de edición.

En el modo de selección (recuerde presionar Esc ), se optimiza la navegación entre la estructura de bloques. Moviendo 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 comprender la estructura y arrastrar bloques dentro del bloque principal.

Y ahora, con esta nueva versión, cuando cambias al modo de edición (presiona Enter ), al mover un bloque también se muestran los límites de su contenedor, por lo que el proceso de seleccionar, arrastrar y soltar es mucho más fácil e intuitivo.

Edición de imagen

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

Pero la gran novedad es que podemos editar y modificar las imágenes insertadas en el propio editor, sin necesidad de acudir a la Mediateca .

Además de los iconos para centrar y añadir un enlace de imagen , con WordPress 5.8 tenemos tres iconos nuevos: Recortar , Añadir Texto y Filtros Duotono .

Delimitar imagen

Al hacer clic en el ícono de recortar, aparecen tres opciones de menú adicionales: hacer zoom , cambiar la relación de aspecto y rotar la imagen .

Como puede ver, ya no necesita ir a la biblioteca de medios para que su imagen se vea como la necesita.

Filtros de duotono

Otra de las novedades que trae WordPress 5.8 es la posibilidad de filtrar cualquier imagen en duotono. Selecciona los dos colores del filtro que quieras aplicar a la imagen y listo, la imagen solo tendrá dos tonos.

Añadir texto

Este nuevo icono, el de añadir texto a una imagen, equivale a transformar la imagen en un bloque tipo portada. Y, por supuesto, después de este cambio, puede agregar el texto que desee al bloque de portada como lo ha hecho en el pasado.

Además, como puedes ver en las propiedades del bloque, ahora también puedes modificar el espaciado y agregar relleno al texto, para que el texto esté exactamente donde quieres que esté en la imagen. El relleno se puede definir igual o diferente para cada uno de los 4 lados del texto.

Personalmente, me parece genial que puedas agregar y realizar todas estas transformaciones directamente en el editor sin tener que ir a la biblioteca de medios. Aún así, si desea optimizar sus imágenes para SEO, me temo que aún tendrá que ir a la biblioteca.

Transformaciones de bloque

Al igual que hemos visto cómo transformar un bloque de tipo imagen a tipo portada, el editor de bloques ahora incorpora otro tipo de transformaciones. Por ejemplo, puede seleccionar tres párrafos y transformarlos en encabezados, columnas, una lista, etc. Y antes de realizar la transformación, se previsualiza la nueva apariencia de la transformación.

Del mismo modo, puede cambiar un conjunto de bloques de tipo de imagen a un bloque de tipo de galería de imágenes, o incluso un conjunto de botones, etc.

El bloque de la cubierta

Con todas estas novedades incluidas en el propio editor, el bloque de portada nos permite crear diseños muy diferentes a los que teníamos hasta ahora. Por ejemplo, ahora podemos tener dos bloques de portada anidados (con un relleno entre el hijo y el padre) y cada uno con su propio color, texto y enfoque.

El bloque de navegación

Otra gran característica nueva de la vista previa del editor de bloques en el video presentado en WordCamp es el nuevo bloque de navegación. Vemos que este bloque no está incluido en la versión beta instalada pero lo encontrarás en la última versión 10.8.1 del plugin de Gutenberg.

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

Aparte de indicar si quieres el menú horizontal o vertical, tienes varias opciones a la hora de crear el menú:

• Créelo a partir de un menú existente: puede optar por mostrar un menú que ya haya creado en su sitio.
• Créalo vacío: esto crea un menú en blanco para que agregues manualmente cada enlace que quieras mostrar en la navegación.
• Créelo desde todas las páginas de nivel superior: esto agregará automáticamente cada página existente en su sitio como un enlace, que luego puede editar y reorganizar. Aquí solo se agregan páginas de nivel superior.

Para agregar un nuevo enlace a la navegación, debe hacer clic en el ícono + que le permite elegir entre:

• Enlace de página: una página en su sitio.
• Enlace de publicación: una publicación en su sitio.
• Enlace de categoría: todas las publicaciones con una categoría específica.
• Enlace de etiqueta: todas las publicaciones con una etiqueta específica.
• Enlace personalizado: una URL externa.
• Iconos sociales: iconos para redes sociales.
• Buscar: un cuadro de búsqueda para que los visitantes busquen su contenido.

Una vez que haya creado cualquier menú, también tiene la opción de cambiar su estilo (fuente, fuente y color de fondo), agregar submenús, mover elementos, etc.

Así, con este bloque podrás crear diseños de menús de forma muy sencilla.

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

Diseño de plantilla

Otro gran cambio que nos llega con esta nueva versión del editor de WordPress es que el diseño de la plantilla está completamente integrado en el editor de bloques. De esta forma puedes crear una plantilla a partir de una página creada, y además agrega la opción de que en la barra lateral izquierda puedas listar su estructura.

Podemos movernos por la estructura de la plantilla y cada elemento está resaltado en el editor, por lo 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 Hay Más…

Y por último, en el vídeo presentado en WordCamp Europe también se nos mostró la opción de definir directamente en el editor de bloques estilos globales del tema para cambiar la paleta de colores, tipografía, etc. Por si aún te quedaban dudas, con esta nueva Con la versión 5.8 de WordPress, nos estamos acercando cada vez más al objetivo de no necesitar ningún otro creador de páginas para la creación de las páginas de su sitio web.

Imagen destacada de XPS en Unsplash .