WordPress 6.5 «Regina» se ha lanzado el 2 de abril, y estamos aquí para enseñarte las fantásticas funciones que trae consigo.

6.5 introduce nuevas y potentes APIs, que llevan la experiencia de desarrollo de WordPress al siguiente nivel. Pero también trae un montón de cambios que te harán feliz a la hora de construir tu sitio y crear contenidos.

Gracias a la nueva Biblioteca de Fuentes, podrás inyectar valores de campo personalizados en el contenido de los bloques principales y descargar e instalar Google Fonts directamente desde el editor del sitio. Las nuevas herramientas de diseño y varias mejoras de la interfaz de usuario mejorarán la experiencia general de edición.

Pero éstas son sólo algunas de las actualizaciones que llegan con WordPress 6.5. La nueva versión reúne tantas mejoras y actualizaciones que sería imposible mencionarlas todas en una sola entrada del blog. Así que hemos recopilado las más revolucionarias y emocionantes en este extenso y detallado artículo.

Comencemos nuestro viaje de descubrimiento de WordPress 6.5.

La nueva Biblioteca de Fuentes de WordPress

En primer lugar, WordPress 6.5 introduce una nueva función que permite gestionar las fuentes desde la interfaz de Estilos.

La nueva Biblioteca de Fuentes de WordPress te permite gestionar las fuentes de una forma parecida a la gestión de medios en la Biblioteca de Medios, pero para las fuentes.

Gracias a la Biblioteca de Fuentes, puedes instalar/desinstalar fácilmente fuentes locales y Google Fonts y elegir las que quieras activar/desactivar independientemente de tu tema activo.

Suena genial, ¿verdad? Ahora tenemos un control mucho mayor sobre un aspecto crítico de todo sitio web: la tipografía. Para utilizar fuentes personalizadas en tu sitio web de WordPress, ya no tendrás que depender de las fuentes de tu tema ni jugar con CSS.

Su uso es bastante sencillo. En la interfaz de usuario del editor del sitio, en la barra lateral abre Estilos Globales y selecciona Tipografía.

El nuevo panel Tipografía en WordPress 6.5
El nuevo panel Tipografía en WordPress 6.5

Aquí deberías ver una lista de las fuentes y elementos disponibles. Haz clic en el botón Gestionar fuentes de la derecha, y aparecerá una ventana emergente con tres pestañas.

La interfaz de la Biblioteca de fuentes en WordPress 6.5
La interfaz de la Biblioteca de fuentes en WordPress 6.5

La pestaña Biblioteca ofrece una vista previa de las fuentes disponibles, la pestaña Cargar incluye un área de arrastrar y soltar para cargar activos de fuentes desde tu ordenador, y la pestaña Instalar Fuentes te permite instalar fuentes desde Google Fonts.

Conectar con Google Fonts
En la pestaña Instalar fuentes, puedes conectarte a Google Fonts

Una vez conectado a Google Fonts, aparecerá en el mismo panel una lista de todas las fuentes disponibles.

Google Fonts
Google Fonts

También puedes buscar fuentes por su nombre.

Búsqueda de fuentes por nombre en WordPress 6.5
Búsqueda de fuentes por nombre en WordPress 6.5

Elige las variantes de fuentes que necesites, haz clic en Instalar y ya está.

Variantes de fuentes Ubuntu en Google Fonts
Variantes de fuentes Ubuntu en Google Fonts

Cuando instalas una nueva fuente, la Biblioteca de fuentes añade la definición de la familia de fuentes a las fuentes instaladas y descarga el activo de la fuente en la carpeta wp-content/uploads/fonts.

.

Desactivar la Biblioteca de Fuentes

Los desarrolladores de plugins y temas pueden desactivar la Biblioteca de Fuentes utilizando el nuevo filtro PHP fontLibraryEnabled:

function disable_font_library_ui( $editor_settings ) { 
	$editor_settings['fontLibraryEnabled'] = false;
	return $editor_settings; 
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );

DataViews

DataViews es un componente que permite representar conjuntos de datos utilizando diferentes tipos de diseños, como tablas, cuadrículas, listas, etc.

Con esta iteración, se incorporan al core nuevas vistas y funciones relacionadas para gestionar páginas, patrones y plantillas, y podemos esperar mejoras adicionales con futuras versiones de WordPress.

Por el momento, WordPress 6.5 introduce las siguientes vistas en el Editor de Sitios:

  • Plantillas > Gestionar todas las plantillas: Diseños de Tabla y Cuadrícula.
  • Plantillas > Partes de la plantilla > Gestionar todas las partes de la plantilla: Diseños de Tabla y Cuadrícula.
  • Patrones: Diseño de cuadrícula.
  • Páginas > Gestionar todas las páginas: Diseños de tabla y Cuadrícula.
Disposición de la cuadrícula
Configuración de la disposición en cuadrícula para plantillas

Junto con los diseños, las vistas de datos añaden varias funciones de visualización, como filtros, búsqueda, paginación, ordenación, ocultación y visualización de campos.

Configurar Campos para la vista Plantillas
Configurar Campos para la vista Plantillas

El botón Edición en bloque te permite realizar varias acciones en bloque en función del conjunto de datos actual. Para Páginas, puedes Mover a la papelera, Restaurar y Eliminar permanentemente.

Editar páginas en bloque en WordPress 6.5
Editar páginas en bloque en WordPress 6.5

Las vistas de datos también vienen con una nueva API de filtro Primario que pretende añadir un tipo especial de filtro — siempre visible en la pantalla — a las vistas de datos. La imagen de abajo muestra el nuevo filtro primario Estado de Sincronización en la sección de administración Patrones.

El filtro primario Estado de sincronización para patrones
El filtro primario Estado de sincronización para patrones

La API DataViews viene con el nuevo paquete npm @wordpress/dataviews que permite a los desarrolladores experimentar con vistas de datos.

API Block Bindings (de Enlaces de Bloques)

La API Block Bindings es una nueva API cuyo objetivo es conectar atributos de bloques a valores de diferentes fuentes de datos. Estos valores pueden variar en función del contexto. Un ejemplo sencillo sería un encabezado que contenga el nombre del autor y que cambie con el valor de post_author.

Se trata de una mejora notable porque amplía las capacidades de varios bloques principales. Gracias a la nueva API, puedes vincular datos dinámicos de cualquier fuente a un atributo de bloque.

Las fuentes de datos pueden ser de lo más diversas: Datos del sitio, campos personalizados, datos de usuario, patrones, shortcodes, otros bloques e incluso herramientas externas que utilicen Gutenberg. Un ejemplo podría ser un sitio web de Drupal con Gutenberg.

Desde un punto de vista técnico, podemos describir el funcionamiento de la API Block Bindings como un proceso de tres pasos:

  1. En primer lugar, creas un enlace entre los atributos del bloque y una fuente de datos utilizando un objeto bindings.
  2. La API obtiene el valor de la fuente de datos definida en el binding (enlace).
  3. A continuación, actualiza el HTML del bloque utilizando los valores recibidos de la fuente de datos.

La primera implementación de la API  Block Bindings que viene con WordPress 6.5 permite conectar atributos de bloque y campos personalizados. Una segunda implementación anunciada, Sobrescritura de Patrones Sincronizados, se ha retrasado a una futura versión.

Al principio, sólo un número limitado de bloques, como encabezados, párrafos, imágenes y botones, soportarán la API Block Bindings. En próximas iteraciones, se añadirán más bloques a la lista, incluso bloques personalizados.

Esta primera implementación de la API también permite a los desarrolladores de plugins registrar sus fuentes del mismo modo que Gutenberg registra la fuente de datos core/post-meta. Basándote en el ejemplo de Santos Guillamot, puedes registrar la fuente de datos de tu plugin de esta forma:

register_block_bindings_source(
	'myplugin/plugin-data',
	array(
		'label'              => _x( 'Plugin Data', 'block bindings source' ),
		'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
	)
);

Y luego añadir un objeto bindings a tu bloque:

<!-- wp:paragraph 
{
	"metadata": {
		"bindings": {
			"content": {
				"source": "myplugin/plugin-data",
				"args": {
					"key":"plugin_key"
				}
			}
		}
	}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->

Aquí tienes una descripción de cada propiedad:

  • metadata: Un objeto de metadatos de bloque.
  • bindings: Un objeto que contiene uno o más bindings (enlaces).
  • content: El atributo del bloque que se va a vincular a una fuente de datos. En este ejemplo, el atributo content de un bloque Párrafo.
  • source: El origen de los bindings.
  • args: Un objeto de argumentos para pasar a la fuente de bindings del bloque.

Las futuras iteraciones añadirán más funciones a la API Block Bindings . Además, pronto deberíamos poder crear bindings desde el Editor Visual, conectar atributos de bloque con más fuentes de datos, como datos del sitio o datos de taxonomía, y utilizar esta función con más bloques.

Dicho esto, vamos a profundizar en las primeras implementaciones de la API Block Bindings.

Conectar campos personalizados a bloques

Antes de WordPress 6.5, no había forma de inyectar valores de campos personalizados en el contenido de los bloques principales. Los desarrolladores sólo podían crear bloques personalizados para mostrar campos personalizados en el frontend.

A partir de WordPress 6.5, puedes mostrar datos almacenados en campos personalizados dentro de los bloques principales, incluyendo botones, cabeceras, imágenes y párrafos.

Como ya se ha mencionado, la API Block Bindings te permite conectar atributos de bloques y diferentes fuentes de datos, incluida la fuente «meta_fields». Para utilizar esta función, primero tienes que activar los campos personalizados en el editor desde Opciones -> Preferencias -> General -> Avanzado.

El modal de Preferencias en el Editor de Entradas
El modal de Preferencias en el Editor de Entradas

Ten en cuenta que, a partir de WordPress 6.5, no dispones de un control de interfaz de usuario para vincular el valor de un campo personalizado a un atributo de bloque.

Así que, una vez que hayas añadido la clave y el valor de tu campo personalizado, tendrás que cambiar al editor de código y añadir un objeto «bindings» dentro del delimitador de bloque, como se muestra en el código siguiente:

<!-- wp:paragraph 
	{
		"metadata": {
			"bindings": {
				"content": {
					"source":"core/post-meta",
					"args": {
						"key":"my_custom_field"
					}
				}
			}
		}
	} -->
	<p>Paragraph</p>
<!-- /wp:paragraph -->

Añadir un campo personalizado a un bloque bloquea los controles apropiados, haciendo que el contenido del bloque no sea editable.

Ahora, vamos a explorar cómo funciona esto con un bloque Imagen. Añade dos campos personalizados para los atributos alt y src.

Dos campos personalizados
Dos campos personalizados para almacenar los valores alt y src

A continuación, añade un bloque Imagen, cambia al editor de código y añade un objeto bindings al bloque, como en el siguiente ejemplo:

<!-- wp:image {
	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"img_src"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"img_alt"
				}
			}
		}
	}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->

Te darás cuenta de que no podrás reemplazar la fuente de la imagen utilizando los controles del editor.

El marcador de posición de imagen sin controles multimedia
El marcador de posición de imagen sin controles multimedia

Con esta primera iteración, sólo se pueden conectar los siguientes atributos de bloque a los campos personalizados:

  • Párrafo: contenido.
  • Título: contenido.
  • Imagen: URL, alt y título.
  • Botón: texto, URL, linkTarget, rel.

Para una visión más amplia de la conexión de campos personalizados con atributos de bloque, consulta esta completa introducción a Block Bindings.

Sistema de revisión mejorado

Las revisiones te dan la seguridad de que puedes deshacer cualquier cambio restaurando una versión anterior de la apariencia del sitio en cualquier momento. Debido a la importancia de un sistema de revisión fiable en los sitios web colaborativos, las revisiones de estilo ocupan un lugar destacado en la fase actual de desarrollo de WordPress. WordPress 6.5 aporta varias mejoras significativas al sistema de revisión.

Esto es lo que puedes esperar ver con las revisiones en WordPress 6.5.

Descripción de los cambios

En la versión anterior de WordPress, sólo eran visibles la fecha, la hora y el autor de cada revisión. A partir de WordPress 6.5, además de esos detalles, también verás un breve resumen y otros detalles de esa versión.

Resumen de revisión en WordPress 6.5
Resumen de revisión en WordPress 6.5

Revisiones Ilimitadas y Paginación

Antes de la 6.5, debido al límite de la API Rest, sólo era posible ver un máximo de 100 revisiones en un único panel de la barra lateral.

Gracias a los dos nuevos selectores getRevisions y getRevision, introducidos con Gutenberg 17.2 y ahora fusionados en el core con WordPress 6.5, el límite de 100 revisiones ya no existe. Además, puedes navegar por todas las revisiones existentes divididas en páginas de 10 elementos cada una.

Integración del Libro de Estilo de Revisiones

Otro cambio hace que el panel Revisiones también esté disponible con el Libro de Estilo. Esto te permite comprobar los cambios que has realizado en tus estilos sobre patrones y bloques no incluidos en la plantilla actual.

El Libro de Estilo ahora admite revisiones
El Libro de Estilo ahora admite revisiones

Revisiones de plantillas y partes de plantillas

Las revisiones de plantillas y partes de plantillas también están disponibles para que puedas volver a una versión anterior de tu proyecto de diseño, añadiendo una capa de seguridad adicional a tu flujo de trabajo.

API de interactividad

Antes de WordPress 6.5, para añadir interactividad a sus páginas, los desarrolladores debían implementar por su cuenta sus bibliotecas JavaScript favoritas. Lamentablemente, esto conducía a una falta de coherencia en el desarrollo de JavaScript en el frontend.

Desde WordPress 6.5, la nueva API de interactividad proporciona una forma moderna y estandarizada de añadir interactividad al frontend de tus sitios web WordPress.

Si te preguntas qué hace esta nueva API, ya la probamos en WordPress 6.4, cuando se refactorizaron los bloques principales de Imagen, Búsqueda, Archivo, Navegación y Consulta utilizando la versión privada de la API. El efecto lightbox en las imágenes es otro buen ejemplo.

La paginación dinámica, la búsqueda instantánea y la interacción en tiempo real entre bloques son sólo algunos ejemplos de lo que podrás implementar en tus sitios web utilizando la API de Interactividad:

Los bloques pueden compartir datos, acciones y callbacks entre ellos. Esto hace que la comunicación entre bloques sea más sencilla y menos propensa a errores. Por ejemplo, hacer clic en un bloque «añadir al carrito» puede actualizar sin problemas otro bloque «carrito».

Y es increíblemente rápido. Todos los scripts necesarios para añadir interactividad sólo se cargarán en el frontend si tienes al menos un bloque interactivo en la página.

La API de interactividad adopta un enfoque moderno del desarrollo del frontend que aprovecha el poder de los atributos HTML personalizados para reducir la cantidad de JavaScript necesaria para añadir interactividad a tus páginas.

Si estás familiarizado con bibliotecas frontend como HTMX y Alpine.js, te alegrará ver la misma lógica implementada en WordPress con la API de Interactividad. Entonces, ¿de qué se trata? Profundicemos un poco más.

¿Qué es la API de Interactividad?

La API de Interactividad es un nuevo sistema estándar de directivas para crear bloques interactivos que permitirá a los desarrolladores añadir fácilmente interactividad al frontend de sus bloques para que los visitantes del sitio puedan interactuar con tu contenido sin tener que recargar la página. Piensa en cosas como la búsqueda instantánea, añadir comentarios, añadir a un carrito y la paginación dinámica.

La nueva API cumple una serie de requisitos que la convierten en una herramienta de desarrollo moderna, entre los que se incluyen los siguientes:

  • Es compatible con el renderizado del lado del servidor y el HTML del lado del cliente.
  • Funciona bien con PHP y el actual sistema de bloques.
  • Es compatible con los hooks de WordPress y las bibliotecas JavaScript existentes.
  • Sigue un enfoque declarativo en lugar de un enfoque imperativo.
  • Es eficaz y extensible.
  • Es atómico y componible: Cada directiva controla una pequeña parte del DOM, y se pueden combinar varias directivas para crear aplicaciones complejas.
  • Es compatible con las herramientas de desarrollo de WordPress existentes.

Como ya hemos dicho, la API de Interactividad se basa en directivas, que son atributos HTML especiales que te permiten adjuntar un comportamiento específico a los elementos del DOM. Aquí tienes un ejemplo de bloque interactivo:

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive='{ "namespace": "create-block" }'
	data-wp-context='{ "isOpen": false }'
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
		?>
	</p>
</div>

WordPress procesa esas directivas en el servidor y genera el marcado correspondiente.

Cómo empezar con la API de Interactividad

La implementación de la API de Interactividad no afectará al flujo de trabajo de creación de bloques. Puedes crear un plugin que registre un bloque interactivo utilizando el comando @wordpress/create-block y una plantilla interactiva específica.

Inicia tu herramienta de línea de comandos favorita, navega hasta tu directorio de plugins y ejecuta el siguiente comando:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

Esto genera un bloque interactivo a partir de una plantilla que utiliza el campo de metadatos viewScriptModule. El módulo de script declarado en viewScriptModule se pondrá en cola cuando se renderice el bloque en el frontend. (Véase también viewScriptModule y Script Modules dev notes).

Un proyecto de bloque interactivo en Visual Studio Code
Un proyecto de bloque interactivo en Visual Studio Code

Una vez finalizado el proceso de instalación, encontrarás un nuevo plugin en tu panel de control de WordPress. Actívalo, luego vuelve a la línea de comandos, navega hasta el directorio del nuevo plugin e inicia el servicio:

cd my-interactive-block && npm start

Ahora, crea una nueva entrada o página, abre el insertador de bloques y desplázate hasta la sección Widgets. Allí encontrarás un nuevo bloque llamado Mi Bloque Interactivo que puedes utilizar como plantilla para nuevas creaciones emocionantes e interactivas:

Un bloque de desarrollo interactivo
Un bloque de desarrollo interactivo

Añade el bloque a tu contenido y guarda la publicación. La vista previa de la entrada mostrará un conmutador que oculta/muestra un texto ficticio. Y ya está. Ahora puedes empezar a construir bloques interactivos.

Puedes leer más sobre cómo crear bloques interactivos utilizando la API de Interactividad en el blog del Core de WordPress, en la documentación de GitHub y en la nota de desarrollo de la API de Interactividad.

Un gran ejemplo de la API de Interactividad en funcionamiento es el sitio web de demostración wpmovies.dev.

Nuevas herramientas de diseño

WordPress 6.5 también introduce nuevas herramientas de diseño que te permiten personalizar aún más tu diseño sin depender de código CSS personalizado.

Soporte de tamaño y repetición de la imagen de fondo para el bloque Grupo

El bloque Grupo ahora admite las funciones de tamaño y repetición para las imágenes de fondo. Esto también te permite establecer el tamaño de la imagen de fondo para cubrir(cover) o contener(contain), manteniendo la misma relación de aspecto.

Control del tamaño de la imagen de fondo de un bloque Grupo
Control del tamaño de la imagen de fondo de un bloque Grupo

Además, cuando ajustas el tamaño del Fondo a Fijo, aparece un conmutador de Repetición que te permite activar o desactivar la repetición del fondo.

Soporte de relación de aspecto para el bloque Portada

El bloque Portada ha recibido soporte para la relación de aspecto. Puedes controlar la relación de aspecto del bloque a nivel global desde la interfaz Estilo Global o ajustarla individualmente en tu contenido.

Control de la relación de aspecto del bloque Portada
Control de la relación de aspecto del bloque Portada

Soporte de sombras para más bloques

Hasta ahora, el bloque Botón era el único que admitía sombras. WordPress 6.5 añade soporte de sombras a los bloques Columnas, Columna e Imagen.

Puedes añadir sombras a estos bloques desde la pestaña Estilos del bloque en los ajustes del bloque.

El bloque Imagen ahora admite sombras
El bloque Imagen ahora admite sombras

Actualizaciones del editor del sitio

Varias mejoras en el editor del sitio deberían mejorar significativamente tu experiencia de edición y agilizar tu flujo de trabajo.

Mejoras en la Vista Lista

La Vista Lista es un elemento central del flujo de trabajo de diseño, y WordPress 6.5 introduce un puñado de mejoras.

En primer lugar, ahora puedes hacer clic con el botón derecho del ratón en la Vista Lista para acceder al desplegable de configuración de bloques. Se trata de una pequeña pero útil mejora que debería agilizar tu proceso de creación, ya que facilita el acceso a la configuración de bloques desde la Vista en Lista.

Una segunda mejora te permite renombrar casi todos los bloques de la Vista Lista, excepto los siguientes:

  • core/block
  • core/template-part
  • core/pattern
  • core/navigation

También se ha mejorado la Vista Lista con un atajo de teclado. Ahora puedes seleccionar todos los bloques de la Vista Lista pulsando CTRL + A en Windows y CMD + A en Mac. Esto te permite realizar acciones en bloque fácilmente.

Duplicar y renombrar Patrones

Los patrones proporcionados por los temas no son editables, por lo que no puedes utilizarlos para crear tus propios patrones o simplemente cambiar algo en el patrón. WordPress 6.5 añade una pequeña pero útil función que permite duplicar y renombrar patrones, permitiéndote cambiar la configuración de sincronización y modificar los patrones según necesites.

Ahora es posible renombrar y eliminar patrones
Ahora es posible renombrar y eliminar patrones

Además, se han añadido dos nuevas categorías de patrones: Audio y Vídeo.

El panel de Categorías de Patrones en WordPress 6.5
El panel de Categorías de Patrones en WordPress 6.5

Un panel de Preferencias mejorado

Con WordPress 6.5, se ha actualizado el panel de Preferencias y se han reorganizado los ajustes existentes. Los principales cambios incluyen:

  • Nuevos paneles «Apariencia» y «Accesibilidad».
  • Un nuevo ajuste de la Barra de herramientas superior en Apariencia.

Activar la Barra de herramientas superior mueve todas las herramientas de bloque y de documento a una única barra de herramientas en la parte superior del editor.

La renovada interfaz de Preferencias con la barra de herramientas superior activada
La renovada interfaz de Preferencias con la barra de herramientas superior activada

Bloquear la barra de herramientas en modo sin distracciones

Antes de WordPress 6.5, no era posible acceder a la barra de herramientas de bloqueo en modo libre de distracciones, y te veías obligado a activarla y desactivarla en cualquier cambio. Desde WordPress 6.5, al mover el cursor sobre la zona superior del editor se mostrará la barra de herramientas de bloque para tus personalizaciones.

La barra de herramientas de bloques en modo sin distracciones
La barra de herramientas de bloques en modo sin distracciones

Componente LinkControl mejorado

Se ha mejorado el componente LinkControl y ahora añadir enlaces es más fácil. La siguiente imagen muestra el nuevo panel que aparece cuando haces clic en un enlace para editarlo.

Editar un enlace en WordPress 6.5
Editar un enlace en WordPress 6.5

Para ver la lista completa de cambios en el componente LinkControl, consulta el PR #50891.

Mejoras en Arrastrar y Soltar

Arrastrar y soltar se ha mejorado en varias áreas del editor.

En la vista Lista:

  • Al soltar un bloque en un bloque colapsado, el bloque colapsado se expande.
  • Aparece un cursor de arrastre cuando arrastras elementos.

En el lienzo del editor:

  • Ahora puedes arrastrar y soltar elementos al principio o al final de tu contenido.
  • Se ha mejorado la función de arrastrar y soltar elementos entre bloques contenedores hermanos.
  • También es posible arrastrar bloques en partes de plantillas.
  • Una nueva indicación visual te informa ahora de que un bloque no se puede arrastrar.
  • Puedes arrastrar y soltar elementos al principio o al final de un documento.
  • Puedes crear filas o galerías simplemente arrastrando y soltando bloques cerca de otros bloques. Por ejemplo, si añades una imagen junto a otra, el bloque Imagen existente se convertirá en un bloque Galería.
Arrastrando y soltando una imagen cerca de un bloque Imagen
Arrastrando y soltando una imagen cerca de un bloque Imagen
Ahora puedes convertir un bloque Imagen en una Galería arrastrando y soltando imágenes
Ahora puedes convertir un bloque Imagen en una Galería arrastrando y soltando imágenes

Para obtener una lista más completa de las mejoras de arrastrar y soltar, consulta el tema Seguimiento de arrastrar y soltar bloques.

Cambios y mejoras adicionales

Pero espera, ¡eso no es todo! WordPress 6.5 también trae un montón de cambios y mejoras adicionales que merece la pena mencionar.

Herramientas de apariencia para temas clásicos

Los temas clásicos también pueden aprovechar algunas de las funciones de diseño introducidas en el editor del sitio, incluso sin utilizar theme.json. A partir de WordPress 6.5, optar por el soporte del tema appearanceTool incluiría las siguientes funciones de diseño:

  • Borde
  • Color
  • Espaciado
  • Tipografía

Esto puede dar a los usuarios de temas clásicos una vista previa de las capacidades del editor del sitio y agilizar la transición de los temas clásicos a los de bloques.

Herramientas de apariencia en WordPress 6.5 con el tema Twenty Twenty-One
Herramientas de apariencia en WordPress 6.5 con el tema Twenty Twenty-One

Compatibilidad con AVIF

WordPress 6.5 también introduce la compatibilidad con el formato de imagen AVIF, caracterizado por un algoritmo de compresión avanzado que permite una calidad de imagen superior con una elevada relación de compresión. En consecuencia, AVIF produce archivos de imagen más pequeños en comparación con los formatos convencionales, incluido el formato WebP.

Ahora los usuarios pueden subir archivos AVIF sin problemas a través de la biblioteca multimedia de WordPress, de forma similar a otros formatos de imagen. Sin embargo, comprueba la compatibilidad de tu plataforma de alojamiento con el formato de archivo AVIF.

Compatibilidad del navegador de formato de imagen AVIF
Compatibilidad del navegador con el formato de imagen AVIF (Fuente: Can I Use)

Puedes comprobar si tu host admite el formato de imagen AVIF en la pantalla Salud del sitio de tu instalación de WordPress, haciendo clic en la pestaña Información y ampliando la sección Manejo de medios.

Dependencias de plugins

Algunos plugins añaden nuevas funciones sobre otros plugins como extensiones/add-ons. Para que estos plugins funcionen, primero tienes que instalar y activar sus dependencias, es decir, los plugins de los que dependen.

Desde WordPress 6.5, los desarrolladores de plugins pueden utilizar una nueva cabecera de plugin «Requieres plugins». Esta cabecera desbloquea una potente función que agiliza el proceso de instalación y activación de dependencias. Contiene una lista de slugs separadas por comas de las dependencias que necesita un plugin dependiente para funcionar.

Esto proporciona información al usuario del plugin con enlaces al repositorio de plugins de WordPress.org para instalar y activar las dependencias.

Además, el plugin de dependencias proporciona un detalle «Requerido por» que enumera los plugins dependientes que lo necesitan para funcionar. También observarás que no se te permite eliminar el plugin de dependencia a menos que elimines el plugin dependiente.

Plugins requeridos en WordPress 6.5
Plugins requeridos en WordPress 6.5

WordPress 6.5 también introduce un nuevo filtro wp_plugin_dependencies_slug que te permite filtrar los plugins de dependencia mediante programación.

Consulta la nota de desarrollo Dependencias de Plugins para profundizar en el tema.

Actualizaciones de la API HTML

Con WordPress 6.5, el Procesador de Etiquetas de la API HTML ha recibido varias mejoras, y ahora escanea todo tipo de tokens sintácticos, incluyendo tokens con y sin etiquetas, comentarios, definiciones de doctype y nodos de texto.

Esto permite cambiar el texto envuelto dentro de los límites de los tokens, lo que se denomina texto modificable, sin afectar a la estructura de un documento.

El texto modificable es todo el contenido de un nodo de texto, el contenido de un comentario HTML o el contenido entre las etiquetas de apertura y cierre de elementos especiales, como script o style.

Se han introducido varios métodos nuevos:

  • next_token() — se desplaza al siguiente token del documento
  • get_token_type() — obtiene el tipo de token encontrado
  • get_token_name() — obtiene el nombre de un token
  • get_modifiable_text() — devuelve el contenido textual correctamente descodificado de un token dado.
  • get_comment_type() — obtiene el tipo de comentario
  • paused_at_incomplete_token() — devuelve verdadero si el Procesador de Etiquetas llega al final de un documento que se ha truncado en mitad de un token.

Para una visión más amplia, consulta la nota de desarrollo Actualizaciones de la API HTML en 6.5.

Unificación del editor de sitios y entradas

En WordPress 6.5, los editores reciben varias actualizaciones destinadas a unificar la interfaz de usuario y el comportamiento.

Varios paneles de la barra lateral se han trasladado del paquete editar-post al paquete @wordpress/editor para llevar las funcionalidades correspondientes al Editor del Sitio:

  • Atributos de página (PR #57151)
  • Taxonomía de Post (PR #57049)
  • Añadido el enlace Ver al editor del sitio para los tipos de post (PR #57153)
  • Añadido el panel Discusión a la barra lateral del editor del sitio para los tipos de post que lo soportan (PR #57150)
  • Añadido el panel de imágenes destacadas (PR #57053)
  • Añadido el panel de revisión al editor del sitio (PR #57010)

Otro cambio te permite previsualizar la plantilla al editar una página en el Editor de entradas, como ya era posible en el Editor del sitio, y puedes activar/desactivar la previsualización de la plantilla desde la barra lateral de Configuración de la página.

Mejoras de rendimiento

Más de 110 mejoras de rendimiento conducen a un aumento significativo de la velocidad y la eficiencia tanto en el editor de entradas como en el editor de sitios. Los tiempos de carga son ahora dos veces más rápidos que en la 6.4, y la velocidad de procesamiento de entradas es casi cuatro veces mayor. Además, la integración de la biblioteca Performant Translations i18 contribuye a reducir el uso de memoria y la sobrecarga del tiempo de carga de los sitios web traducidos.

Mejoras en la accesibilidad

Con el lanzamiento de WordPress 6.5, más de 65 actualizaciones se fusionarán en el core para mejorar la accesibilidad en todo el panel de administración. Estas mejoras incluyen el estilo de foco, la relación de contraste, el orden de los menús del Personalizador y mucho más.

Actualizaciones de Hooks de Bloque

Introducidos por primera vez en WordPress 6.4, los Hooks de Bloque permiten colocar automáticamente un bloque en una posición específica cuando se añade otro bloque al contenido.

Anteriormente, los Hooks de Bloque estaban disponibles para plantillas, partes de plantillas y patrones que no tuvieran ninguna modificación por parte del usuario. Ahora, también pueden utilizarse con diseños modificados.

Antes de WordPress 6.5, un bloque con hook sólo podía añadirse antes o después del bloque Navegación. Con esta iteración, los bloques con hook también pueden añadirse a un Bloque de Navegación como primer o último hijo.

Además, esta iteración introduce los nuevos filtros hooked_block y hooked_block_{$hooked_block_type}.

Para una visión más profunda y ejemplos de uso, consulta la nota del desarrollador Actualizaciones de Hooks de Bloque.

Resumen

WordPress 6.5 aporta montones de cambios que te harán feliz a la hora de construir tu sitio y crear contenidos.

La nueva Biblioteca de fuentes de WordPress te permite gestionar las fuentes de una forma parecida a la gestión de medios en la Biblioteca multimedia, lo que te proporciona un mayor control sobre la tipografía. Con DataViews, puedes representar tus conjuntos de datos con diferentes diseños, filtros y opciones de búsqueda, mejorando la experiencia general. Con la API  Block Bindings y la API de Interactividad, puedes proporcionar una experiencia más dinámica y personalizada a los usuarios de tu sitio.

Con todas estas interesantes actualizaciones, WordPress 6.5 cambia las reglas del juego.

¿Has probado la nueva versión de WordPress en tu entorno de desarrollo? ¿Cuáles son tus funciones favoritas de WordPress 6.5? Comparte tus opiniones en la sección de comentarios.

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.