¡Ya está aquí WordPress 5.9 Josephine! El lanzamiento de la primera versión de WordPress del año estaba previsto inicialmente para el 14 de diciembre de 2021. Debido a varios problemas abiertos y errores no resueltos, la versión final se había retrasado y finalmente se ha lanzado el 25 de enero de 2022.

Si te preguntas qué hay de nuevo en WordPress 5.9, la respuesta corta es la edición completa del sitio (FSE- Full Site Editing).

Y, de hecho, muchas de las características de la versión 5.9 sólo están disponibles si utilizas un tema compatible con el Full Site Editing del sitio, como el nuevo tema por defecto, Twenty Twenty-Two.

Twenty Twenty-Two preview, showing the text "Category: Birds" and pictures of various types of birds.
Una vista previa de Twenty Twenty-Two, el nuevo tema por defecto de WordPress. (Fuente de la imagen: WordPress.org)

Con WordPress 5.9, llegamos al corazón de la segunda fase de la hoja de ruta de Gutenberg: la fase de personalización, que se centra principalmente en el Full Site Editing, los patrones de bloques, el directorio de bloques y los temas basados en bloques.

Con la 5.9, que saldrá el mes que viene, estamos -diría- en el MVP, el Producto Mínimo Viable de esta fase de personalización de Gutenberg.

Estas palabras de Matt Mullenweg en 2021 State of the Word resumen mejor las características clave de la nueva versión de WordPress.

The Gutenberg roadmap, showing four blocks for their four main goals for improvement: easier editing, customization, collaboration, and multilingual.
La hoja de ruta de Gutenberg. (Fuente de la imagen: Matt Mullenweg: 2021 State of the Word)

Dicho esto, ¿qué novedades presenta la primera versión de WordPress de 2022?

¡Averigüémoslo!

Estilos globales: Una interfaz gráfica para theme. json

Con el lanzamiento de WordPress 5.8 en 2021, la manipulación del archivo theme.json se convirtió en la forma estándar de los desarrolladores de temas para personalizar la configuración y los estilos del editor.

WordPress 5.9 lleva las cosas al siguiente nivel al introducir una interfaz gráfica que permite a los usuarios personalizar los preajustes de estilo para sus sitios web, ya sea de forma global o a nivel de bloque, sin escribir una sola línea de código.

El mecanismo de Estilos Globales debería alterar significativamente la forma en que estás acostumbrado a personalizar la apariencia de tus sitios web, ya que los Estilos Globales afectan a varios aspectos del diseño de los sitios de WordPress.

En primer lugar, la interfaz de Estilos Globales sustituye al Personalizador y es ahora la única forma de personalizar la configuración y los estilos con los temas en bloque. Asimismo, ya no serán necesarias las complejas páginas de administración de opciones de temas. Esto proporciona una nueva forma estándar de configurar los ajustes y estilos del tema y, al mismo tiempo, debería agilizar el flujo de trabajo de desarrollo del tema.

Con los Estilos Globales, los usuarios de WordPress ganan más control sobre la presentación de sus sitios web, tanto globalmente como por tipo de bloque, más allá del contexto de las páginas o entradas individuales.

Ahora hay una nueva barra lateral en el editor del sitio, en cuya parte superior encontrarás un pequeño panel de vista previa y cuatro componentes en el siguiente orden:

Podemos esperar que se añadan nuevos componentes con el tiempo.

The Global Styles sidebar open on a WordPress page that's using the Twenty Twenty-Two theme, showing typography options such as
La barra lateral de Estilos Globales con el tema Blockbase de Automattic.

Echemos un vistazo más de cerca a la nueva interfaz.

Vista previa de los estilos

El primer elemento de la barra lateral de Estilos Globales es un panel de vista previa. Este panel te permite comprobar el resultado de tus personalizaciones y es especialmente útil cuando tus cambios se aplican a elementos no visibles en el lienzo del editor del sitio.

La siguiente imagen muestra tres combinaciones de estilos diferentes comparadas:

Global Styles previews for three styles of different colors (green, yellow, and navy) shown side by side.
Vista previa de Estilos Globales comparada.

Tipografía

El panel de Tipografía es donde controlas la tipografía de tu sitio web. Por supuesto, los controles disponibles en este panel dependen de la configuración de tu theme.json.

Por ejemplo, el tema Twenty Twenty-One Blocks (TT1 Blocks) declara las siguientes propiedades de tipografía:

"settings": {
	"typography": {
		"customLineHeight": true,
		"fontSizes": [],
		"fontFamilies": []
	}
}

La siguiente imagen muestra los ajustes de tipografía resultantes en la barra lateral de Estilos Globales:

Typography settings in TT1 Blocks Global Styles, showing three side-by-side panels with various typography options such as font family, text size, and colors.
Configuración de la tipografía en los Estilos Globales de TT1 Blocks.

Profundicemos un poco más y veamos cómo el tema TT1 Blocks declara fontFamilies:

"fontFamilies": [
	{
		"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
		"slug": "system-font",
		"name": "System Font"
	},
	{
		"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
		"slug": "helvetica-arial"
	},
	{
		"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
		"slug": "geneva-verdana"
	},
	{
		"fontFamily": "Cambria, Georgia, serif",
		"slug": "cambria-georgia"
	},
	{
		"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
		"slug": "hoefler-times-new-roman"
	}
]

Puedes comprobar estas familias tipográficas en el panel de vista previa de Estilos Globales:

Six different previews of the same text ("Aa") with different font families applied.
Familias de fuentes disponibles en Twenty Twenty-One Blocks.

Colores

En la sección Colores, puedes ver y editar las paletas de colores y personalizar el color de varios elementos del sitio.

Panel de colores en los Bloques TT1, mostrando una paleta de cuatro colores diferentes (rojo, azul marino, plata y verde).
Paleta de colores en Twenty Twenty-One Blocks

Al hacer clic en esos elementos, accedes a un nuevo panel en el que puedes elegir los colores de tres paletas de colores: Paleta del núcleo, del tema y personalizada (lee más en Colores por defecto, Colores del tema y Colores personalizados).

Configuración de los colores de los bloques TT1, mostrando varios círculos de color para tres opciones de paleta distintas: Tema, Predeterminado y Personalizado.
Ajustes de color en Twenty Twenty-One Blocks

En este panel, podrás establecer y modificar el color del elemento actual.

A color picker selecting a deep red color in the Global Styles panel.
Personalizar el color de los enlaces en Estilos Globales.

Diseño

El último grupo de herramientas está destinado a la personalización del diseño. En el contexto global, esto se limita al contenedor del sitio.

La configuración del relleno global en el panel de Estilos Globales, mostrando una alteración del tamaño de los píxeles del relleno anterior.
Configuración del diseño en los bloques de Twenty Twenty-One.

Bloques

Con la implementación del mecanismo de Estilos Globales, ahora también es posible cambiar la apariencia de bloques específicos, como Párrafo (tipografía y colores), Botones (diseño) y Columna (colores y diseño).

Ten en cuenta que los estilos de los bloques pueden personalizarse desde la interfaz de Estilos Globales sólo si el bloque declara la compatibilidad con una funcionalidad específica en el archivo block.json correspondiente. Por ejemplo, el bloque core/post-title admite actualmente los siguientes estilos:

"supports": {
	"align": [ "wide", "full" ],
	"html": false,
	"color": {
		"gradients": true,
		"link": true
	},
	"spacing": {
		"margin": true
	},
	"typography": {
		"fontSize": true,
		"lineHeight": true,
		"__experimentalFontFamily": true,
		"__experimentalFontWeight": true,
		"__experimentalFontStyle": true,
		"__experimentalTextTransform": true,
		"__experimentalLetterSpacing": true,
		"__experimentalDefaultControls": {
			"fontSize": true,
			"fontAppearance": true,
			"textTransform": true
		}
	}
},

Como el bloque core/post-title admite colores, espaciado y tipografía, encontrarás las entradas correspondientes en la configuración de Estilos Globales del bloque Título de la publicación.

La siguiente imagen muestra la configuración de la tipografía, que puedes comparar fácilmente con el código anterior:

Ajustes de la tipografía del título de la entrada en WordPress 5.9, mostrando una amplia variedad de opciones, incluyendo (entre muchas otras) el título de la entrada (que está resaltado), el autor de la entrada, la tabla, el título del sitio y la navegación.
Personalización de la configuración de la tipografía del título de la entrada

Hay que tener en cuenta que WordPress 5.9 sólo ofrece la primera implementación de la interfaz de Estilos Globales. Como señala Matias Ventura, podemos esperar razonablemente un mayor desarrollo de la nueva función de control de estilos:

En el futuro, habrá flujos integrados en el sistema que te permitirán pasar de los estilos locales a los globales, como por ejemplo, hacer personalizaciones en un bloque de botones y optar por aplicarlas globalmente a todos los botones de ese tipo.

Así que es posible que pronto veamos mejoras importantes. La imagen de abajo es sólo un ejemplo de lo que podemos esperar:

Una maqueta de un posible panel futuro para cambiar los colores del estado de los enlaces, incluyendo las opciones de Reposo, Pasado, Enfocado y Seleccionado.
En el futuro, podrás controlar el color del estado del enlace. (Fuente de la imagen GitHub)

Otras mejoras podrían incluir la posibilidad de que los temas ofrezcan paletas de colores alternativas y múltiples variaciones de estilo globales.

Los desarrolladores pueden profundizar en el mecanismo de estilo global en el artículo de soporte Ajustes y Estilos Globales (theme.json). Encontrarás ejemplos adicionales en nuestra introducción al tema por defecto Twenty Twenty-Two.

El bloque de navegación

El bloque de navegación ha sido calificado como «uno de los bloques temáticos más impactantes», y no tememos decir que estamos de acuerdo.

El bloque ha estado en fase embrionaria durante un tiempo (consulta también el tema de seguimiento del bloque de navegación y el tema de seguimiento i2). Aun así, ahora que se han solucionado todos los problemas pendientes y los bloqueos enumerados como imprescindibles en WordPress 5.9, por fin podemos empezar a utilizar una de las funciones más potentes incorporadas al núcleo con WordPress 5.9.

Una rápida visión de la interfaz del bloque de navegación

El uso del nuevo bloque puede ser un poco confuso al principio, pero una vez que le cojas el tranquillo, apreciarás todo su potencial.

The Navigation block placeholder in WordPress 5.9, showing options for the navigation panel, including "Select menu", "Add all pages", and "Start empty".
El marcador de posición del bloque de navegación

Cuando añades por primera vez un bloque de navegación, el marcador de posición del bloque ofrece tres opciones para seleccionar un menú basado en un bloque existente, crear un menú con todas las páginas o empezar de cero con un menú vacío.

Selecting an existing navigation menu.
Seleccionando un menú de navegación existente.

El nuevo menú de navegación también te permite importar menús creados a través de la pantalla de menús de apariencia que está disponible con los temas clásicos.

Esto significa que si estás pasando de un tema clásico a un tema de bloques, no tendrás que reconstruir tus menús existentes. Sólo tienes que elegir uno de tus «menús clásicos» actualmente disponibles, y se convertirá automáticamente en un menú de navegación basado en bloques.

Selecting a classic menu.
Seleccionando un menú clásico.

Puedes añadir el bloque de navegación en cualquier lugar de tus páginas. Por ejemplo, puede resultarte útil en los artículos largos para crear una tabla de contenidos, que permita a los usuarios saltar a secciones de contenido específicas.

Adding anchor links to a Navigation menu.
Añadiendo enlaces de anclaje a un menú de Navegación.

Los nuevos enlaces de navegación se añaden instantáneamente al bloque de navegación haciendo clic en el icono del signo más (+) de la derecha (consulta también las notas de la versión 11.7 de Gutenberg), a menos que ya se hayan añadido otros tipos de bloques al menú.

The Navigation block appender, showing navigation links.
El anexo del bloque de Navegación, mostrando los enlaces de navegación.

Al hacer clic en el botón Editar de la barra de herramientas del bloque de Navegación, un elemento del menú se convierte en un enlace personalizado. Esto te permite añadir, editar, reordenar y eliminar elementos individualmente.

Converting a navigation menu to individual page links.
Convirtiendo un menú de navegación en enlaces de páginas individuales.

También puedes transformar los enlaces en bloques haciendo clic en el botón Transformar de la barra de herramientas de bloques. Esto te permite añadir bloques específicos directamente al menú de navegación.

Transforming navigation links to blocks.
Transformando enlaces de navegación en bloques.

Los bloques Enlace personalizado, Espaciador, Logotipo del sitio, Enlace de inicio, Iconos sociales y Búsqueda están ahora expuestos a los usuarios al añadir bloques a los menús de navegación.

En la barra lateral de Configuración, encontrarás un amplio conjunto de opciones para controlar varios aspectos de tus menús de navegación.

El panel de Diseño incluye controles para la justificación, la orientación y la envoltura.

Navigation block layout settings.
Configuración del diseño del bloque de navegación

El bloque de navegación también cuenta con un panel de configuración de visualización mejorado con una opción para un menú de hamburguesa siempre activo.

Navigation block Display settings panel for the Navigation block.
Un panel mejorado de ajustes de visualización para el bloque de Navegación.

También puedes personalizar el texto y los colores de fondo de tus menús y submenús.

Navigation block color settings.
Configuración del color del bloque de navegación.

Otra útil adición añadida recientemente al bloque de Navegación es la compatibilidad con la separación de bloques, que añade la posibilidad de que los usuarios controlen la distancia entre los elementos del menú.

Navigation block spacing.
Control del espacio entre bloques en el bloque de Navegación.

El panel de Tipografía proporciona un conjunto de controles para la familia de fuentes, la apariencia, la altura de las líneas, la decoración y las mayúsculas y minúsculas. Todos estos controles pueden activarse y desactivarse desde un menú desplegable que aparece cuando haces clic en el icono de la elipsis de la derecha.

Navigation block typography settings.
Configuración de la tipografía del bloque de navegación.

El bloque de navegación: Bajo el capó

Los datos del bloque de navegación se almacenan en la base de datos utilizando un tipo de post dedicado a wp_navigation.

¿Por qué es esto interesante para los usuarios de WordPress y cómo funciona?

Digamos que has creado un menú de navegación compuesto por dos enlaces personalizados y un cuadro de búsqueda. Con el tema Twenty Twenty-Two instalado, el menú podría tener el aspecto que se muestra en la siguiente imagen:

Navigation block example.
Ejemplo de bloque de navegación

El bloque de navegación anterior se almacena en la base de datos como wp_navigation post type como sigue:

<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Almacenar el contenido del bloque de Navegación en la base de datos permite a los usuarios utilizar los mismos menús de navegación en diferentes temas de bloques. Si el menú no es visible de inmediato, basta con elegir el menú de navegación deseado en el selector de menús (ver también el tema #36087 y el PR #36178).

La siguiente imagen muestra el menú anterior con el tema de bloques Twenty-One:

Select menu in Twenty Twenty-One Blocks.
Selecciona el menú en Twenty Twenty-One Blocks.

El bloque Navegación ha pasado por varias iteraciones. Puedes profundizar en cada implementación en las notas de la versión de Gutenberg 11.7, 11.8 y 11.9.

También puedes leer más sobre el bloque de navegación en el artículo The new Navigation block dev note y Navigation block support.

Galerías de imágenes, imágenes destacadas e iconos del sitio

Con el objetivo de que las imágenes se comporten de forma más coherente en diferentes contextos, WordPress 5.9 ofrece nuevas características y mejoras en varios bloques. El bloque Galería ha sido completamente revisado, mientras que varios cambios en los bloques Imagen destacada e Icono del sitio dan a los usuarios un control más granular sobre las respectivas imágenes.

Un bloque de galería refactorizado

En WordPress 5.8, la capacidad de personalizar la apariencia de las imágenes en las galerías es algo limitada. No había forma de cambiar el estilo de la imagen ni de aplicar un filtro de duotono.

Además, faltaban funciones importantes en las imágenes de las galerías, como añadir enlaces personalizados a las imágenes individuales de una galería.

Para entender mejor la razón de esta asimetría entre las imágenes en los dos contextos diferentes de una sola imagen y una imagen en una galería, echemos un vistazo al bloque Galería en la vista de Código en WordPress 5.8:

Gallery block in code view in WordPress 5.8.
Bloque de Galería en la vista de código en WordPress 5.8.

Ten en cuenta que los detalles de las imágenes sólo se almacenan en el delimitador del bloque de la Galería (consulta también ¿Qué es un bloque Gutenberg?).

Gallery block in WordPress 5.8.
Inspección del bloque Galería en WordPress 5.8.

Esto hizo que las imágenes individuales se comportaran de forma diferente a las imágenes de las galerías.

Para que las imágenes se comporten de forma coherente en los dos contextos diferentes, WordPress 5.9 introduce un bloque Galería completamente refactorizado, que ahora se comporta como un contenedor para una colección de elementos de figuras en lugar de una lista desordenada de imágenes.

En WordPress 5.9, las imágenes de la galería se anidan utilizando las APIs del núcleo innerBlocks , y cada imagen almacena su propio conjunto de detalles, exactamente como las imágenes individuales.

Gallery block in code view in WordPress 5.9.
Bloque de galería en la vista de código en WordPress 5.9

Se trata de una gran mejora, ya que las imágenes del bloque Galería admiten ahora las mismas características disponibles en los bloques de Imagen principales, como las dimensiones de la imagen y los filtros de duotono, así como las características estándar del bloque, como las funcionalidades de arrastrar y soltar, copiar, duplicar y eliminar.

Gallery block in WordPress 5.9.
Inspección del bloque Galería en WordPress 5.9

Con el nuevo bloque Galería, podrás estilizar las imágenes individualmente. Esto otorga una amplia gama de oportunidades de personalización.

La imagen de abajo muestra varias imágenes en una galería, cada una con esquinas redondeadas de forma diferente:

The new Gallery block.
El nuevo bloque Galería es una envoltura para los bloques individuales de Imagen.

También puedes utilizar diferentes filtros de duotono en distintas imágenes de la misma galería.

Duotone filters applied to different images in a Gallery block.
Diferentes filtros de duotono aplicados a diferentes imágenes en un bloque de Galería

Y, por supuesto, puedes asignar una clase CSS específica a cada imagen, lo que te da superpoderes adicionales para añadir cualquier personalización que necesites a las imágenes de tu galería.

Para ver más de cerca el nuevo bloque de Galería, consulta también Gallery Block Refactor Dev Note, Próximas mejoras del bloque de Galería y las notas de la versión 11.4 de Gutenberg.

Mejoras en las imágenes destacadas

También se han introducido varias mejoras en el bloque Imagen destacada.

Controles de dimensiones básicas

El bloque Imagen destacada cuenta ahora con un nuevo panel de configuración de Dimensiones que proporciona controles de altura, anchura y escala.

Featured Image Dimensions panel.
Panel de Dimensiones de la Imagen Destacada.

El control de las dimensiones también se aplica a las imágenes destacadas en los bloques del Bucle de Consulta, como se muestra en la siguiente imagen:

Featured Image dimensions controls in a Query Loop block.
Dimensiones de las imágenes destacadas en un bloque de bucle de consulta.

Filtros de duotono en las imágenes destacadas

Ya hemos mencionado que ahora podemos aplicar el filtro duotono en las imágenes envueltas en el nuevo bloque de Galería refactorizado.

Ahora, a partir de WordPress 5.9, los filtros de duotono también están disponibles en los bloques de Imágenes Destacadas en cualquier contexto, desde las plantillas de entradas y páginas hasta los bloques de Query Loop.

Duotone filter on featured images in a Query Loop block.
Filtro duotono en imágenes destacadas en un bloque Query Loop.

Esta función abre la puerta a combinaciones de colores creativas y coherentes en todo el sitio.

Recortar imágenes en el logotipo del sitio

Antes de WordPress 5.9 (y Gutenberg 11.6), las imágenes del logotipo sólo podían editarse antes de subirlas. Con WordPress 5.9, puedes recortar, ampliar y girar las imágenes utilizadas en el bloque Logotipo del Sitio directamente desde la barra de herramientas del bloque.

Editing Site Logo image.
Editando la imagen del Logotipo del Sitio.

Nuevas herramientas de diseño, bloques y mejoras en la interfaz de usuario

Once versiones de Gutenberg se fusionan en el núcleo con WordPress 5.9, ofreciendo tantas características, mejoras y correcciones de errores que no sería posible abarcarlas todas en un solo artículo.

Así que hemos elegido algunas de las que nos han parecido más dignas de atención. Para obtener una visión más profunda de esas características y mejoras, también puedes consultar las publicaciones de la versión de Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 y 11.9.

Dicho esto, esta sección cubrirá los siguientes cambios:

La interfaz de usuario compatible con los bordes

A partir de WordPress 5.9, cuando el theme.json declare la configuración de border y un bloque declare la compatibilidad con los bordes a través de la API de compatibilidad de bloques, un nuevo panel de configuración proporcionará controles para el radio, la anchura, el estilo, el color y las unidades de los bordes(véase también Gutenberg 11.1).

El bloque principal de Grupo es un buen ejemplo de esta útil mejora de la interfaz de usuario. El archivo block.json del bloque Grupo incluye ahora las siguientes declaraciones supports:

{
	...
	"supports": {
		"align": [ "wide", "full" ],
		"anchor": true,
		"html": false,
		"color": {
			"gradients": true,
			"link": true
		},
		"spacing": {
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		...
	},
	...
}

Esta función permite a los usuarios crear impresionantes efectos gráficos en sus sitios web con un esfuerzo mínimo. Puedes verlo en acción con el nuevo tema Twenty Twenty-Two.

En una nueva entrada o página, crea un nuevo bloque de grupo y selecciónalo. Verás un panel de bordes en la barra lateral de configuración del bloque. Cambia el ancho y el estilo del borde según sea necesario y disfruta del resultado.

A Group block with a custom border configuration with Twenty Twenty-Two.
Un bloque de Grupo con una configuración de borde personalizada con Twenty Twenty-Two.

Si eres un desarrollador de temas y quieres añadir esta función a tus temas, abre tu archivo theme.json y declara la compatibilidad con los bordes como se muestra en el siguiente código:

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		}
	}
}

Guarda el archivo y vuelve a tu panel de control de WordPress. En una nueva entrada o página, crea un nuevo bloque de grupo y selecciónalo. Ahora deberías ver un panel de bordes en la barra lateral de configuración del bloque (consulta también este theme.json experimental).

Mejoras en la vista de lista

Con WordPress 5.9, una vista de lista ha sido mejorada y ahora cuenta con la función de arrastrar y soltar, secciones plegables y anclajes HTML.

Arrastrar y soltar en la vista de lista

Como se menciona en el pull request #33320, se ha implementado la función de arrastrar y soltar en el Esquema pero se ha desactivado por problemas de rendimiento.

A partir de WordPress 5.9, se ha reimplementado la función de arrastrar y soltar en el Esquema. Puedes volver a arrastrar y soltar bloques y grupos de bloques en cualquier lugar de la Vista de Lista. Esta es una gran mejora en la usabilidad del editor, ya que te permite mover rápida y fácilmente bloques y grupos de bloques por tus páginas. Es fundamental en artículos y páginas de formato largo, y en la gestión de estructuras complejas de bloques anidados.

Drag and drop in List View.
Arrastrar y soltar en la vista de lista.

Secciones colapsables en la vista de lista

Otra mejora significativa de la Vista de Lista es la posibilidad de expandir/contraer secciones de bloques anidados. Esto te permite navegar fácilmente por estructuras de bloques complejas, expandiendo grupos individuales de bloques mientras dejas todo el resto colapsado.

También puedes expandir y contraer las secciones de la Vista de Lista utilizando las flechas izquierda y derecha.

An expanded group of blocks .
Un grupo expandido de bloques.

Anclas HTML en los elementos de la vista de lista

Otra mejora útil es la posibilidad de añadir anclas HTML a tus bloques en la Vista de Lista y verlas de un vistazo.

HTML anchors in List View.
Anclas HTML en la Vista de Lista.

Control del espacio entre bloques

Introducido por primera vez en Gutenberg 11.4 y ahora incorporado al núcleo con WordPress 5.9, el nuevo control de espacio de bloques te permite establecer una distancia personalizada entre los elementos de un bloque. A continuación, puedes ver una vista previa con diferentes valores de espaciado entre bloques en un bloque Columnas con el tema predeterminado Twenty Twenty-Two:

Controlling Columns Block spacing in WordPress 5.9.
Controlando el espaciado de bloques de Columnas en WordPress 5.9.

El espaciado de huecos estará disponible inicialmente para bloques específicos, incluyendo botones, imágenes, columnas, títulos y navegación, pero el soporte debería extenderse a más bloques en el futuro.

Los temas deben activar el espaciado de separación en theme.json utilizando la nueva propiedad appearanceTools. Puedes leer más sobre los appearanceTools en nuestra inmersión profunda en Twenty Twenty-Two. Consulta también los pull requests #33991 y #34630.

Vista previa de la URL enriquecida para el control de enlaces

Aprovechando el nuevo punto final REST url-details, el control de enlaces proporciona ahora una vista previa de la URL enriquecida que muestra los detalles de un recurso de destino de enlace.

Rich URL preview in the post editor.
Vista previa de la URL enriquecida en el editor de entradas.

En su primera implementación, esta función sólo estaba disponible en el componente richtext del editor de entradas. En el momento de escribir este artículo, también está disponible en el Editor de Sitios, pero no en los editores de Navegación y Widgets.

Crear páginas desde la ventana emergente de enlaces

WordPress 5.9 también presenta una interfaz de usuario de enlaces en línea mejorada, que muestra un nuevo botón para crear nuevas páginas directamente desde la ventana emergente de enlaces en línea. Esta función sólo está disponible en el Editor de Publicaciones.

Create pages from link popup.
WordPress 5.9 presenta una nueva interfaz de usuario de enlaces en línea.

Mejoras en el bloque de búsqueda

El Bloque de Búsqueda ahora muestra la configuración del color del botón y del borde.

Search Block Color settings.
Configuración del color del bloque de búsqueda.

Ahora también puedes personalizar el color del fondo y del texto y el color y el radio de los bordes.

Search Block border color and radius settings.
Ajustes de color y radio del Bloque de Búsqueda.

Nuevos controles para las dimensiones de los bloques

Ahora hay un nuevo panel de configuración de Dimensiones para que los usuarios puedan controlar el espacio que ocupa un bloque en la página. El panel incluirá controles de altura, anchura, padding, margen y posiblemente alineación, pero no todos los atributos estarán disponibles para todos los bloques.

Group block dimensions panel.
Control de padding para un bloque de grupo en WordPress 5.9.

Los desarrolladores de bloques encontrarán el componente <DimensionControl /> documentado en GitHub, pero ten en cuenta que todavía está marcado como una función experimental y podría estar sujeto a cambios de ruptura en el momento de escribir este artículo.

Se ha añadido un nuevo bloque de grupo de widgets a la pantalla de widgets

Ahora hay un nuevo bloque de grupo de widgets disponible en el editor de widgets basado en bloques. El último bloque te permite añadir un grupo de bloques en un widget con un título en el Editor de Widgets de los temas clásicos y en el Personalizador.

Widget Group block in the Twenty Twenty-One theme.
Bloque de Grupo de Widgets en el tema Twenty Twenty-One.

Puedes leer más sobre el editor de widgets en Editor de widgets por bloques y Widgets por bloques en el personalizador.

Flex Layout y el nuevo bloque de filas

Introducido originalmente como una característica experimental con Gutenberg 11.2, el diseño flexible se ha extendido a varios bloques, incluyendo los bloques de Enlaces Sociales y de Grupo.

Algunos bloques, como el de Enlaces Sociales, ofrecen ahora un conjunto de controles de la barra de herramientas y ajustes de la barra lateral que te permiten personalizar el diseño flexible.

Layout controls in the Social Links block toolbar.
Controles de diseño en la barra de herramientas del bloque Enlaces sociales.

Esta misma funcionalidad está disponible en el bloque Navegación y en el bloque Fila, una nueva variación del bloque Grupo introducida con Gutenberg 11.5.

La siguiente imagen muestra el bloque Fila con controles de diseño en la barra lateral de ajustes:

The new Row block with Layout settings.
El nuevo bloque Fila con los ajustes de diseño.

A continuación, puedes ver el mismo bloque Row en el frontend y en la herramienta de inspección de Chrome.

A Row block in Chrome inspector tool.
Un bloque Fila en la herramienta de inspección de Chrome.

Mejoras en el patrón de bloques

Introducidos por primera vez en WordPress 5.5, los patrones de bloques permiten a los usuarios de WordPress incluir en su contenido complejas estructuras de bloques anidados listas para usar con sólo unos pocos clics.

Ahora, WordPress 5.9 da un paso más hacia la democratización del diseño y el empoderamiento del usuario al introducir un par de mejoras en el sistema de patrones de bloques.

Entonces, ¿qué hay de nuevo en los patrones de bloques en WordPress 5.9?

Patrones destacados del directorio de patrones

El insertador de bloques muestra ahora patrones de bloques destacados recuperados dinámicamente del directorio de patrones, proporcionando a los usuarios una forma rápida y fácil de encontrar patrones populares para utilizar en sus contenidos.

Buttons block patterns in WordPress 5.9.
Patrones de bloques de botones en WordPress 5.9.

Del mismo modo, a medida que los patrones llegan directamente al panel de control de WordPress, los desarrolladores de WordPress deberían animarse a crear y publicar más y más patrones con el tiempo, lo que dará lugar a capacidades de diseño cada vez más avanzadas para los usuarios.

Un nuevo explorador de patrones a pantalla completa

Como el número de patrones de bloques disponibles en el Directorio de Patrones sigue creciendo y más temas los utilizan, WordPress 5.9 introduce una nueva interfaz de navegación de patrones de bloques: el Explorador de Patrones.

Fullscreen pattern modal in WordPress 5.9.
Modalidad de patrones a pantalla completa en WordPress 5.9.

Un nuevo botón de Exploración abre ahora un modal a pantalla completa que permite a los usuarios explorar, buscar e insertar patrones de bloques con sólo unos clics. El resultado es una experiencia de usuario mejorada.

Featured block patterns in the block inserter.
Patrones de bloques destacados en el insertador de bloques.

También encontrarás notas adicionales y varios ejemplos de patrones de bloques en nuestra inmersión profunda en el tema Twenty Twenty-Two de WordPress.

Si te interesa y quieres saber más, escucha los episodios 16 y 21 del podcast de Josepha Haden Chomphosy, y mira el vídeo de YouTube Explorando WordPress 5.9 de Anne McCarthy.

El tema Twenty Twenty-Two y los temas en bloque de WordPress

Con WordPress 5.9, ya no necesitarás instalar el plugin Gutenberg para habilitar el Full Site Editing en tu sitio web de WordPress. Sólo tendrás que permitir un tema en bloque para aprovechar todas las funciones de FSE.

Además, WordPress 5.9 incluye un nuevo tema por defecto, Twenty Twenty-Two, que cambia las reglas del juego, ya que Twenty Twenty-Two es el primer tema por defecto en bloque de la historia.

Twenty Twenty-Two es un tema muy flexible y personalizable. Proporciona una caja de arena perfecta para probar el nuevo flujo de edición de plantillas, los nuevos bloques, las mejoras de la interfaz y todas las funciones de edición del sitio añadidas al núcleo, a partir de WordPress 5.9.

Twenty Twenty-Two preview.
Twenty Twenty-Two es el nuevo tema por defecto de WordPress. (Fuente de la imagen: WordPress.org)

Como se ha mencionado anteriormente, todo lo que tienes que hacer es instalar y activar un tema en bloque, como Twenty Twenty-Two. Una vez que el tema esté activo, aparecerá un nuevo elemento de menú Editor (beta) en el menú de administración del panel de WordPress.

The new Appearance Menu in WordPress 5.9.
El nuevo menú de apariencia en WordPress 5.9.

La interfaz del Editor del Sitio cuenta ahora con un flujo de edición del sitio renovado. Desde la interfaz de edición, podrás editar visualmente la página de inicio del sitio, las plantillas y las partes de la plantilla, así como acceder a la interfaz de Estilos Globales.

The Editor navigation menu.
El menú de navegación del Editor.

Cuando actives un tema en bloque, no encontrarás el Personalizador. Esto se debe a que el Personalizador no es compatible con los temas en bloque, que sólo utilizan el Editor del Sitio. Esa es también la razón por la que no puedes previsualizar los temas de bloque inactivos.

The Live Preview is not available with block themes.
La vista previa en vivo no está disponible con los temas de bloque.

Así pues, a partir de WordPress 5.9, el punto de acceso al Personalizador ya no está disponible en el menú de administración cuando un tema de bloque está activo (a menos que utilices un plugin que haga uso de él).

Si todavía estás atado a los temas tradicionales y te preocupa la retrocompatibilidad, estate tranquilo: puedes seguir utilizando tu tema.

Actualmente tienes cuatro categorías diferentes de temas para elegir:

  • Temas de bloques: Temas diseñados para FSE
  • Temas universales: Temas que funcionan tanto con el Personalizador como con el Editor del Sitio
  • Temas híbridos: Temas clásicos que admiten funciones de FSE como theme.json
  • Temas clásicos: Temas con plantillas PHP, functions.php, etc.

Debido al impacto que probablemente tendrán los temas en bloque en el ecosistema de WordPress, tenemos un artículo completo que trata sobre Twenty Twenty-Two y los temas en bloque de WordPress. Asegúrate de consultarlo para obtener una visión más profunda.

Mejoras en el rendimiento

Aquí en Kinsta, estamos obsesionados con la velocidad del sitio web. Por eso estamos entusiasmados con las mejoras de rendimiento que llegarán con WordPress 5.9.

Estas mejoras afectarán a varias áreas del CMS, desde el editor de bloques hasta los temas de bloques, la carga lenta y mucho más. Vamos a sumergirnos en ello.

Mejoras en el editor de bloques

Desde la versión 5.9 de WordPress, los tipos de bloques, los patrones y las categorías se cargan de forma perezosa en el editor de bloques. El navegador carga primero el contenido de mayor prioridad, lo que proporciona al usuario una experiencia de edición más fluida y un mayor rendimiento.

Otras mejoras de rendimiento notables en el contexto del editor de bloques afectan a los bloques reutilizables y a la vista de lista.

Menos CSS cargado

En cuanto al frontend, WordPress 5.9 ha reducido drásticamente la cantidad de CSS cargado por los temas de bloques, lo que hace que las páginas se carguen significativamente más rápido.

La principal mejora que cabe destacar en este contexto es la introducción del mecanismo de configuración y estilos theme.json, que evita que los temas utilicen hojas de estilo masivas, incluyendo cientos de declaraciones CSS. La cantidad de código CSS que utiliza un tema se ha reducido ahora a unas pocas propiedades CSS personalizadas que cualquier tipo de bloque puede reutilizar.

Mejoras en el rendimiento del lazy loading

La carga lenta de imágenes se introdujo por primera vez en WordPress 5.5. A partir de WordPress 5.7, la funcionalidad del  lazy loading se extendió a los iframes, permitiendo a los propietarios de sitios web construirlos más rápidamente y mejorar su SEO.

De todos modos, tras un análisis del Largest Contentful Paint (LCP), resultó que asignar el atributo loading="lazy" a todas las imágenes e iframes de la página provoca una ligera degradación del rendimiento.

Omitir simplemente el atributo loading="lazy" no era una solución porque al hacerlo se perderían las claras ventajas del lazy loading.

La solución óptima sería omitir el atributo loading="lazy" sólo en las imágenes que aparecen por encima del pliegue. Sin embargo, como el atributo loading="lazy" se asigna en el lado del servidor, WordPress no puede determinar qué imágenes se muestran por encima del pliegue exactamente. Es algo que depende sobre todo del tema activo.

Ahora, como solución de compromiso, a partir de WordPress 5.9, el atributo loading="lazy" no se aplica a la primera imagen de contenido o iframe. Un análisis realizado en 50 temas populares de WordPress descubrió que esta solución conlleva una mejora considerable del rendimiento y que las páginas se cargan hasta un 30% más rápido.

Felix Arntz explica cómo funciona:

… para mejorar el rendimiento de forma inmediata, sin necesidad de que el desarrollador personalice el comportamiento, ahora WordPress omitirá que la primera «imagen de contenido o iframe» de la página se cargue de forma perezosa. El término «imagen de contenido o iframe» denota aquí cualquier imagen o iframe que se encuentre dentro del contenido de cualquier entrada en el bucle de consulta principal actual, así como cualquier imagen destacada de dicha entrada. Esto se aplica tanto al contenido «singular» como al de «archivo»: En un contexto «singular» la primera imagen o iframe del (único) post no se carga de forma perezosa, mientras que en un contexto «de archivo» la primera imagen o iframe del primer post de la consulta no se carga de forma perezosa.

Los desarrolladores de temas pueden ahora utilizar el nuevo filtro wp_omit_loading_attr_threshold para cambiar el número de imágenes/iframes que se saltan el lazy loading.

Múltiples hojas de estilo por bloque

Los desarrolladores de bloques y temas pueden registrar múltiples hojas de estilo en cada bloque y cargar estilos de otros bloques cuando sea necesario. Esto permite cargar hojas de estilo en función del contenido de la página, evitando que los temas carguen enormes hojas de estilo en cada página.

Según Ari Stathopoulos

Los bloques podrán ahora registrar múltiples hojas de estilo y cargar estilos de otros bloques cuando sea necesario. Los temas podrán añadir estilos por bloque en lugar de cargar hojas de estilo monolíticas que se cargan a la fuerza en cualquier lugar. Esto tiene un mayor impacto en los temas por bloques, donde la carga de las hojas de estilo se optimiza en función del contenido de la página y del diseño, pero también puede ser utilizado por los temas clásicos.

Características adicionales para desarrolladores

Además de las numerosas características y mejoras de la interfaz de usuario comentadas hasta ahora, WordPress 5.9 también introduce varias funciones para los desarrolladores.

Un nuevo atributo para bloquear bloques

Los desarrolladores de bloques ahora pueden impedir que los usuarios muevan o eliminen bloques individuales añadiendo un atributo lock en la configuración de los bloques:

{
	...
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"move": true,
				"remove": true
			}
		}
	}
}

Con esta función activada, los usuarios pueden editar el contenido del bloque, pero no pueden moverlo en la página ni eliminarlo del lienzo del editor. La siguiente imagen muestra un bloque personalizado con un conjunto estándar de controles de la barra de herramientas:

Custom block with a regular toolbar.
Un bloque personalizado con una barra de herramientas normal

Al definir el atributo lock, como se ve en el código anterior, se ocultan los desplazamientos del bloque y los controles Mover a y Eliminar de la barra de herramientas del bloque. La imagen siguiente muestra el resultado final en la pantalla:

A custom block without move and remove controls.
Un bloque personalizado sin controles de mover y eliminar

También puedes bloquear un bloque específico en un patrón de bloques. Para ver un ejemplo, consulta también Bloques de bloqueo en WordPress 5.9.

Nueva API para acceder a la configuración global y a los estilos

WordPress 5.9 introduce una nueva API pública de PHP para leer datos de theme .json.

Lectura de ajustes y estilos desde theme.json

Hay dos nuevas funciones para leer datos de las secciones settings y styles declaradas en el theme. json:

wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );
  • $path es una matriz que enumera la ruta de acceso al ajuste especificado
  • $context es una matriz que establece el contexto para esos datos. Los desarrolladores pueden leer desde una sección específica de ajustes del bloque – por ejemplo, array( 'block_name' => 'core/paragraph' ). La clave orygin establecida en base permite ignorar los datos personalizados guardados por el usuario.

El siguiente código de ejemplo devolvería el valor de ajuste de contentSize. En Veintidós, sería 650px:

wp_get_global_settings( array( 'layout', 'contentSize' ) );

Estableciendo un contexto, puedes recuperar estilos para bloques específicos. El siguiente código muestra cómo recuperar el valor del radio del borde para el bloque core/button:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button' )
	);
}

La función anterior devuelve el valor de la propiedad requerida teniendo en cuenta la configuración por defecto, la configuración del tema y los datos del usuario. El valor personalizado se proporcionará si el usuario configura el radio del borde del botón en la interfaz de Estilos Globales.

Para ignorar los datos del usuario, utilizarías el siguiente código:

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button', 'origin' => 'base' )
	);
}

Obtener la hoja de estilos generada

WordPress 5.9 también introduce una nueva función para obtener la hoja de estilos resultante de los estilos por defecto, del tema y de los estilos personalizados:

wp_get_global_stylesheet( $types = array() );

$types es una lista de los estilos a generar.

Puedes leer más sobre la nueva API en Nueva API para acceder a la configuración global y a los estilos.

Más características para desarrolladores

Entre los cambios adicionales de WordPress 5.9 para desarrolladores que quizá quieras conocer están

Resumen

Terminaremos este artículo con una nota rápida sobre la cuota de mercado de WordPress. Actualmente, WordPress impulsa más del 65% de todos los sitios web cuyo sistema de gestión de contenidos se conoce y se sitúa al norte del 43% de todos los sitios web.

Estas cifras son impresionantes, sobre todo si se comparan con las de los competidores más cercanos, con menos del 5% de cuota de mercado, como Shopify.

Y esto también significa que no puedes pasar por alto la evolución del CMS WP. Cada nueva versión de WordPress aporta nuevas características, mejoras en la interfaz y en el rendimiento, y WordPress 5.9 no es una excepción. Todo lo que necesitas para probar las nuevas características es un tema en bloque, como el nuevo tema por defecto Twenty Twenty-Two, y estarás listo para empezar.

¡Ahora te toca a ti! ¿Estás preparado para cambiar a los temas de bloques y a FSE? ¿Y cuáles son tus cambios favoritos de WordPress 5.9?

Carlo Daniele Kinsta

Carlo es un diseñador y desarrollador de front-end freelance. Cuando escribe artículos y tutoriales, Carlo se ocupa principalmente de los estándares web, pero cuando juega con sitios web, su mejor compañero de trabajo es WordPress.