Ya está aquí la versión 6.0 Arturo de WordPress y, como es habitual, hemos echado un vistazo detrás de las cortinas para ofrecer a nuestros lectores un avance de las novedades de la última gran versión de WordPress.

Digamos de inmediato que, si WordPress 5.9 nos llevó al corazón de la Fase 2 de Gutenberg, WordPress 6.0 pretende consolidar las herramientas de personalización ya disponibles.

Pero la nueva versión no es sólo eso. Como señaló Matias Ventura en la hoja de ruta preliminar de 6.0, la introducción del editor de sitios marcó un gran hito, pero también es sólo un primer paso en el camino.

WordPress 6.0 Arturo ya está disponible
WordPress 6.0 Arturo ya está disponible

WordPress 6.0 trae importantes mejoras en varias áreas del CMS, desde la usabilidad hasta el rendimiento, incluyendo las siguientes:

  • Mejora de la arquitectura de la información y de la experiencia de navegación de las plantillas
  • Mejora de la creación de plantillas
  • Nuevos hooks
  • API de Webfonts
  • Un nuevo modo de navegación para el editor del sitio
  • Estilos globales alternativos
  • Un bloque de Navegación mejorado
  • Mejora del rendimiento
  • Nuevas herramientas de diseño
  • Y mucho más…

Pero espera, eso no es todo. WordPress 6.0 también trae un número impresionante de cambios, funciones y correcciones de errores, incluyendo más de 400 actualizaciones y 500 correcciones de errores para el editor. Se han corregido más de 189 entradas, incluyendo 91 nuevas funciones y mejoras.

Sí, hay mucho de lo que hablar. Así que no nos demoremos más y descubramos las novedades de WordPress 6.0.

API de Webfonts

Una nueva API de Webfonts proporciona ahora una forma estandarizada de cargar webfonts en WordPress, garantizando el rendimiento y la privacidad del usuario.

A partir de WordPress 6.0, sólo puedes registrar una nueva webfont desde tu theme.json.

Utilizar el theme.json es bastante sencillo. Todo lo que tienes que hacer es añadir una nueva familia de fuentes en la sección typography. El siguiente código proporciona un ejemplo de registro de webfont:

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				},
				{
					"fontFamily": "\"Inter\", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	}
}

El código anterior añade el tipo de letra Inter al conjunto de fontFamilies disponibles por defecto en Twenty Twenty-Two. Si quieres probarlo tú mismo, descarga la webfont Inter de Google Fonts en la carpeta ./assets/fonts, y luego añade el código anterior a la sección settings.typography del theme.json de Twenty Twenty-Two. Cuando hayas terminado, guarda el archivo y vuelve a la interfaz de edición del sitio.

La siguiente imagen muestra el resultado en el editor.

Se ha registrado una nueva familia de fuentes en Twenty Twenty-Two.
Se ha registrado una nueva familia de fuentes en Twenty Twenty-Two.

La API de Webfonts sólo registra las fuentes que son necesarias para representar los bloques de la página actual, lo que resulta especialmente útil con las fuentes web definidas en las variaciones de estilo. Además, la API optimiza el número de peticiones HTTP al registrar y poner en cola las fuentes por familia de fuentes.

Puedes leer más sobre la nueva API en Webfonts API pull request, en Status of Webfonts API for WordPress 6.0 Inclusion y en Global Styles variations in WordPress 6.0.

Cambio de estilos globales

Las variaciones de estilos globales son una de las características más esperadas que llegan con WordPress 6.0. Los autores de temas pueden ahora incluir varios conjuntos de Estilos Globales con sus temas, permitiendo a los usuarios cambiar entre las variaciones de estilo con un solo clic.

Es como tener temas secundarios listos para usar, con un conjunto predefinido de estilos para cada uno.

Para añadir una variación de estilo a tu tema en bloque, añadirás un archivo JSON alternativo en una carpeta de estilos situada en la raíz de tu tema.

Los temas que soportan variaciones de Estilos Globales muestran un nuevo elemento Examinar estilos en la barra lateral de Estilos Globales. Esto lleva a un panel donde los usuarios del tema encuentran una lista de los estilos disponibles.

Examinar estilos en WordPress 6.0.
Examinar estilos en WordPress 6.0.

Elige un estilo global de la lista y el estilo se aplicará automáticamente a todo tu sitio web.

Elegir un estilo con un solo clic en WordPress 6.0.
Elegir un estilo con un solo clic en WordPress 6.0.

La nueva función permite a los desarrolladores de temas crear un número ilimitado de variaciones de estilo y se combina perfectamente con la nueva API de Webfonts.

La siguiente imagen muestra un estilo personalizado del ejemplo anterior, con una fuente diferente aplicada a los encabezados.

Una variación de estilo con una fuente personalizada en WordPress 6.0.
Una variación de estilo con una fuente personalizada en WordPress 6.0.

Si quieres probarlo tú mismo, añade una carpeta de estilos a la raíz de tu tema de bloques, crea un nuevo archivo JSON con un nombre significativo, ábrelo en tu editor de código favorito y añade el siguiente código:

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

Puedes encontrar el código completo utilizado en el ejemplo anterior en GitHub y en gist.

Los desarrolladores encontrarán descripciones detalladas de Estilos Globales y Theme.json en los artículos de documentación Ajustes y Estilos Globales y Theme.json.

También puedes consultar la última versión de Twenty Twenty-Two, que ahora presenta tres nuevas variaciones de estilo.

Explorar los estilos en Twenty Twenty-Two.
Explorar los estilos en Twenty Twenty-Two.

Patrones de bloques por todas partes

Una cosa es segura, los patrones de bloque juegan un papel central en la fase actual de desarrollo de WordPress. Introducidos por primera vez con WordPress 5.5, los patrones de bloques se han ido mejorando regularmente con el tiempo.

Además, a partir de la versión 5.9 de WordPress, los patrones que aparecen en el directorio de patrones se han introducido en nuestros sitios web de WordPress, siendo recuperados dinámicamente del directorio de patrones y cargados en el insertador de bloques.

Y ahora cualquiera puede convertirse en un desarrollador de patrones, gracias a una nueva herramienta online. El Creador de Patrones te permite construir, editar y enviar tus mejores patrones de bloques al Directorio de Patrones. Todo lo que necesitas para empezar es una cuenta de WordPress.org.

Buscando imágenes en el Creador de Patrones.
Buscando imágenes en el Creador de Patrones.

Además, WordPress 6.0 introduce nuevas mejoras en los patrones de bloqueo.

En primer lugar, los patrones de bloques son más fáciles de encontrar en la edición de plantillas. Ahora el insertador rápido sólo muestra los patrones de bloques cuando accedes a él en el nivel superior de una plantilla, es decir, cuando el bloque que vas a añadir a tu plantilla es el descendiente directo del documento.

Eso es cuando se cumplen las siguientes condiciones:

  • Estás editando una plantilla de bloques
  • El insertador rápido está en el nivel raíz
  • Estás añadiendo un bloque entre otros bloques (es decir, no es el primero ni el último de la página)
El insertador rápido sólo muestra patrones de bloques en el editor de plantillas.
El insertador rápido sólo muestra patrones de bloques en el editor de plantillas.

Otra función útil permite ahora a los desarrolladores de temas añadir patrones recomendados al theme.json. Para probarlo, busca en el Directorio de Patrones, encuentra los patrones que quieras recomendar a los usuarios de tu tema, luego coge el slug del patrón de la URL y añádelo a tu theme.json de la siguiente manera:

"patterns": [
	"image-with-angled-overlay-shape-call-to-action-button-and-description",
	"hero-section-with-overlap-image"
],

Los usuarios encontrarán tus patrones recomendados en el insertador de bloques.

Patrones recomendados en el insertador rápido.
Patrones recomendados en el insertador rápido.

Una potente característica relacionada con los patrones que se incorpora a WordPress 6.0 es el registro de patrones implícito. Ahora los temas pueden registrar implícitamente patrones declarándolos como archivos PHP bajo un nuevo directorio /patterns en la raíz del tema.

El proceso es bastante sencillo:

  1. crea una nueva carpeta de patrones en la raíz de tu tema
  2. crea un grupo de bloques en el editor de bloques
  3. copia y pega tu HTML en un nuevo archivo de texto,
  4. añade el siguiente encabezamiento,
  5. y guarda el archivo como PHP en tu carpeta de patrones.
<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

Y ya está. Ahora tienes un nuevo patrón de bloques que aparecerá en el insertador de bloques.

Un patrón personalizado en el insertador rápido de bloques.
Un patrón personalizado en el insertador rápido de bloques.

Los patrones de creación de páginas son otra característica relacionada con los bloques introducida con WordPress 6.0. Ahora, cuando creas una nueva página, la pantalla de creación de páginas muestra un modal que proporciona un conjunto de patrones de bloques que puedes elegir para crear tu página.

El modal sólo se muestra cuando al menos un patrón es compatible con los tipos de contenido core/post-content.

WordPress 6.0 no incluye ninguno de estos patrones, por lo que el modal no aparecerá a menos que se añada soporte a un patrón existente. Pero añadir el modal a la pantalla de creación de páginas es bastante sencillo.

Si has registrado un patrón de bloques para tu tema como se muestra en el ejemplo anterior, puedes añadir soporte para el patrón modal utilizando la propiedad Block Types como se muestra en el patrón de ejemplo de abajo:

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Guarda este código en un archivo PHP en el directorio /patterns de tu tema. Luego, en tu panel de control de WordPress crea una nueva página. Deberías ver un nuevo modal como se muestra en la siguiente imagen:

Page creation patterns
Page creation patterns

Para una visión más detallada de los patrones de creación de páginas, consulta también Patrones de creación de páginas en WordPress 6.0.

Para obtener información más detallada sobre el desarrollo de patrones de bloques, consulta también Nuevas funciones para trabajar con patrones y temas en WordPress 6.0 y el Tracking Issue en GitHub.

Características de la edición del sitio

El desarrollo completo de la edición de sitios no ha terminado con WordPress 5.9. WordPress 6.0 va un paso más allá al mejorar las funcionalidades de creación de temas visuales y ofrecer nuevas opciones de plantillas para los temas en bloque. Y hay más funciones en camino.

Construcción visual de temas

WordPress 6.0 introduce una herramienta mejorada de exportación de temas en bloque, que te permite descargar el tema actual con todos tus cambios y personalizaciones.

Si no has utilizado la herramienta de exportación de temas en bloque hasta ahora, es una potente herramienta de edición de sitios que te permite exportar tus estilos y plantillas como un tema completo.

Cuando estés satisfecho con tus cambios, desde la interfaz del editor del sitio, abre la barra lateral de Opciones y encuentra la sección Herramientas. Aquí un botón de Exportación te permite descargar el tema actual con todas tus personalizaciones de estilos y plantillas en un archivo zip.

Exportar un tema desde la interfaz del editor.
Exportar un tema desde la interfaz del editor.

A continuación, puedes exportar tu tema e instalarlo en cualquier sitio web de WordPress.

Hemos probado la herramienta mejorada de exportación de temas en una instalación local de WordPress, y hemos comprobado que casi todo funciona como esperábamos… 😅

De todos modos, la herramienta de exportación aún está en desarrollo, y hoy sólo podemos vislumbrar su tremendo potencial. Piensa en la posibilidad de crear tus temas desde la interfaz de edición de tu sitio web y distribuirlos en un número arbitrario de instalaciones. Y eso tanto si eres desarrollador como si no…

Todavía quedan muchos problemas abiertos por arreglar, lo que nos hace pensar que pronto veremos varias mejoras. Si tienes curiosidad y quieres saber más sobre la construcción de temas visuales (como nosotros), puedes seguir el tema de seguimiento en GitHub.

Más opciones de plantillas en los temas en bloque

En versiones anteriores de WordPress, teníamos un número limitado de tipos de plantillas disponibles.

Añadiendo una nueva plantilla en WordPress 5.9.
Añadiendo una nueva plantilla en WordPress 5.9.

Ahora, WordPress 6.0 introduce varios tipos de plantilla nuevos, como Autor, Categoría, Fecha, Etiqueta y Taxonomía.

Añadiendo una nueva plantilla en WordPress 6.0.
Añadiendo una nueva plantilla en WordPress 6.0.

Esta adición debería agilizar el flujo de trabajo de edición de tu sitio. Para probarlo, sólo tienes que elegir una nueva plantilla de la lista desplegable, añadir los bloques necesarios, guardar los cambios y comprobar cómo queda en el front-end. Sí, es así de fácil. Ahora, considera esto junto con la función de exportación de temas mencionada anteriormente y entenderás mejor lo que podemos esperar de la edición del sitio en breve.

Mejoras en la interfaz y la usabilidad

WordPress 6.0 introduce una serie de cambios en la interfaz de usuario, muchos de los cuales están destinados a poner orden en la barra lateral. En conjunto, estos cambios deberían tener un impacto considerable en la experiencia general de edición. Aquí sólo mencionaremos algunos de ellos, pero puedes consultar las notas de la versión de Gutenberg para obtener una lista más completa de los cambios (ver Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).

Mejoras en List View

List View se ve afectada por un número considerable de cambios que mejoran la usabilidad del componente.

Expandir List View al seleccionarla

Cuando haces clic en un bloque en el editor, ahora el bloque se resalta automáticamente en List View. Si el bloque está anidado en un bloque padre, el bloque padre se expande mostrando el elemento en el árbol de bloques.

Bloque de grupo expandido en List View al seleccionar el bloque.
Bloque de grupo expandido en List View al seleccionar el bloque.

List View colapsada por defecto

Antes de WordPress 6.0, cuando abres el panel de List View, está expandido por defecto.

List View por defecto en WordPress 5.9.
List View por defecto en WordPress 5.9.

Pero como un post suele estar formado por estructuras complejas de bloques anidados, tener el árbol de bloques colapsado al abrir List View tiene mucho sentido.

Con la versión 6.0, List View se colapsa por defecto en todos los editores, haciendo que el árbol de bloques sea mucho más comprensible de un vistazo.

List View por defecto en WordPress 6.0.
List View por defecto en WordPress 6.0.

Centrarse en el botón de List View

Cuando abres el panel de List View, el foco ahora vuelve correctamente al botón de List View. Esto es especialmente útil cuando navegas por List View desde el teclado, y resulta en una experiencia de edición más suave y fluida.

Belección de bloques múltiples y arrastrar y soltar

Otro cambio en List View te permite seleccionar varios bloques en el mismo nivel y arrastrarlos y soltarlos a otra posición dentro de la lista.

Vista previa de los estilos de bloque

Antes de WordPress 6.0, las vistas previas de los estilos de bloque se situaban en la barra lateral de bloques, ocupando una parte considerable del panel de Estilos.

Vista previa del estilo de bloque en WordPress 5.9.
Vista previa del estilo de bloque en WordPress 5.9.

Con la versión 6.0, sólo los nombres de las variaciones de estilo aparecen en el panel de Estilos, mientras que las vistas previas de los estilos se muestran fuera de la barra lateral cuando se pasa el ratón por encima del nombre del estilo o éste recibe el foco.

Este cambio reduce las dimensiones de la barra lateral y debería hacer más evidentes los nombres de los estilos.

Vista previa del estilo de bloque en WordPress 6.0.
Vista previa del estilo de bloque en WordPress 6.0.

Sección de tipografía de párrafo

Con el objetivo de poner orden en la barra lateral del bloque, el control de la tapa de la gota del bloque Párrafo se ha movido de su sección a la sección Tipografía.

Con este cambio, todos los controles de la configuración de la tipografía se colocan ahora en la misma sección, lo que permite una experiencia de usuario más coherente.

Ajustes de tipografía en WordPress 5.9 frente a WordPress 6.0.
Ajustes de tipografía en WordPress 5.9 frente a WordPress 6.0.

La configuración de bordes y colores se ha trasladado al panel de herramientas

Con el objetivo de poner orden en una desordenada barra lateral de ajustes, los controles de ajustes de bordes y de color se han trasladado al Panel de Herramientas y pueden expandirse y colapsarse en varios contextos.

El nuevo panel de configuración de bordes.
El nuevo panel de configuración de bordes.

Este cambio debería agilizar la experiencia de edición con varios bloques y aportar más consistencia a la barra lateral.

El panel Color en WordPress 6.0.
El panel Color en WordPress 6.0.

Recordatorio de la categoría del panel de publicación de posts

Cuando tienes prisa o publicas regularmente un buen número de entradas del blog, puedes olvidarte fácilmente de las etiquetas o las categorías. Si te ves a menudo en esa situación, te resultará muy útil el recordatorio de etiquetas que aparece en el panel de publicación de entradas.

Ahora, para ayudar a los administradores y autores del sitio a asegurarse de que sus entradas tienen asignadas las categorías necesarias, con WordPress 6.0 aparece una nueva Sugerencia: Asignar una categoría aparece en el panel de publicación de la entrada cuando no se ha añadido una categoría a la entrada.

La imagen de abajo compara el panel de publicación de entradas en WordPress 5.9 con el 6.0.

Panel de publicación de entradas en WordPress 5.9 vs. 6.0.
Panel de publicación de entradas en WordPress 5.9 vs. 6.0.

Se ha añadido el editor de código al editor del sitio

A partir de WordPress 6.0, el Editor de Código también está disponible en el Editor del Sitio. Al igual que con el Editor de Publicaciones, encontrarás el Editor de Código en el menú Opciones.

WordPress 6.0 añade el Editor de Código al Editor del Sitio.
WordPress 6.0 añade el Editor de Código al Editor del Sitio.

Block Locking UI

Un nuevo elemento de bloqueo en el menú desplegable de más ajustes abre una ventana emergente en la que puedes impedir que los usuarios muevan o eliminen bloques (o ambas cosas).

Bloqueando un grupo de bloques.
Bloqueando un grupo de bloques.

Esto es especialmente útil en la edición de plantillas y bloques reutilizables, donde también puedes restringir la edición de bloques.

Bloqueo de un bloque de grupo reutilizable.
Bloqueo de un bloque de grupo reutilizable.

La nueva función puede desactivarse mediante programación utilizando la nueva configuración canLockBlocks.

El siguiente código habilita la función de bloqueo de bloques sólo para los usuarios con rol de Editor o superior:

add_filter(
	'block_editor_settings_all',
	function( $settings, $context ) {

		$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
		return $settings;
	},
	10,
	2
);

Los desarrolladores también pueden ocultar la interfaz de usuario de bloqueo de bloques en tipos de bloques específicos utilizando la propiedad lock:

{
	"apiVersion": 2,
	"supports": {
		"lock": false
	}
}

Puedes leer más sobre el bloqueo de bloques en Ajustes de bloqueo de bloques en WordPress 6.0.

Multi-selección

Ahora es posible seleccionar texto a través de múltiples bloques.

Selección de texto a través de dos párrafos.
Selección de texto a través de dos párrafos.

Retención de estilos

Cuando transformas bloques o creas nuevos botones, ahora se mantienen varios estilos.

La imagen siguiente muestra un bloque Lista con diferentes estilos.

Un bloque de Lista con diferentes estilos aplicados.
Un bloque de Lista con diferentes estilos aplicados.

Cuando transformes el bloque Lista en párrafos, los nuevos bloques conservarán los mismos estilos que los elementos de la lista anterior.

Transformando una lista en párrafos.
Transformando una lista en párrafos.

La misma mejora se aplica a los nuevos botones añadidos a un bloque Botones, que ahora heredan el estilo de los botones adyacentes.

Nuevos bloques básicos

El número de bloques centrales aumenta constantemente. Si te preguntas cuáles son los bloques centrales disponibles actualmente, ahora hay una página del Manual que proporciona una lista completa de los bloques centrales incluidos en el plugin de Gutenberg. Para cada bloque, se proporciona el nombre, la categoría, los soportes y los atributos, así como un útil enlace al código fuente que les encantará a los desarrolladores de bloques.

Y habrá más bloques con WordPress 6.0. Encuentra aquí los bloques que puedes esperar con la próxima versión.

Comentarios Bucle de consulta

Al igual que el bloque de bucle de consulta, el nuevo bloque de bucle de consulta de comentarios muestra los comentarios de las publicaciones. Es un bloque avanzado que incluye varios bloques internos que puedes editar y configurar por separado.

Como muestra la imagen siguiente, puedes seleccionar cualquiera de los bloques contenidos en el bloque Bucle de Consulta de Comentarios para personalizar su aspecto como quieras. También puedes añadir más bloques o mover o eliminar los existentes (Código fuente).

Configurando el bloque Bucle de Consulta de Comentarios.
Configurando el bloque Bucle de Consulta de Comentarios.

Leer más

Un nuevo y personalizable bloque Leer más te permite personalizar diferentes aspectos del botón Leer más: bordes, colores, esquinas, tipografía y más (Código fuente).

Es una gran adición porque te permite añadir y personalizar el enlace Leer más fuera del contexto del bloque Extracto.

El nuevo bloque Leer más.
El nuevo bloque Leer más.

Sin resultados en el bucle de consulta

El bloque Sin resultados es un bloque contenedor en el que puedes añadir cualquier texto o bloque para mostrarlo cuando la consulta no tenga resultados. Para añadir el bloque Sin resultados a un bucle de consulta, sólo tienes que seleccionar el bucle de consulta y hacer clic en el icono del signo más de la esquina inferior derecha para lanzar el insertador rápido. A continuación, busca «Sin resultados». El bloque no está disponible fuera del Bucle de Consulta (Código fuente).

Añadiendo el bloque Sin Resultado al Bucle de Consulta.
Añadiendo el bloque Sin Resultado al Bucle de Consulta.

Avatar y biografía del autor del post

WordPress 6.0 también introduce nuevos tipos de bloque para dividir el bloque Autor en sus componentes y utilizarlos por separado en tu contenido.

El bloque Post Author Biography proporciona la descripción del autor (Código fuente).

El bloque Avatar simplemente muestra el avatar de un usuario que te permite elegir entre los autores del sitio (Código fuente).

El bloque Avatar en WordPress 6.0.
El bloque Avatar en WordPress 6.0.

Este bloque es especialmente útil para mostrar el avatar de un autor fuera del contexto del bloque de información del autor o de los comentarios. Por ejemplo, puedes utilizarlo en una página dedicada a todos los autores, o en una página que muestre las opiniones de tus usuarios/lectores.

Mejoras en los bloques existentes

WordPress 6.0 también introduce varios cambios y mejoras en los bloques existentes que pueden tener un fuerte impacto en tu flujo de trabajo de edición. El bloque de Navegación se verá afectado por varios cambios, pero también verás mejoras en otros bloques, como el Bucle de Consulta, la Imagen Destacada, el Grupo y los Iconos Sociales.

Mejoras en el bloque de navegación

En los últimos meses, el bloque de navegación ha recibido varias mejoras y ahora presenta una interfaz mucho más fácil de usar.

En primer lugar, se ha añadido una vista previa enriquecida al bloque Enlace de navegación. Cuando añades un enlace que apunta a un recurso de acceso público, al hacer clic en el botón de enlace de la barra de herramientas del bloque se muestra una imagen de vista previa de ese recurso.

Vista previa enriquecida de los Enlaces de Navegación.
Vista previa enriquecida de los Enlaces de Navegación.

Algunos cambios adicionales afectan a la experiencia general de edición.

Ahora, cuando añades un nuevo menú y sólo existe un Menú de Navegación, se pone por defecto el único menú disponible. Este cambio debería acelerar tu flujo de trabajo de edición si sólo tienes un único Menú de Navegación.

Los Enlaces de Navegación ya tenían un campo de descripción en el que los usuarios podían introducir un texto que describiera sus enlaces de navegación. Sin embargo, en versiones anteriores de WordPress, los temas no podían soportar esta función.

Ahora, con WordPress 6.0, aparece un <span class="wp-block-navigation-item__description"> después de la etiqueta del enlace.

La descripción del enlace de navegación aparece después de la etiqueta del enlace.
La descripción del enlace de navegación aparece después de la etiqueta del enlace.

En Twenty Twenty-Two, el elemento .wp-block-navigation-item__description está oculto mediante CSS, pero los temas pueden añadir una propiedad display: block para mostrar la descripción del enlace.

Descripción del enlace de navegación en WordPress 6.0 y Twenty Twenty-Two.
Descripción del enlace de navegación en WordPress 6.0 y Twenty Twenty-Two.

Filtros de bucle de consulta e imágenes destacadas

La sección de configuración de los Filtros del Bucle de Consulta muestra ahora campos de entrada para taxonomías personalizadas. Esto permite a los usuarios filtrar el tipo de entrada actual por una o más taxonomías personalizadas registradas para el tipo de entrada seleccionado.

Ahora también es posible filtrar las entradas por varios autores, mientras que en las versiones anteriores sólo se podía seleccionar un único autor en un desplegable.

Configuración del filtro del bucle de consulta en WordPress 6.0.
Configuración del filtro del bucle de consulta en WordPress 6.0.

Además, ahora también puedes establecer las dimensiones de la imagen destacada dentro de un bloque de bucle de consulta.

Controlando las dimensiones de la Imagen Destacada en un bloque de Bucle de Consulta.
Controlando las dimensiones de la Imagen Destacada en un bloque de Bucle de Consulta.

Soporte de tipografía y bordes en los bloques de grupo responsivos

Los bloques de grupo y de fila ahora admiten la configuración de la tipografía. Este cambio permite a los usuarios aplicar los mismos ajustes de tipografía a todo un grupo de bloques a la vez, lo que ahorra unos cuantos clics a la hora de dar formato a un grupo que contenga varios bloques anidados.

Ajustes de tipografía para un bloque de grupo.
Ajustes de tipografía para un bloque de grupo.

El bloque de Grupo se ha mejorado aún más y ahora puedes agrupar fácilmente bloques en Pila o Fila con un solo clic.

Sólo tienes que seleccionar los bloques que quieres agrupar y elegir uno de los tres controles disponibles en la barra de herramientas del bloque: Agrupar, Fila, Pila.

Una vez que hayas agrupado los bloques, un nuevo panel en la barra lateral de ajustes muestra las descripciones de las variaciones de los grupos, lo que te permite cambiar de variación con unos pocos clics.

Un bloque de Fila muestra los bloques en horizontal.
Un bloque de Fila muestra los bloques en horizontal.

WordPress 6.0 también introduce el soporte de márgenes para los bloques de grupo, permitiendo a los usuarios controlar los márgenes superior e inferior por separado.

Controlando los márgenes con un bloque de Grupo.
Controlando los márgenes con un bloque de Grupo.

Imagen destacada en el bloque de portada

Ahora puedes utilizar imágenes destacadas en los bloques de portada, ya que con WordPress 6.0 se ha añadido a la barra de herramientas del bloque un control para utilizar la imagen destacada. Gracias a este nuevo control puedes cambiar de la imagen actual a la imagen destacada con un solo clic.

Usar imagen destacada con un bloque de portada.
Usar imagen destacada con un bloque de portada.

Mostrar/Ocultar etiquetas en los iconos sociales

Una pequeña pero útil mejora en el bloque de Iconos Sociales permite ahora a los usuarios activar/desactivar las etiquetas de los enlaces de los iconos.

Un control de Mostrar etiquetas permite activar/desactivar las etiquetas en los Iconos Sociales.
Un control de Mostrar etiquetas permite activar/desactivar las etiquetas en los Iconos Sociales.

Al activar esta opción, puedes mostrar el nombre del servicio por defecto o establecer etiquetas personalizadas para tus iconos por separado.

Mostrar etiqueta activada.
Mostrar etiqueta activada.

Mejoras adicionales en los bloques

La próxima versión de WordPress también trae un gran número de mejoras para muchos otros bloques.

Por ejemplo, ahora puedes controlar los bordes de los bloques Columnas (Gutenberg 12.7).

Controles de los bordes del bloque Columnas.
Controles de los bordes del bloque Columnas.

Otra útil mejora de UX te permite insertar enlaces internos mediante un simple activador de teclado [[.

Añadir enlaces internos en WordPress 6.0 es más fácil.
Añadir enlaces internos en WordPress 6.0 es más fácil.

Ahora es más fácil controlar el espacio alrededor de las imágenes en un bloque de Galería gracias al nuevo control de espaciado del bloque.

Imágenes sin espacio en bloque.
Imágenes sin espacio en bloque.
Imágenes con espaciado de bloque.
Imágenes con espaciado de bloque.

Cambios para Desarrolladores y Mejoras de Rendimiento

WordPress 6.0 también añade muchas características para los desarrolladores.

La nueva versión también da un impulso al rendimiento, con algunas incorporaciones a la API de almacenamiento en caché de WordPress, mejoras en el rendimiento de las consultas de términos de taxonomía y otras mejoras en el rendimiento de los sitios individuales con un elevado número de usuarios.

Con esto terminamos nuestro resumen de las nuevas características y cambios que verás una vez que hayas actualizado tus sitios web a la versión 6.0 de WordPress.

Pero estas son sólo algunas de las mejoras que llegan con WordPress 6.0. Para obtener una lista completa, consulta las notas de la versión de Gutenberg y la Guía de Campo de WordPress 6.0.

Resumen

Como ya hemos dicho, podemos decir que estamos en medio de la segunda fase del desarrollo de Gutenberg, la fase de personalización.

La edición completa del sitio ya forma parte del núcleo de WordPress y la versión 6.0 y las siguientes traerán más mejoras a lo que ya tenemos y podemos utilizar ahora mismo.

Todo esto tendrá un gran impacto en el ecosistema de WordPress y en la web en su conjunto, teniendo en cuenta además que, en el momento de escribir este artículo

WordPress es utilizado por el 64,2% de todos los sitios web cuyo sistema de gestión de contenidos conocemos. Esto supone el 43,0% de todos los sitios web. (Fuente W3Techs)

Nos detendremos aquí por ahora. Nuestra lista de funciones y mejoras que llegarán con WordPress 6.0 no puede agotarse en un solo post, pero esperamos haber destacado al menos las incorporaciones que tendrán mayor impacto en la forma en que usamos WordPress a diario.

Ahora nos gustaría concluir este artículo con algunas preguntas para nuestros lectores

Por favor, comparte tus opiniones con la comunidad en la sección de comentarios más abajo. 👇

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.