WordPress 6.7 está a la vuelta de la esquina, y es hora de repasar las nuevas funcionalidades, cambios y mejoras que nos depara la nueva versión.

Esta versión incluye 87 mejoras básicas, peticiones de funcionalidades y más de 200 correcciones de errores.

Se incluyen ocho versiones de Gutenberg, de la 18.6 a la 19.3, en el core de WordPress 6.7. El editor de bloques recibe 445 mejoras, 464 correcciones de errores y 55 mejoras de accesibilidad.

Llegan al core nuevas y potentes APIs para desarrolladores. La interfaz del editor incorpora varias novedades y mejoras, incluidas herramientas a las que antes sólo se podía acceder mediante código. Las mejoras de usabilidad y las nuevas herramientas de diseño deberían agilizar el proceso de diseño.

WordPress 6.7 también presenta un nuevo tema predeterminado, Twenty Twenty-Five, que se beneficia de las últimas funcionalidades incluidas en la nueva versión.

Entre las muchas novedades y cambios que llegan con WordPress 6.7, hemos seleccionado algunos de los que nos parecen más interesantes para desarrolladores y usuarios. Hay mucho que decir, así que sumérgete de lleno en las nuevas funciones.

Modo Zoom out (Alejar)

WordPress 6.7 incorpora un nuevo modo Zoom Out para ayudarte a crear y editar contenido centrándose en patrones en lugar de en bloques individuales. Esto te permite trabajar a un nivel superior y proporciona una visión global de la página en construcción.

Las siguientes imágenes muestran la nueva funcionalidad en acción. Un nuevo botón Alternar Zoom Out en la barra de herramientas superior te permite activar y desactivar la vista Zoom Out, permitiéndote trabajar alternativamente en patrones o en bloques individuales.

Alternar Zoom Out en WordPress 6.7
Alternar Zoom Out en WordPress 6.7
Alternar Zoom Out en WordPress 6.7
Alternar Zoom Out en WordPress 6.7

Con el modo Zoom out activado, puedes realizar varias acciones sobre el patrón seleccionado. La barra de herramientas del bloque proporciona controles para Arrastrar, Mover arriba/abajo y Mezclar. La vista Lista proporciona enlaces para realizar varias acciones, como Editar, Duplicar y Eliminar el patrón seleccionado.

Patrones de bloques en la vista Lista
Patrones de bloques en la vista Lista

Cuando trabajas con el Zoom Out activado, el insertador de bloques aparece por defecto en la pestaña Patrones. La vista Lista también refleja el modo de edición y muestra patrones en lugar de bloques.

Para obtener una lista más completa de las funcionalidades y cambios relacionados con el modo Zoom Out, consulta el problema de iteración del modo Zoom Out y las Notas del Desarrollador para Zoom Out en WordPress 6.7.

Meta boxes en el editor de entradas

En las versiones anteriores a la 6.7, los meta boxes impedían que el lienzo del editor de entradas se cargara en un iframe. Esto hacía que varias ventajas no estuvieran disponibles, como el aislamiento del CSS de bloques y temas de la interfaz de usuario del editor y la precisión de las unidades CSS relativas para las media queries y la ventana gráfica. En resumen, este problema impedía utilizar el mismo CSS en el editor y en las vistas del front end.

A partir de WordPress 6.7, el contenido del editor y los meta boxes pueden coexistir en la interfaz del editor. Gracias a una nueva vista dividida, el lienzo del editor de entradas se carga en un iframe incluso cuando la entrada/página actual tiene uno o más meta boxes. Según la nota del desarrollador:

Este cambio garantiza una experiencia WYSIWYG coherente entre el Editor y las vistas del front end. Además, hace que los meta boxes estén más disponibles que antes. Permite referenciar visualmente cualquier parte del contenido de la entrada mientras se trabaja con cualquier meta box o viceversa.

Iframed canvas con meta boxes en WordPress 6.7
Iframed canvas con meta boxes en WordPress 6.7

Esta implementación utiliza flex para hacer que la vista de contenido y el área metabox sean desplazables.

Esta mejora también aporta varios cambios a la interfaz del editor de entradas:

  • La altura del área del metabox está limitada al 50% por defecto para evitar que ocupe demasiado espacio.
  • El área del metabox es plegable o redimensionable en función de la altura de la ventana gráfica.
  • El estado de la altura redimensionada y el estado abierto/cerrado son persistentes en las preferencias del usuario.
Área de meta box redimensionable en WordPress 6.7
Área de meta box redimensionable en WordPress 6.7

Consulta la nota de desarrollo para obtener una descripción más detallada para desarrolladores.

Mejoras en la API de Block Bindings

Introducida por primera vez en WordPress 6.5, la API Block Bindings te permite vincular los atributos de un bloque a una fuente de datos externa. La primera versión de la API Block Bindings permitía vincular valores de campos personalizados a los atributos de los bloques Título, Párrafo, Botón e Imagen. WordPress 6.6 abrió la puerta a una nueva y potente funcionalidad basada en la API Block Bindings: Sobrescritura de Patrones.

WordPress 6.7 nos trae nuevas funcionalidades y mejoras que han sido posibles gracias a la API Block Bindings y a una nueva interfaz predeterminada para gestionar la fuente meta de la entrada.

Nueva Interfaz de Usuario para Block Bindings

Esta iteración proporciona una nueva interfaz para gestionar Block Bindings desde la barra lateral de ajustes, utilizando la fuente de vinculación de meta-bloques incorporada para los bloques Encabezado, Párrafo, Botón e Imagen.

Una vez que hayas registrado tus campos personalizados y seleccionado uno de los bloques admitidos, aparecerá un nuevo panel de Atributos en la barra lateral de configuración de bloques. Cuando añades uno o más campos de entrada personalizados, el panel Atributos se vuelve interactivo, permitiéndote conectar atributos de bloque a tus campos personalizados.

El nuevo panel Atributos en WordPress 6.7
El nuevo panel Atributos en WordPress 6.7

Esto te ayuda a crear vínculos sin tener que añadir manualmente el código en el Editor de Código.

Por defecto, sólo los administradores pueden crear y modificar enlaces. Los desarrolladores pueden anular el comportamiento por defecto utilizando los filtros block_editor_settings_all o map_meta_cap.

La nota de desarrollo advierte sobre dos limitaciones relacionadas con la nueva interfaz de Atributos.

  • Conectar atributos de bloque a fuentes personalizadas todavía no es posible con esta versión. Esta mejora se implementará en una futura versión.
  • Una segunda limitación se refiere al tipo de campos personalizados que se muestran en el panel Atributos. Actualmente, sólo se admiten campos de tipo cadena o texto enriquecido. De nuevo, podemos esperar un soporte progresivo para otros tipos de campos personalizados con futuras iteraciones.

Consulta la nota de desarrollo para ver un interesante caso de uso de la API mejorada de enlaces de bloques con plantillas de entradas personalizadas.

Nuevo atributo de metaetiqueta de entrada

Se ha implementado un nuevo atributo label para permitir a los desarrolladores de plugins añadir una etiqueta personalizada para los campos meta de la entrada durante el registro. Ahora puedes utilizar el siguiente código para registrar tus campos personalizados con etiquetas:

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field',
		'label' => __('Book title')
	)
);

Si se establece, la etiqueta se mostrará en lugar de la clave meta en la interfaz de usuario de enlaces de bloque. La siguiente imagen muestra el panel Atributos con etiquetas personalizadas:

El panel Atributos con etiquetas de campo personalizadas
El panel Atributos con etiquetas de campo personalizadas

Capacidad de edición de block bindings

Junto con la nueva interfaz Block Bindings, se puede utilizar un nuevo ajuste del editor canUpdateBlockBindings para determinar si la nueva interfaz es interactiva para los usuarios. Esta opción está predeterminada en la nueva capacidad edit_block_binding, que se establece en true para los administradores y en false para los demás usuarios.

Puedes cambiar el comportamiento por defecto utilizando el filtro block_editor_settings_all.

Nuevas APIs y funcionalidades para desarrolladores

WordPress 6.7 aporta nuevas funcionalidades para que los desarrolladores utilicen block bindings en el editor.

Una nueva API del editor te permite registrar fuentes personalizadas definidas en el servidor con valores bootstrapped. En resumen, puedes registrar fuentes externas y renderizarlas en la interfaz de usuario utilizando las API del servidor.

Twenty Twenty-Five, el nuevo tema por defecto, proporciona un buen ejemplo de bootstrapping de fuentes con el patrón Copyright. En el archivo functions.php del tema, encontrarás el siguiente código:

// Registers block binding sources.
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * Registers the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return void
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'              => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
				'get_value_callback' => 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;

// Registers block binding callback function for the copyright.
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * Callback function for the copyright block binding source.
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return string Copyright text.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' )
		);

		return $copyright_text;
	}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

Este código muestra © YEAR en la interfaz de usuario por defecto, como se muestra en la siguiente imagen.

Fuentes personalizadas con valores bootstrapped
Fuentes personalizadas con valores bootstrapped

Observa que el párrafo del lienzo de bloque no es dinámico y sólo muestra la etiqueta de la fuente.

Para comprobar el marcado de este bloque, tienes que crear una copia del patrón Copyright de Twenty Twenty-Five y abrir tu copia en el editor de código:

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

Puedes leer más sobre las nuevas funcionalidades de Block Bindings en la nota de desarrollo de la 6.7.

Incorporaciones a las vistas de datos

Vistas de datos es una interfaz de usuario mejorada para colecciones de plantillas, patrones, páginas y más. También es un componente y una API que te permite representar conjuntos de datos en el Editor de Sitios utilizando distintos tipos de diseños, como tablas, cuadrículas, listas, etc.

Lista de diseños en WordPress 6.7
Lista de diseños en WordPress 6.7

Las vistas de datos se incorporaron por primera vez con WordPress 6.5 y se mejoraron con WordPress 6.6. Ahora WordPress 6.7 añade nuevas características y mejoras que las hacen más flexibles y funcionales.

A partir de WordPress 6.7, aparece un icono de engranaje en la esquina superior derecha de la vista de cuadrícula. Cuando haces clic en este icono, un panel de Apariencia muestra una serie de opciones de Vista. Aquí puedes ordenar los elementos de la vista, ajustar la densidad de la cuadrícula, establecer el número de elementos por página y seleccionar las propiedades del elemento que se mostrarán en la vista previa.

Vista previa tamaño pequeño
Vista previa tamaño pequeño
Vista previa tamaño mediano
Vista previa tamaño mediano

Un botón de alternancia permite a los usuarios mostrar/ocultar los filtros de vista, mejorando la experiencia en pantallas estrechas.

Un botón de alternancia para mostrar/ocultar filtros en las vistas de Datos
Un botón de alternancia para mostrar/ocultar filtros en las vistas de Datos
Ocultar filtros en las vistas de Datos en WordPress 6.7
Ocultar filtros en las vistas de Datos en WordPress 6.7

Cuando estableces uno o más filtros, el botón de alternar filtros muestra el número de filtros activos.

la pantalla de alternar filtros en WordPress 6.7
la pantalla de alternar filtros en WordPress 6.7

Los cambios adicionales en las Vistas de datos incluyen una relación de aspecto configurable, opciones de vista de datos fuera de un menú y mucho más.

Bloque Query Loop  Mejorado

El bloque Query Loop (Bucle de consulta) es uno de los bloques más potentes y complejos. Debe proporcionar la máxima funcionalidad y posibilidades de personalización sin dejar de ser intuitivo y fácil de usar. Con WordPress 6.7, Query Loop incorpora varias mejoras y novedades que lo hacen más versátil y fácil de usar.

La anterior consulta Heredar del control de configuración de plantilla se ha modificado y ahora debería ser más intuitiva y sencilla.

Al editar una plantilla, el panel de configuración del Query Loop muestra un control Tipo de consulta. Las siguientes imágenes muestran las opciones de configuración para los dos tipos de consulta diferentes: Predeterminada y Personalizada.

El control Bucle de consulta en WordPress 6.7
El control Bucle de consulta en WordPress 6.7
El control Bucle de consulta en WordPress 6.7
El control Bucle de consulta en WordPress 6.7

También se ha mejorado la detección de contexto. El bloque Query tiene un ajuste inherit que se establece en true por defecto. En una sola página, esto no tiene ningún efecto en los resultados de la consulta, y el control correspondiente se ha eliminado con WordPress 6.7.

Configuración del Query Loop para una sola página en WordPress 6.7
Configuración del Query Loop para una sola página en WordPress 6.7

Por otra parte, en una plantilla de archivo o de index, el contenido del bloque Query depende del tipo de solicitud. Esto significa que la página de archivo de una categoría específica muestra por defecto el contenido asignado a esa categoría, independientemente de otros ajustes establecidos explícitamente por el usuario, como el número de entradas.

Puedes encontrar una lista completa de problemas relacionados con el bloque Query Loop aquí.

Incorporaciones a la gestión de medios

Con WordPress 6.7, la gestión multimedia es más funcional y eficiente. Desde tamaños automáticos para imágenes de carga perezosa hasta soporte generalizado para imágenes de fondo, estas son algunas de las mejoras en la gestión de medios que llegan con la versión 6.7.

Tamaños automáticos para imágenes de carga perezosa

Establecer un valor por defecto para sizes permite al navegador identificar el archivo de imagen a utilizar a partir del valor del atributo srcset. De esta forma, el navegador puede determinar por adelantado el ancho de la imagen antes de conocer el diseño de la página.

La especificación HTML permite que las imágenes omitan el atributo sizes o lo establezcan explícitamente en auto o en una cadena que empiece por auto:

la palabra clave auto es una anchura que se calcula al analizar un atributo sizes. Si está presente, debe ser la primera entrada y el valor <source-size-list> completo debe ser la cadena auto (ASCII insensible a mayúsculas y minúsculas) o empezar por la cadena auto, (ASCII insensible a mayúsculas y minúsculas).

Con WordPress 6.7, el atributo auto se añade automáticamente al principio del atributo sizes para cualquier imagen cargada de forma perezosa. Esto supone una mejora del rendimiento en la carga de la página.

Tamaños automáticos para una imagen de carga lenta en WordPress 6.7
Tamaños automáticos para una imagen de carga lenta en WordPress 6.7

Los desarrolladores pueden corregir el valor del atributo sizes utilizando la nueva función wp_img_tag_add_auto_sizes().

Mejoras en la biblioteca de fuentes

WordPress 6.7 también aporta algunas mejoras útiles a la biblioteca de fuentes. En primer lugar, las fuentes están ahora agrupadas por su origen (Tema y Personalizada), lo que facilita la comprensión del origen de cada fuente de un vistazo.

Fuentes agrupadas por origen en WordPress 6.7.
Fuentes agrupadas por origen en WordPress 6.7: Fuentes del tema
Fuentes agrupadas por origen en WordPress 6.7: Fuentes personalizadas
Fuentes agrupadas por origen en WordPress 6.7: Fuentes personalizadas

Un nuevo botón de opción Seleccionar todo te ahorra unos cuantos clics cuando buscas una fuente en Google Fonts.

Seleccionar todas las variantes de fuentes en WordPress 6.7
Seleccionar todas las variantes de fuentes en WordPress 6.7

Los cambios adicionales incluyen un nuevo mensaje No hay fuentes instaladas cuando las fuentes no están disponibles y se ha mejorado el estado No hay fuentes instaladas cuando las fuentes están instaladas pero no activadas.

Compatibilidad con el formato HEIC

El formato HEIC (High Efficiency Image Container) es una variante actualizada del HEIF (High Efficiency Image Format), utilizado por Apple en todos los iPhones y los iPads con iOS 11 o posterior. Este formato garantiza que los usuarios de iOS aprovechen al máximo las cámaras 4k y tengan archivos de menor tamaño.

En WordPress 6.7, las subidas de imágenes HEIC se convierten automáticamente a JPEG en el servidor cuando es posible. Esta adición permite a los usuarios ver imágenes HEIC en la Biblioteca multimedia y utilizarlas en entradas y páginas aunque su navegador no admita HEIC.

Compatibilidad del navegador con el formato de imagen HEIF/HEIC
Compatibilidad del navegador con el formato de imagen HEIF/HEIC (Fuente Caniuse)

Herramientas de diseño nuevas y mejoradas

Con WordPress 6.7, los diseñadores tienen acceso a nuevas y potentes herramientas de diseño, como soporte ampliado de bloques, preajustes de tamaño de fuente y mucho más.

IU de soporte de imágenes de fondo para los bloques Verso, Cita y Contenido de la entrada

WordPress 6.7 incorpora nuevos controles de interfaz de usuario para gestionar las imágenes de fondo de algunos de bloques en estilos globales. Estos bloques incluyen Verso, Cita y Contenido de la publicación.

IU de imagen de fondo en WordPress 6.7
IU de imagen de fondo en WordPress 6.7

Establecer una imagen de fondo en los estilos globales se aplica a todo el sitio web. Una vez que hayas añadido una imagen de fondo para un bloque, sólo tienes que personalizar los ajustes de las instancias individuales del mismo bloque para personalizar su apariencia.

Personalizar la imagen de fondo en WordPress 6.7
Personalizar la imagen de fondo en WordPress 6.7

Puedes utilizar esta función en el bloque Contenido de la entrada para envolver el contenido de la entrada y de la página en plantillas. La siguiente captura de pantalla proporciona un ejemplo de cómo utilizar la imagen de fondo.

Edición de la imagen de fondo en el bloque Contenido de la entrada
Edición de la imagen de fondo en el bloque Contenido de la entrada

Soportes de bloque adicionales

Además del soporte de fondo para los bloques Verso, Cita y Contenido de la entrada, WordPress 6.7 presenta nuevos soportes para varios bloques que encantarán a los diseñadores y desarrolladores de temas.

El soporte para bordes se ha ampliado a muchos bloques, como Botones, Categorías, Galería, Encabezado, Texto multimedia, Párrafo, Título de entrada, Cita y muchos otros.

Controles de bordes para medios y texto
Controles de bordes para medios y texto

Esta versión también añade soporte de color para Botones, Elemento de Lista y Últimos Comentarios.

Controles de color para los elementos de la lista en WordPress 6.7
Controles de color para los elementos de la lista en WordPress 6.7

WordPress 6.7 también trae una incorporación muy esperada por diseñadores y desarrolladores de temas: soporte de sombras para el bloque Grupo.

Controles de sombra para el bloque Grupo
Controles de sombra para el bloque Grupo

Preajustes de tamaño de fuente

WordPress 6.7 introduce una nueva interfaz de usuario para controlar los preajustes de tamaño de fuente en la interfaz de Estilos globales. Esto permite a los usuarios anular los valores predeterminados del tema y crear, editar, eliminar y aplicar ajustes preestablecidos de tamaño de fuente mediante el editor.

También incluye la posibilidad de activar la tipografía fluida y establecer valores fluidos personalizados.

Para probarlo tú mismo, abre la interfaz de Estilos y ve a Tamaños de fuente > Preconfiguraciones de tamaño de fuente. Un nuevo panel mostrará la lista de los preajustes de tamaño de fuente disponibles. Haz clic en el preajuste de tu elección y realiza tus modificaciones.

Editar ajustes preestablecidos de tamaño de fuente en WordPress 6.7
Editar ajustes preestablecidos de tamaño de fuente en WordPress 6.7

Todos los cambios se aplicarán en todo tu sitio web.

Mejoras en la interfaz de usuario y otras funciones de edición

WordPress 6.7 introduce más cambios en la interfaz de usuario y funciones que mejoran la experiencia de edición. Examinemos algunas de ellas.

El botón Publicar ha cambiado de posición

Los botones Cancelar y Publicar del panel de comprobación previo a la publicación han cambiado de posición, por lo que ahora puedes publicar el artículo sin mover el cursor en la página.

El botón Publicar se ha desplazado a la derecha
El botón Publicar se ha desplazado a la derecha

Nombres de bloque personalizados en el inspector de bloques

En WordPress 6.7, cuando estableces un nombre de bloque personalizado, ahora también se muestra en el inspector de bloques. En WordPress 6.6, el inspector de bloques mostraba el nombre de bloque por defecto (por ejemplo, Título).

Los nombres de bloque personalizados no se mostraban en el inspector de bloques en WordPress 6.6
Los nombres de bloque personalizados no se mostraban en el inspector de bloques en WordPress 6.6
Nombres de bloques personalizados en el inspector de bloques en WordPress 6.7
Nombres de bloques personalizados en el inspector de bloques en WordPress 6.7

Desactivar el modal Elegir un patrón

Ahora puedes desactivar el modal Elegir un patrón que aparece cuando creas una página nueva. Para desactivar esta funcionalidad, abre Preferencias en el menú Opciones y desactiva la opción Mostrar patrones de inicio.

Desactivar el modal Elegir un patrón en WordPress 6.7
Desactivar el modal Elegir un patrón en WordPress 6.7

Enlace automático del número de teléfono

El campo de enlace añade automáticamente tel: cuando añades un número de teléfono.

Un número de teléfono enlazado en WordPress 6.7
Un número de teléfono enlazado en WordPress 6.7

Permitir soltar varias imágenes en el bloque de imágenes

Ahora puedes soltar varias imágenes en un bloque Imagen y convertirlo en un bloque Galería.

Arrastrando múltiples imágenes sobre un bloque Imagen en WordPress 6.7
Arrastrando múltiples imágenes sobre un bloque Imagen en WordPress 6.7
Un bloque Galería generado al arrastrar varias imágenes sobre un Bloque Imagen
Un bloque Galería generado al arrastrar varias imágenes sobre un Bloque Imagen

Nuevas funcionalidades y APIs para desarrolladores

WordPress 6.7 incluye varias APIs nuevas para que los desarrolladores añadan más funcionalidades a sus plugins. Se ha añadido una nueva API de opciones de vista previa, y otras APIs se han ampliado con nuevas funcionalidades, como la API HTML y la API de interactividad. Exploremos algunas de ellas.

API de opciones de vista previa

Una nueva API de Opciones de Vista Previa permite a los desarrolladores de plugins ampliar el menú desplegable de previsualización en el editor de entradas/páginas. La API introduce un nuevo componente PluginPreviewMenuItem que los plugins pueden utilizar para añadir elementos de menú personalizados con títulos y controladores de clic personalizados al menú desplegable Vista previa.

Los desarrolladores de plugins pueden añadir opciones de vista previa personalizadas al editor de WordPress para un montón de cosas, como:

  • Previsualizaciones de formatos personalizados (piensa en publicaciones en redes sociales)
  • Previsualizaciones de entradas o páginas con restricciones para determinados roles de usuario
  • Modos de previsualización adicionales, como modo oscuro, correos electrónicos, etc.

Dependiendo de los accesorios proporcionados, puedes utilizar elementos de menú de previsualización personalizados como botones o enlaces.

Aquí tienes un ejemplo de la nota de desarrollo sobre cómo puedes utilizar la nueva API:

import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { registerPlugin } from '@wordpress/plugins';

function onPreviewClick() {
	// Handle preview action
}

const CustomPreviewMenuItem = () => (
	<PluginPreviewMenuItem
		onClick={ onPreviewClick }
	>
		{ __( 'Your menu item label' ) }
	</PluginPreviewMenuItem>
);

registerPlugin( 'custom-preview-menu-item', {
	render: CustomPreviewMenuItem,
} );

Nueva API de Registro de Plantillas de plugins

Antes de WordPress 6.7, la única opción para añadir plantillas de bloque personalizadas era a través de un tema. Registrar una plantilla de bloque mediante un plugin era imposible a menos que utilizaras complicadas soluciones.

Gracias a la nueva API de Registro de Plantillas, ahora puedes registrar plantillas de bloques personalizadas mediante un plugin. La nueva API proporciona dos nuevas funciones para registrar y anular el registro de una plantilla: register_block_template() y unregister_block_template().

Su uso es bastante sencillo. Sólo tienes que pasar a la función un par de parámetros:

$template_name: El nombre de la plantilla en forma de plugin_uri//template_name (fíjate en el //)
$args: un array con los siguientes argumentos:

  • title
  • description
  • content
  • post_types

Para una visión más detallada de la nueva API y ejemplos de uso, consulta la nota del desarrollador y el pull request original.

Nuevas API de registro de tipos de bloque

Una nueva función wp_register_block_metadata_collection() registra un tipo de bloque a partir de un archivo de manifiesto, si existe, en lugar de leer y analizar directamente el archivo block.json. Esto es especialmente útil cuando un plugin registra varios tipos de bloque, ya que evita leer y analizar el archivo block.json para cada tipo de bloque.

Ten en cuenta que esta nueva función no sustituye a las funciones existentes register_block_type() y register_block_type_from_metadata(). Su uso es opcional, pero se recomienda a los plugins que registren varios bloques para mejorar el rendimiento.

Consulta la nota de desarrollo para obtener una visión general de la nueva API y un ejemplo de uso.

Opciones del nivel de encabezado

Gracias al nuevo atributo levelOptions, los desarrolladores pueden especificar qué niveles de encabezamiento deben aparecer en la interfaz desplegable de los bloques Encabezamiento, Título del sitio, Lema del sitio, Título de la consulta, Título de la entrada y Título de los comentarios.

Lo utilizarás sobre todo en plantillas de bloques, partes de plantillas y patrones. El siguiente código de ejemplo desactiva los encabezados H1, H5 y H6 en un bloque Encabezado:

<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><em>Schedule a Demo</em></h2>
<!-- /wp:heading -->

La siguiente imagen muestra las opciones disponibles en la barra de herramientas del bloque:

Niveles de encabezado en WordPress 6.7
Niveles de encabezado en WordPress 6.7

También puedes filtrar el atributo levelOptions con un plugin o en el archivo de funciones de tu tema utilizando el filtro register_block_type_args. La nota de desarrollo proporciona el siguiente ejemplo:

function example_modify_heading_levels_globally( $args, $block_type ) {
	 
	if ( 'core/heading' !== $block_type ) {
		return $args;
	}
 
	// Remove H1, H2, and H6.
	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
	 
	return $args;
}
add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );

Cambios adicionales para desarrolladores en WordPress 6.7

  • Ahora es posible insertar un bloque con hook como primer o último hijo de un bloque de Parte de plantilla. (Ver la nota del desarrollador)
  • Los bloques con hooks ahora respetan la propiedad multiple block-supports. (Ver la nota de desarrollo)
  • Los componentes de la interfaz de usuario reciben un número considerable de actualizaciones. (Véase la nota de desarrollo).
  • Las nuevas funciones getServerState() y getServerContext() proporcionan una forma de suscribirse a los cambios de estado/contexto de la API de Interactividad en la navegación por el lado del cliente.
  • Los módulos de script reciben un par de actualizaciones con un nuevo módulo de script @wordpress/a11y y un nuevo filtro script_module_data_{$module_id}.
  • La API HTML recibe varias mejoras, como la compatibilidad con casi todas las etiquetas HTML, un nuevo método set_modifiable_text() que permite sustituir el contenido de texto de elementos autocontenidos como script, style, o title, un modo de analizador completo en el Procesador HTML, y mucho más.
  • Se han incorporado al core varias mejoras de internacionalización (i18n), como una nueva función has_translation() para determinar si ya existe una traducción sin cargarla primero, correos electrónicos a admin_email que se envían en la configuración local del usuario, y una advertencia para los desarrolladores si están cargando traducciones en un plugin o tema antes de que se conozca el usuario actual.

Resumen

En esta inmersión profunda en WordPress 6.7, hemos explorado muchas funcionalidades y mejoras impresionantes que llegarán con esta versión, desde un nuevo y sorprendente tema predeterminado, hasta el modo Zoom Out y los Meta boxes en el editor de entradas, las adiciones a la API Block Bindings, las mejoras en la gestión de medios, las nuevas herramientas de diseño y muchas nuevas funcionalidades para los desarrolladores de plugins.

Ahora te toca a ti. ¿Has probado ya WordPress 6.7? ¿Cuáles son tus funcionalidades o cambios favoritos de la versión 6.7? Háznoslo saber en los 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.