WordPress 6.6 «Dorsey» ya está disponible. La nueva versión se centra en perfeccionar y mejorar varias funciones introducidas en versiones anteriores. Sin embargo, muchas adiciones hacen que el core avance un paso más en el camino de la fase 3 del desarrollo de WordPress.

En WordPress 6.6 se incluye un total de 299 tickets de Core Track, junto con 392 mejoras, 462 correcciones de errores y 46 mejoras de accesibilidad para el Editor de Bloques.

Entre las muchas nuevas funciones que vienen con WordPress 6.6, la sobrescritura de patrones de bloques son las que más nos gustan. Inicialmente previstas para su lanzamiento con WordPress 6.5, y luego pospuestas a la 6.6, la sobreescritura de patrones son la segunda implementación de la API de Enlaces de Bloques y nos dan una mejor idea de lo que vendrá con futuras versiones de WordPress.

Sin embargo, la sobreescritura de patrones son sólo una de las numerosas novedades de la próxima versión de WordPress. Así que, empecemos nuestro viaje para descubrir las nuevas funciones y mejoras más interesantes que llegarán con WordPress 6.6.

Sobreescritura sincronizada de patrones

La primera implementación de la API de Enlace de Bloques fue para conectar atributos de bloques y campos personalizados. Con WordPress 6.6, una segunda iteración desbloquea una mejora de los patrones sincronizados llamada Sobreescritura de Patrones Sincronizados.

Hay dos tipos de patrones de bloques:

  • Patrones de bloques sincronizados
  • Patrones de bloques estándar (no sincronizados)

La diferencia entre los dos tipos es que todos los cambios realizados en un patrón sincronizado se aplican a todas las apariciones de un patrón en todo tu sitio web. En cambio, los cambios en un patrón de bloques estándar sólo afectan a una instancia específica del patrón.

La sobreescritura de patrones sincronizados se encuentra en algún punto intermedio entre ambos extremos. Gracias a la API de Enlaces de Bloques, ahora puedes crear patrones de bloques que mantengan la misma estructura en todo tu sitio web y cambien en sincronía con las personalizaciones realizadas en la estructura y el estilo del patrón en el editor del sitio. Sin embargo, puedes cambiar el contenido del patrón en una instancia individual sin afectar a otras instancias del mismo patrón en el sitio.

Veamos cómo funcionan la sobreescritura de patrones.

En primer lugar, necesitas un patrón sincronizado. Puedes construirlo desde cero en el editor de entradas o encontrar patrones sincronizados existentes en la sección Patrones del editor del sitio.

Paso 1: Ve a Patrones y duplica uno de los patrones existentes, como el patrón Hero del tema por defecto Twenty Twenty-Four. Añade un nombre y establece la copia como Patrón sincronizado.

Duplicar patrón en el editor del sitio
Duplicar patrón en el editor del sitio

Paso 2: Navega a la sección Mis patrones y encuentra tu nuevo patrón sincronizado. Ábrelo en el editor del sitio y selecciona individualmente todos los bloques que necesites sobreescribir.

Ve a la barra lateral de configuración de bloques y desplázate hasta la sección Avanzado. Aquí encontrarás un botón, Activar Anulaciones.

Activar anulaciones de patrón
Activar anulaciones de patrón

Cuando hagas clic en el botón, se te pedirá que añadas un nombre y establezcas el tipo de patrón.

Anulaciones activadas
Anulaciones activadas

Paso 3: Repite el mismo proceso para cada bloque que quieras sobreescribir. Cuando hayas terminado, crea una nueva entrada o página e incluye tu patrón personalizado.

Añadiendo un patrón al lienzo del editor
Añadiendo un patrón al lienzo del editor

Paso 4: Cambia el contenido de los bloques a sobreescribir y guarda la entrada. Por último, comprueba el resultado en el front end.

Un patrón de bloques con anulaciones en el editor de entradas
Un patrón de bloques con anulaciones en el editor de entradas

Y ya está. Puedes añadir cualquier número de estos patrones en cualquier lugar de tu sitio web, y cada nueva instancia muestra el mismo contenido original, pero está lista para su personalización.

Ahora, vamos a comprobar el código de estos patrones. Vuelve a la sección Patrones del Editor de Sitios. Selecciona Mis patrones y añade tu patrón. A continuación, abre el menú Opciones y selecciona Editor de código para ver el código del patrón.

En nuestro ejemplo, el código debería ser algo parecido a lo siguiente:

<div class="wp-block-group">
	<!-- wp:heading {
		"textAlign":"center",
		"level":1,
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
				}
			},
		"name":"Hero title"
	},"fontSize":"x-large"} -->
		<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
	<!-- /wp:heading -->
	...
</div>

En el delimitador de bloque, verás la propiedad metadata.bindings. Esto hace que el bloque Título sea editable. El enlace __default indica a WordPress que conecte todos los atributos admitidos a una fuente específica, que es "core/pattern-overrides".

La misma propiedad se aplica a todos los bloques que necesites hacer editables. Mira, por ejemplo, el bloque Botón:

<div class="wp-block-buttons">
	<!-- wp:button {
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
					}
				},
			"name":"Hero button"
			}
		} -->
	<!-- /wp:button -->
	<div class="wp-block-button">
		<a class="wp-block-button__link wp-element-button">About us</a>
	</div>
	...
</div>

Ahora, volvamos al editor de entradas y cambiemos al Editor de código. El código debería ser similar al siguiente

<!-- wp:block {
	"ref":261,
	"content":{
		"Hero title":{
			"content":"Managed WordPress Hosting"
		},
		"Hero body":{
			"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
		},
		"Hero button":{
			"text":"Learn more",
			"url":"https://kinsta.com/wordpress-hosting/",
			"linkTarget":"",
			"rel":""
		},
		"Second button":{
			"text":"View pricing",
			"url":"https://kinsta.com/pricing/",
			"linkTarget":"_blank",
			"rel":"noreferrer noopener"
		},
		"Hero image":{
			"id":268,
			"alt":"",
			"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
		}
	}
} /-->

Aquí no verás ningún bloque, sino sólo una referencia al patrón de bloques y un conjunto de propiedades para cada bloque que se establecen como editables.

De nuevo, puedes añadir cualquier número de patrones de bloques en cualquier lugar de tu sitio web, y estos patrones coincidirán con la misma estructura y diseño que hayas construido en el Editor de Sitios.

Editando el estilo y la estructura del patrón con anulaciones en el Editor de Sitios
Editando el estilo y la estructura del patrón con anulaciones en el Editor de Sitios

A continuación, puedes cambiar el contenido de los bloques editables individualmente, manteniendo la misma estructura.

Patrón con anulaciones en el front-end
Patrón con anulaciones en el front-end

Como las modificaciones de patrones son una implementación de la API de Bloques, sólo podemos modificar los bloques compatibles: Encabezado, Párrafo, Imagen y Botones.

Puedes sobreescribir los atributos de imagen URL, Alt y Título
Puedes sobreescribir los atributos de imagen URL, Alt y Título

Puedes profundizar en las anulaciones de patrones en este vídeo de WordPress TV y en esta entrada de blog de Nick Diego.

Las anulaciones de patrones están sujetas a futuras mejoras y novedades. El debate continúa en GitHub aquí y aquí.

Editar valores de campos personalizados desde bloques conectados

WordPress 6.5 introdujo los campos personalizados como fuente de datos (core/post-meta) para los atributos de los bloques, permitiendo a los usuarios conectar los valores de los campos personalizados a los bloques. WordPress 6.6 aporta nuevas mejoras a esta función, como la posibilidad de editar los valores de los campos personalizados directamente desde el bloque conectado.

Puedes probarlo tú mismo registrando un nuevo conjunto de campos personalizados desde un plugin o el archivo functions de tu tema, asegurándote de establecer show_in_rest en true al registrar el meta de la entrada. Aquí tienes un ejemplo:

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

Una vez hecho esto, crea una nueva entrada o página y añade un nuevo campo personalizado con el mismo nombre. Añade uno de los bloques compatibles (por ejemplo, un bloque Encabezado) al lienzo, cambia al editor de Código y modifica el bloque como se muestra a continuación:

<!-- wp:heading 
{
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"book_title"
				}
			}
		}
	}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

Guarda la entrada/página y comprueba el resultado. Ahora puedes editar el contenido del encabezado directamente desde el bloque. El valor del campo personalizado debería reflejar tus cambios.

Editar un campo personalizado desde el bloque conectado en WordPress 6.6
Editar un campo personalizado desde el bloque conectado en WordPress 6.6

Además, un nuevo panel proporciona ahora información sobre los atributos de bloque conectados a los campos personalizados, mostrando los atributos de bloque vinculados a los campos personalizados.

Atributos de imagen con enlaces de bloque en WordPress 6.6
Atributos de imagen con enlaces de bloque en WordPress 6.6

Esta característica viene con algunas funcionalidades relacionadas:

  • Puedes actualizar los valores de los campos personalizados desde un bucle de consulta.
  • Si hay varios bloques conectados al mismo campo personalizado, comparten el mismo valor de campo personalizado y cambian en sincronía con él.
  • Los usuarios pueden editar los campos personalizados sólo en las entradas para las que están autorizados.

Nota final: Como ya se ha mencionado, los bloques que admiten la API de Vinculación de Bloques siguen estando limitados a lo siguiente:

Bloque Atributos
Imagen url, alt, title
Encabezamiento content
Párrafo content
Botón url,text, linkTarget, rel

Mejoras en Data Views (Vista de datos)

Introducido con WordPress 6.5, Data Views (Vista de datos) son una interfaz de usuario mejorada para colecciones de plantillas, patrones, entradas, medios y mucho más. La nueva interfaz desempeña un papel esencial en la fase 3 de la hoja de ruta de desarrollo — Colaboración — y, como tal, podemos esperar más mejoras con futuras versiones de WordPress, «incluidas mejoras en el flujo de trabajo para asignar personas a la revisión de entradas o crear vistas personalizadas para agilizar los procesos». A partir de WordPress 6.6, la nueva interfaz sólo existe en el editor del sitio, pero debería extenderse a más secciones de administración en futuras versiones.

WordPress 6.6 introduce nuevos diseños para las páginas de administración. La gestión de las partes de plantilla se ha eliminado y se ha integrado en la sección de Patrones, mientras que el menú de Patrones del Editor de Sitios se ha reorganizado en dos secciones, con las partes de plantilla en la parte superior y los patrones debajo.

El nuevo menú Patrones en WordPress 6.6
El nuevo menú Patrones en WordPress 6.6

Para las páginas, un nuevo panel proporciona una lista de páginas y permite previsualizar cualquier página con un solo clic.

Vista previa de páginas en WordPress 6.6
Vista previa de páginas en WordPress 6.6

También verás nuevas opciones de diseño disponibles en el menú Opciones de vista. (El icono de la esquina superior derecha).

Vista de opciones en WordPress 6.5
Vista de patrones con Opciones de vista en WordPress 6.5
Vista de opciones en WordPress 6.6
Vista de patrones con opciones de visualización en WordPress 6.6

Junto a estos cambios más importantes, la Vista de Datos se ve afectada por otras actualizaciones menores que mejoran la interfaz y la hacen más funcional e informativa, como una nueva función de edición en lote y una insignia en la página de Portada o en la página de Entradas.

Una insignia que indica la página de Portada en WordPress 6.6
Una insignia que indica la página de Portada en WordPress 6.6

WordPress 6.6 lleva la Vista de Datos un paso más allá, pero aún estamos en una fase temprana. En el futuro, veremos la introducción de una API de extensibilidad que permitirá a los desarrolladores actuar directamente sobre las vistas. Para conocer más a fondo el futuro de la Vista de datos, consulta Data Views Update — June 2024 (Actualización de la Vista de Datos – Junio de 2024), de Anne McCarthy.

Otras mejoras en el Editor de Bloques

WordPress 6.6 incorpora 8 versiones de Gutenberg al core — de la 17.8 a la 18.5 — con muchas mejoras en la interfaz, la biblioteca React, la API de bloques y mucho más. Éstas son sólo algunas:

Un nuevo flujo de publicación

Con la 6.6, la barra lateral de configuración de la publicación/página se ha limpiado y se ha hecho más ligera y coherente. Con esta iteración, el proceso de unificación entre el editor de entradas y el del sitio da un paso adelante, y ambos editores tienen ahora el mismo flujo de publicación.

Barra lateral de ajustes de página en WordPress 6.5 vs. 6.6
Barra lateral de ajustes de página en WordPress 6.5 vs. 6.6

La experiencia de publicación se ha estandarizado, y un nuevo panel de Estado y visibilidad te permite establecer el estado de la entrada/página en una posición más cómoda.

Ajustes de estado y visibilidad en WordPress 6.6
Ajustes de estado y visibilidad en WordPress 6.6

Otros cambios afectan a los controles Imagen destacada y Extracto, que se han trasladado a la parte superior de la barra lateral, y al menú Acciones mejorado de la esquina superior derecha.

Controles de Imagen destacada y Extracto en el editor de entradas
Controles de Imagen destacada y Extracto en el editor de entradas

Ver todos los bloques

En versiones anteriores de WordPress, cuando seleccionabas un bloque, el insertador de bloques sólo mostraba el bloque que podías añadir al bloque seleccionado. Por ejemplo, con una Columna seleccionada, sólo podías ver el bloque Columna en el insertador de bloques porque sólo podías añadir una Columna.

El insertador de bloques en WordPress 6.5
En WordPress 6.5, cuando seleccionas un bloque Columna, el insertador de bloques sólo muestra un bloque Columna

A partir de WordPress 6.6, el insertador de bloques muestra dos grupos de bloques: bloques que puedes añadir dentro del bloque seleccionado y bloques que puedes añadir debajo del bloque seleccionado.

El insertador de bloques en WordPress 6.6
En WordPress 6.6, cuando seleccionas un bloque Columna, el insertador de bloques muestra dos grupos de bloques

Un atajo de teclado para agrupar bloques

Ahora, puedes agrupar una selección de bloques con ⌘ + G en MacOS o Ctrl + G en Windows.

Patrones de bloques en Temas clásicos

A partir de WordPress 6.6, los temas clásicos admiten la misma interfaz de patrones que los temas de bloques. Por tanto, si utilizas temas clásicos en tu sitio web de WordPress, disfrutarás de la misma experiencia rica en gestión de patrones que los temas de bloques.

Las siguientes imágenes comparan la pantalla de patrones en WordPress 6.5 y la sección de administración de patrones en WordPress 6.6.

Pantalla de patrones en WordPress 6.5 con el tema clásico Twenty Twenty-One
Pantalla de patrones en WordPress 6.5 con el tema clásico Twenty Twenty-One
Gestión de patrones en WordPress 6.6 con el tema clásico Twenty Twenty-One
Gestión de patrones en WordPress 6.6 con el tema clásico Twenty Twenty-One

Ahora puedes editar, duplicar, renombrar, exportar como JSON y eliminar patrones como estás acostumbrado con los temas en bloque.

Acciones de patrones en WordPress 6.6 con el tema clásico Twenty Twenty-One
Acciones de patrones en WordPress 6.6 con el tema clásico Twenty Twenty-One

Puedes realizar acciones en lote seleccionando patrones individualmente o haciendo clic en el botón Edición en lote. También dispones de funciones de ordenación y filtrado.

Acciones en lote sobre patrones en WordPress 6.6 con el tema clásico Twenty Twenty-One
Acciones en lote sobre patrones en WordPress 6.6 con el tema clásico Twenty Twenty-One

También puedes crear patrones como los creas en los temas en bloque. Haz clic en el botón Añadir nuevo patrón en la esquina superior derecha, y se te pedirá que rellenes el formulario con los detalles del patrón.

Añadir un nuevo patrón con un tema clásico en WordPress 6.6
Añadir un nuevo patrón con un tema clásico en WordPress 6.6

A continuación, puedes crear o editar tu patrón en el editor de Sitios como de costumbre.

Editar un patrón en el editor del Sitio con un tema Clásico en WordPress 6.6
Editar un patrón en el editor del Sitio con un tema Clásico en WordPress 6.6

Esta actualización ofrece a los usuarios de temas clásicos más potencia, desbloquea nuevas funciones y hace que la experiencia de edición sea más coherente en los temas clásicos y de bloque.

Nuevas herramientas y funciones para diseñadores y desarrolladores de temas

WordPress 6.6 aporta muchas funciones y mejoras potentes para diseñadores y desarrolladores de temas, y nos complace compartir aquí las que más nos han gustado. Los diseñadores tienen más poder a la hora de dar estilo a sus páginas, gracias a los estilos de sección, las imágenes de fondo para todo el sitio, un nuevo editor de sombras y una variación del diseño de cuadrícula. Y más herramientas proporcionan aún más flexibilidad a los autores de temas. Vamos a ello.

Theme.json v.3

WordPress 6.6 también trae una nueva versión de theme.json que ahora es la versión 3. La nueva versión cambia la forma de sobreescribir las propiedades predefinidas. Ahora, para cambiar los valores predeterminados de fontSizes o spacingSizes, tienes que establecer defaultFontSizes o defaultSpacingSizes en false bajo settings.typography o settings.spacing.

Recapitulando:

  • Con defaultFontSizes o defaultSpacingSizes ajustados a true, los tamaños de fuente y de espaciado predeterminados se muestran en el editor, y los temas no pueden crear preajustes utilizando los slugs predeterminados. defaultFontSizes está ajustado a true por defecto.
  • Con defaultFontSizes o defaultSpacingSizes ajustados a false, los tamaños de fuente y espaciado por defecto no se muestran en el editor, y los temas pueden utilizar los slugs por defecto.

Consulta la nota de desarrollo para obtener una visión más amplia de la versión 3 de Theme.json.

Especificidad CSS en WordPress 6.6

Con WordPress 6.6, la especificidad de CSS cambia, y ahora es más fácil sobreescribir los estilos principales manteniendo la compatibilidad con los estilos globales.

Hasta la 6.6, a menudo era difícil sobreescribir los estilos principales, y los desarrolladores de temas tenían que elaborar complejas reglas CSS para conseguir los resultados deseados. Con la 6.6, se han modificado los Estilos de Bloques del Núcleo y los Estilos Globales (theme.json) envolviendo el selector existente dentro de :root :where(...) para reducir la especificidad de los estilos básicos a 0-1-0 y hacerlo uniforme para que también admita los nuevos estilos de sección.

Como ejemplo, el .wp-block-image.is-style-rounded img se ha actualizado a :root :where(.wp-block-image.is-style-rounded img).

Se anima a los desarrolladores de bloques que opten por los estilos globales a que realicen los mismos cambios en sus estilos para hacerlos personalizables a través de la interfaz de Estilos de forma predecible. Así, si tienes un bloque personalizado con el siguiente estilo

.wp-block-custom-block {
	padding: 0;
}

Debes envolverlo en :root :where():

:root :where(.wp-block-custom-block) {
	padding: 0;
}

Esto permitiría a los usuarios sobreescribir el padding de los bloques a través de la interfaz de Estilos Globales.

Se anima a los desarrolladores de temas a hacer lo mismo para que los estilos de bloque puedan configurarse a través de la interfaz de Estilos Globales.

Consulta también la nota de desarrollo para obtener una visión más detallada de la especificidad CSS en WordPress 6.6.

Estilos de sección

WordPress 6.6 te permite aplicar estilos a secciones individuales de una entrada/página sin tener que volver a aplicar los mismos estilos a varios bloques uno por uno. Esto significa que puedes seleccionar varios bloques y bloques hijos y asignar una variación de estilo a toda la selección.

Esto es posible gracias a la ampliación de las variaciones de estilo de bloque, que ahora admiten el estilo de bloques y elementos internos y aprovechan la especificidad de estilo reducida de los Estilos Globales.

Las variaciones de estilo de bloque sólo pueden definirse y manipularse mediante Estilos Globales si las has registrado con uno de los siguientes métodos:

  • Utilizando parciales theme.json dentro del directorio /styles del tema
  • Utilizando la función register_block_style
  • Definiendo variaciones de estilo de bloque en styles.blocks.variations en tu theme.json

Vamos a ello.

Definir variaciones de estilo de bloque utilizando particiones theme.json

Al igual que las variaciones de estilo de tema, las variaciones de estilo de bloque pueden tener su propio parcial theme.json bajo el directorio /styles de tu tema.

La diferencia entre los dos tipos de variaciones es que las variaciones de estilo de bloque tienen una nueva propiedad de nivel superior blockTypes, que es un array no vacío de tipos de bloque que admiten la variación de estilo de bloque. Además, se ha añadido una nueva propiedad slug «para proporcionar coherencia entre las distintas fuentes que pueden definir variaciones de estilo de bloque y para desvincular el slug de la propiedad traducible title

La nota de desarrollo proporciona el siguiente ejemplo de theme.json parcial:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

Definir variaciones de estilo de bloque mediante programación a través de register_block_style

La función register_block_style proporciona una segunda forma de registrar variaciones de estilo de bloque. Puedes utilizarla en el archivo functions.php de tu tema de la siguiente manera:

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'			=> 'light',
		'label'			=> __( 'Light' ),
		'style_data'	=> array(
			'color'		=> array(
				'background'	=> '#973C20',
				'text'			=> '#d2e3c8',
			),
			'blocks'   => array(
				'core/group'	=> array(
					'color'		=> array(
						'background'	=> '#739072',
						'text'			=> '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

Ahora, cuando selecciones un bloque Grupo o Columnas, el panel Estilos de la barra lateral de bloques mostrará un botón para el estilo de sección registrado.

Una variación del estilo de sección en WordPress 6.6
Una variación del estilo de sección en WordPress 6.6

Encontrarás una visión más profunda y más ejemplos de variaciones de estilo de sección en Styling sections, nested elements, and more with Block Style Variations in WordPress 6.6 (Dar estilo a secciones, elementos anidados y más con las Variaciones de Estilo de Bloque en WordPress 6.6) por Justin Tadlock, en la nota de desarrollo de Aaron Robertshaw, y en Block Styles: Extend block style variations (Estilos de Bloque: Ampliar las variaciones del estilo de bloque) pull request.

Definir variaciones de estilo de bloque utilizando Variaciones de estilo de tema

Aunque actualmente es posible utilizar la propiedad theme.json styles.variations, este método sólo está disponible temporalmente y debería quedar deprecado en breve. Para una descripción más detallada, consulta esta sección de la nota de desarrollo.

Preajustes de color y tipografía

Ahora puedes cambiar la paleta de colores y las familias tipográficas de tu tema desde la interfaz de Estilos Globales, seleccionando uno de los preajustes disponibles.

Si tu tema actual admite preajustes de color y tipografía, aparecerán en los ajustes de Colores y Tipografía en Estilos globales.

Las siguientes imágenes muestran dos paletas de colores proporcionadas por Twenty Twenty-Four.

Paleta de colores Light en Twenty Twenty-Four
Paleta de colores Light en Twenty Twenty-Four
Paleta de colores oscuros en Twenty Twenty-Four
Paleta de colores oscuros en Twenty Twenty-Four

Para añadir esta funcionalidad a tus temas, debes crear variaciones de estilo que sólo incluyan colores y tipografía. Los estilos así definidos se extraerán y se utilizarán para generar preajustes.

Sobre esta función, consulta también Core Editor Improvement: Upgrade your designs (Mejora del Core Editor: Mejora tus diseños) y Create individual typography and color variations… (Crea variaciones individuales de tipografía y color…)

Imágenes de fondo para todo el sitio

A partir de WordPress 6.6, puedes definir imágenes de fondo para todo el sitio en theme.json y en el Editor de Sitios.

Una imagen para todo el sitio es el valor de una propiedad background-image establecida en el elemento body a nivel de sitio y aparece en todas las páginas del sitio web.

En el theme.json, para definir una imagen de fondo para todo el sitio, puedes utilizar el backgroundImage.url bajo la propiedad styles.background:

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "https://example.com/bg.png"
			}
		}
	}
}

En el ejemplo anterior, hemos establecido una ruta absoluta a la imagen, pero también puedes definir imágenes de fondo utilizando rutas relativas a la raíz del tema de esta forma.

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./assets/bg.png"
			}
		}
	}
}

Entonces, puedes utilizar los siguientes accesorios de imagen:

  • backgroundPosition
  • backgroundSize
  • backgroundRepeat

Si no eres desarrollador de temas, puedes utilizar imágenes de fondo para todo el sitio a través del panel Estilos del editor del sitio. En WordPress 6.6, encontrarás los controles adecuados en Estilos > Diseño.

El panel Imagen de fondo en la configuración de Estilos
El panel Imagen de fondo en la configuración de Estilos

Esta es la primera iteración para las imágenes de fondo. Para conocer mejor cómo funciona, sus limitaciones y lo que está por venir, consulta la nota del desarrollador Site-wide background images in WordPress 6.6 ( Imágenes de fondo para todo el sitio en WordPress 6.6).

Variación del diseño de cuadrícula

Una nueva variación del diseño del bloque Grupo te permite mostrar los elementos de un grupo como una cuadrícula.

Puedes probarlo añadiendo un bloque Grupo al lienzo del editor y seleccionando el diseño Cuadrícula en el panel de configuración del bloque.

Diseño de cuadrícula
El diseño de cuadrícula en WordPress 6.6

Hay dos tipos de diseño de cuadrícula:

  • Auto genera las filas y columnas de la cuadrícula automáticamente
  • Manual te permite establecer el número de columnas que quieres añadir a la cuadrícula

Añade contenido a los elementos de la cuadrícula y cambia su tamaño utilizando los controladores. También puedes ajustar la columna Mínima con o el número de columnas en función del tipo de cuadrícula seleccionada.

Márgenes negativos

Ahora puedes establecer márgenes negativos para todos los bloques que admitan controles de margen. Antes de WordPress 6.6, esta función sólo estaba disponible en theme.json, mientras que ahora es fácil aplicar márgenes negativos a los elementos para crear efectos de superposición.

Ten en cuenta que, a partir de WordPress 6.6, debes añadir manualmente el valor negativo, como se muestra en la siguiente imagen.

Aplicando márgenes negativos a un bloque Botones en WordPress 6.6
Aplicando márgenes negativos a un bloque Botones en WordPress 6.6

Sombras personalizadas

Con WordPress 6.6, puedes crear y editar sombras personalizadas dentro de la interfaz de Estilos Globales. Para crear tus sombras personalizadas, navega hasta el Editor del Sitio y selecciona Sombras en el menú Estilos Globales. Aquí encontrarás un panel Personalizado. Cuando hagas clic en el botón +, un nuevo elemento te dará acceso a un conjunto de controles para personalizar tu sombra o renombrarla/eliminarla.

Controles de sombra en WordPress 6.6
Controles de sombra en WordPress 6.6

Preajustes personalizados de relación de aspecto

Ahora, los desarrolladores de temas pueden definir preajustes de relación de aspecto personalizados configurando la opción settings.dimensions.aspectRatios en theme.json.

Cambios adicionales para desarrolladores

Sin embargo, los cambios para desarrolladores no se limitan a los temas. Otras novedades y mejoras afectan a la biblioteca React y a varias APIs.

API de opciones: Desactivación de la carga automática para opciones grandes

Antes de WordPress 6.6, un gran número de opciones se cargaban automáticamente en cada carga de página. Para evitar este comportamiento por defecto, los desarrolladores tenían que pasar "yes"/true o "no"/false al tercer parámetro de las funciones add_option() o update_option(). Sin embargo, como este parámetro era opcional, con un valor por defecto de "yes", se cargaban grandes cantidades de datos innecesarios en cada página, con un impacto negativo en el rendimiento del sitio.

Para evitar este comportamiento, WordPress 6.6 introduce algunos cambios en la API de opciones:

Para permitir que WordPress determine si una opción debe cargarse en la página actual, el valor por defecto del parámetro $autoload de add_option() y update_option() se ha cambiado de "yes" a null. El parámetro acepta ahora uno de los siguientes valores:

  • true: cargar la opción en cada página para evitar una consulta adicional a la BD.
  • false: autocargar automáticamente la opción para evitar que los datos se carguen en cada página.
  • null: puede autocargarse, lo que significa que el valor de autocarga debe determinarse dinámicamente. Por defecto, las opciones se autocargan a menos que contengan valores grandes.

Los valores de la base de datos cambiaron en consecuencia, y ahora el valor de autocarga para cada opción será uno de los siguientes:

  • on: debe cargarse automáticamente en cada página. Se añade con un valor explícito true.
  • off: no debe cargarse automáticamente y sólo se utiliza en una única página de administración. Se añade con un valor explícito de false.
  • auto: dependen del comportamiento de autocarga por defecto de WP. En WP 6.6, debería autocargarse, pero el comportamiento puede cambiar en el futuro.
  • auto-on: debe cargarse automáticamente. Se establece dinámicamente en true.
  • auto-off: no debe cargarse automáticamente. Se establece dinámicamente en false.

Junto con estos cambios, WordPress 6.6 introduce varias funciones y filtros:

  • La función wp_autoload_values_to_autoload() devuelve todos los valores de la base de datos que deberían cargarse automáticamente.
  • El filtro wp_autoload_values_to_autoload permite editar la lista de opciones que deben autocargarse.
  • El filtro wp_default_autoload_value establece el valor de una opción cuando no se ha establecido un valor explícito.
  • El filtro wp_max_autoloaded_option_size modifica el umbral por encima del cual las opciones no se autocargarán por defecto. El valor por defecto es 150000. (150kb)

Este cambio es especialmente útil para sitios web complejos con muchos plugins y merece la atención de los desarrolladores de plugins. Para obtener una visión más completa, recomendamos consultar custom aspect ratio presets (preajustes personalizados de relación de aspecto).

Mejoras en la biblioteca React

Dos cambios importantes afectan a la biblioteca React. En primer lugar, WordPress 6.6 incluye React 18.3, que añade advertencias sobre deprecaciones y otros cambios para ayudar a los desarrolladores a prepararse para React 19 una vez que sea estable.

En segundo lugar, ahora los desarrolladores pueden utilizar la nueva transformación React JSX, que se introdujo por primera vez con React 17.

Para una visión más detallada de estos cambios, consulta las notas de desarrollo Preparación para la actualización a React 19 y JSX en WordPress 6.6.

Mejoras en la API de bloques

WordPress 6.6 también aporta varios cambios técnicos a la API de bloques, entre los que se incluyen los siguientes:

Resumen

En este largo artículo, hemos explorado muchas funciones y cambios interesantes que llegarán con WordPress 6.6, desde anulaciones del patrón de bloques hasta mejoras en la Vista de datos, nuevas funciones para desarrolladores de temas y la unificación de las experiencias de edición en los editores de sitios y de entradas. Pero hay mucho más que no hemos abordado en este artículo, como las reversiones de las actualizaciones automáticas.

Si quieres profundizar aún más, no deberías perderte una serie de excelentes recursos de los colaboradores del core de WordPress, a los que hicimos referencia durante nuestras pruebas de WordPress 6.6. Entre los numerosos recursos, te sugerimos WordPress 6.6 Source of Truth (WordPress 6.6 Fuente de la Verdad), de Anne McCarthy, los Learn WordPress Online Workshops (Talleres online para aprender WordPress) en Meetup, el blog WordPress Developer, las notas de desarrollo publicadas en el blog Make WordPress Core y las actualizaciones periódicas de Birgit Pauli-Haack en Gutenberg Times, por nombrar sólo algunos.

Ahora, depende de ti. ¿Has probado ya las funciones de WordPress 6.6? ¿Qué función o cambio te ha gustado más? Deja un comentario a continuación y únete a la conversación.

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.