El lanzamiento de WordPress 6.1 está previsto para el 1 de noviembre de 2022, y será la tercera versión importante del año, después de WordPress 6.0 Arturo, lanzado el 24 de mayo, y WordPress 5.9 Josephine, lanzado el 25 de enero.
Como siempre sucede, las nuevas versiones de WordPress traen consigo nuevas características, mejoras y correcciones de errores de las últimas versiones del plugin Gutenberg en el core. Y WordPress 6.1 no será una excepción, ya que se fusionarán 11 versiones del plugin Gutenberg en el core, desde la 13.1 hasta la 14.1.
Estas son las fechas más importantes del calendario de lanzamientos:
- Beta 1 y Bloqueo de Características: 20 de septiembre de 2022 — A partir de esta fecha, los colaboradores del core se centrarán en probar y corregir errores
- Release Candidata 1: 4 de octubre de 2022 — Publicación de la Guía de Uso con Notas de Desarrollo
- Dry Run: 24 de octubre de 2022
- Lanzamiento General de WordPress 6.1: 1 de noviembre de 2022
En el momento de escribir este artículo, las notas de desarrollo y la guía de uso aún no se han publicado, pero ya podemos echar un vistazo tras el telón y tratar de entender lo que podemos esperar de la próxima versión principal de WordPress.
Matias Ventura nos da algunas ideas en el Roadmap to 6.1, donde dice que el objetivo de la 6.1 es refinar las experiencias introducidas con la 5.9 y la 6.0 y arreglar algunas cosas mientras nos acercamos a la fase 3 del roadmap de Gutenberg.
1. Mejoras en el Editor de Plantillas: Una de las principales novedades es el Editor de Plantillas. WordPress 6.1 debería introducir la posibilidad de navegar, visualizar y editar la estructura del sitio.
2. Patrones de Plantillas: El objetivo es dar a los patrones de bloques un papel principal en la creación de plantillas y páginas, adaptándolos a los tipos de entradas personalizadas y a los tipos de bloques, mejorando la funcionalidad de bloqueo, la gestión de los patrones guardados, etc.
3. Estilos y Bloques Globales y Herramientas de Diseño: WordPress 6.1 permitirá gestionar las webfonts, implementar la tipografía responsiva y ampliar el conjunto de herramientas disponibles para los bloques.
Dicho esto, echemos un vistazo a algunas de las características más potentes que llegarán con WordPress 6.1:
Conversión Automática de Imágenes al Formato WebP
Introducido en WordPress con la versión 5.8, WebP es un formato de imagen moderno que proporciona una compresión superior sin pérdidas y con pérdidas para las imágenes en la web.
Pero aunque puedes subir tus imágenes WebP a WordPress utilizando la Biblioteca Multimedia, WordPress no admite la conversión automática de imágenes al formato WebP. Para habilitar esa función en tu sitio web, tendrías que utilizar un plugin de WordPress para WebP de terceros.
A partir de ahora, con WordPress 6.1, las imágenes de tamaño inferior se crearán automáticamente en formatos de archivo alternativos. Además, WordPress 6.1 introduce tres nuevos filtros que permiten a los desarrolladores controlar el tipo mime de los subtamaños generados y utilizados por WordPress en el front end.
Y, con la versión 6.1, WordPress generará y utilizará subtamaños WebP cuando estén disponibles por defecto.
Cuando un usuario sube una imagen JPEG, WordPress puede generar automáticamente los subtamaños WebP y JPEG. Así, WordPress podrá servir imágenes WebP en el front end. Las imágenes JPEG se utilizarán en contextos en los que todavía no se admita WebP (por ejemplo, el correo electrónico).
Esta es la configuración por defecto. Los desarrolladores podrán anular la configuración por defecto y determinar qué formato de imagen utilizar mediante filtros.
Cuando se generan nuevos tipos mime, sólo se conservan las imágenes cuyos tamaños son menores que sus respectivos originales. Por defecto, sólo se generan tipos mime adicionales para los tamaños de imagen por defecto y para los tamaños personalizados cuando hayas optado por el soporte.
Este cambio también introduce tres nuevos filtros que proporcionan un control total sobre la salida de tipos mime secundarios:
wp_image_sizes_with_additional_mime_type_supportpermite a los desarrolladores controlar el tipo mime de la imagen en función de su tamañowp_upload_image_mime_transformspermite a los desarrolladores controlar el tipo mime de la imagen para una entrada determinada e incluso anular el tipo mime originalwp_content_image_mimespuede utilizarse para controlar el orden de salida del tipo mime para las imágenes de contenido. Al renderizar las imágenes en la página, se utilizará el primer tipo mime disponible.
Este cambio debería suponer una reducción del tamaño de los archivos del 30% como media
Antes del lanzamiento final de la versión 6.1, puedes probar la nueva función con el plugin Performance Lab del Grupo de Rendimiento de WordPress.
Sin embargo, el cambio parece controvertido, y muchos colaboradores siguen informando de problemas. En concreto, se ha detectado que:
Los recursos para generar imágenes al subir una imagen aumentarán drásticamente, sin embargo los recursos para servir una imagen se reducirán. Dado que la subida de imágenes es muy poco frecuente en comparación con el servicio de imágenes, el esfuerzo adicional para comprimir y almacenar imágenes debería merecer la pena.
Y:
En realidad ese aumento dramático del uso de recursos al subir una imagen es un efecto secundario muy negativo. Significa que muchas subidas fallarán y dejarán a los usuarios tirados. También aumentarán dramáticamente las solicitudes de soporte tanto para WordPress como para las empresas de alojamiento. Esto no es aceptable. Por eso, aunque el soporte de imágenes multi-mime sea necesario en WordPress, el enfoque actual no parece una buena solución.
Así que, en el momento de escribir este artículo, todavía no está claro si el uso del formato WebP en los subtamaños de las imágenes estará habilitado por defecto o el administrador del sitio tendrá que optar por servir el formato WebP en el front-end de su sitio web. Mientras tanto, se ha desactivado temporalmente la conversión automática de JPEG a WEBP. Si quieres ver un resumen significativo del debate en cuestión, consulta el artículo de Sara Gooding en WP Tavern.
Tipografía Fluida
WordPress 6.1 añade soporte para la Tipografía Fluida a través de las funciones CSS calc/clamp.
La expresión Tipografía fluida describe la capacidad del texto de adaptarse a la anchura de la ventana gráfica, escalando suavemente de una anchura mínima a una máxima.
Es algo diferente de lo que puedes conseguir con las media queries, ya que las media queries permiten que los temas cambien el tamaño del texto en función de tamaños específicos de la ventana gráfica, pero no hacen nada entre diferentes valores.
Algunos temas ya admiten la tipografía fluida. Twenty Twenty-Two, por ejemplo, utiliza la función CSS clamp() para varios tamaños de fuente. Por ejemplo:
"settings": {
...
"custom": {
"spacing": {
"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"
},
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
}
}
}
}Como puedes ver en el código anterior, se utilizan valores de tamaño de fuente fluida para cada uno de los tamaños de fuente.
Ahora, a partir de WordPress 6.1, los temas están habilitados para generar automáticamente tamaños de fuente fluidos declarando la nueva propiedad typography.fluid como sigue:
"settings": {
....
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "2rem",
"fluid": {
"min": "2rem",
"max": "2.5rem"
},
"slug": "medium",
"name": "Medium"
}
]
}Usando typography.fluid y typography.fontSizes[].fluid, el valor de cada tamaño de fuente se calcula automáticamente usando la siguiente fórmula:
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});Por ejemplo:
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});Ten en cuenta que, en el momento de escribir este artículo, la tipografía fluida es una función experimental. Puedes profundizar en los detalles técnicos en Soporte de bloques: añadir tipografía fluida.
Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi
— Brian Gardner (@bgardner) August 8, 2022
Consulta también Cómo añadir Tipografía Fluida a los Temas de Bloque de WordPress, por Rich Tabor, y Tipografía fluida con Gutenberg, por Carolina Nymark.
Nuevos y Mejorados Tipos de Bloques
Con tantas versiones de Gutenberg fusionadas en el core, WordPress 6.1 va a incorporar un novedoso bloque de tabla de contenidos y un montón de cambios y mejoras en los tipos de bloques existentes.
Nuevo Bloque de Tabla de Contenidos
Lanzado por primera vez en Gutenberg 13.3, ya está disponible un nuevo bloque de Tabla de Contenidos como bloque experimental. Una vez añadido a tu publicación o página, el bloque de Tabla de Contenidos detectará cualquier bloque de Encabezado añadido al contenido y lo mostrará como enlaces de anclaje en una lista ordenada.
Añadido Soporte de Bordes para el Bloque de Columnas
El bloque Columnas ahora aprovecha el nuevo componente BorderBoxControl que permite a los usuarios de WordPress especificar bordes personalizados para las columnas, estableciendo también estilos completamente diferentes para cada borde (ver también Columna: Añadir soporte de bordes a los bloques de columnas pull request).
Los bordes individuales también pueden establecerse en el archivo theme.json de la siguiente manera:
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}Los desarrolladores pueden leer más sobre el nuevo control en Referencia de componentes — BorderBoxControl.
Controles de Borde para Bloques de Imagen
Gutenberg 13.8 ha introducido la compatibilidad con todos los controles de borde para el bloque Imagen. El cambio se añadirá al core con WordPress 6.1, abriendo la puerta a nuevas y grandes oportunidades para los creativos web.
Mejoras en el Bloque de Comentarios
WordPress 6.1 también nos trae un Bloque de Comentarios mejorado. A partir de la próxima versión de WordPress, los usuarios podrán utilizar funciones de edición más avanzadas en el Bloque de comentarios.
En la siguiente imagen, puedes ver la barra lateral de configuración del bloque Comentarios y los cambios aplicados al Título de los Comentarios.
Variaciones del Bloque Post Terms para Términos de Taxonomía Personalizados
El bloque Post Terms ha sido mejorado con una nueva variación de taxonomía personalizada. Ahora puedes registrar una nueva taxonomía personalizada, por ejemplo el tipo de entrada «Actores en una película», y podrás añadir una lista de términos de taxonomía a la entrada actual o al tipo de entrada personalizada.
La siguiente imagen muestra una lista de actores en un tipo de post de película.
Un Nuevo Filtro Parents para el Bloque Query
Ahora hay un nuevo filtro Parents para el Bloque Query que permite mostrar jerarquizadas las entradas y páginas que tienen el mismo padre.
Controles de Font Family en el Bloque de Encabezamiento
El bloque Encabezado ahora admite controles de Font Family
Espaciado Horizontal y Vertical en el Bloque Galería
A partir de WordPress 6.1, un nuevo control de espaciado axial te permite establecer diferentes espacios horizontales y verticales para las imágenes en el bloque Galería.
Este cambio supone una mayor flexibilidad a la hora de crear la disposición de las galerías de imágenes.
Imágenes Destacadas en el Bloque Portada
Las imágenes destacadas siguen recibiendo mucha atención, y en WordPress 6.1, el alcance de su uso se amplía aún más. A partir de la versión 6.1, la imagen destacada puede seleccionarse directamente desde el marcador de posición del bloque de portada, como se muestra en las siguientes imágenes.
Este cambio debería ayudar a crear una experiencia de usuario más consistente, haciendo más claro para el usuario lo que está personalizando.
Además, se ha añadido un conmutador de Imágenes Destacadas al flujo de sustitución de medios.
Usar Imágenes Destacadas en el flujo de reemplazo de medios
Herramientas de Apariencia para los Enlaces de Navegación de las Publicaciones
La propiedad de ajuste appearanceTools te permite optar por varios ajustes que están desactivados por defecto.
Desde WordPress 6.1, para los temas que soportan la propiedad de ajuste appearanceTools, puedes personalizar el color del enlace y font family en el Enlace de Navegación de la Entrada.
Puedes leer más sobre la propiedad appearanceTools en nuestra introducción al tema Twenty Twenty-Two.
Bloqueo Dentro del Bloque de Contenedores con un Solo Clic
Un nuevo conmutador permite ahora a los usuarios bloquear bloques dentro de un contenedor de bloques con un solo clic. Esto se aplica a los bloques de Grupo, Portada y Columna.
Funciones Adicionales y Mejoras en el Editor de Bloques
Aunque se trata de una versión de consolidación, WordPress 6.1 traerá tantos cambios y mejoras que sería imposible enumerarlos todos en un artículo. Además del nuevo bloque de Tabla de Contenidos y de los cambios enumerados anteriormente, veremos:
Variaciones de Partes de Plantilla en el Insertador de Bloques
Las variaciones de partes de plantillas están ahora disponibles en el insertador de bloques, lo que facilita la adición de partes de plantillas a tu sitio web.
Este cambio hace que el proceso de edición sea más sencillo y rápido, permitiendo a los usuarios ver rápidamente las variaciones de una parte de la plantilla de una sola vez con sólo unos pocos clics.
Visualizar el Margen y el Relleno
Una pequeña pero útil mejora es el resaltado de los márgenes y el relleno mientras el usuario los ajusta. Esto debería hacer mucho más clara la cantidad de espacio que se está añadiendo dentro o fuera de los elementos.
Mejoras en la Barra Lateral de Configuración
WordPress 6.1 también mostrará varias mejoras en la interfaz de la barra lateral de Ajustes.
La barra lateral de ajustes de la entrada ha sido ligeramente rediseñada. Ahora los campos de formato de entrada, slug, plantilla y autores están alineados y tienen el mismo ancho. Además, el programador de publicaciones se ha simplificado para que la experiencia sea más comprensible. La sección de plantillas también se ha trasladado a una ventana emergente para ahorrar espacio y limpiar la interfaz.
Además, el panel de plantillas ha sido sustituido por un enlace de plantillas. Al hacer clic, el enlace de plantilla muestra la Plantilla predeterminada en un popover.
Actualizaciones del Diseño del Popover de Publicación
El selector de fecha en el popover de Publicar ha sido rediseñado y ahora utiliza «componentes existentes de WordPress y el estilo de Emotion»
Hay más información técnica disponible en las Actualizaciones de diseño del popover de Publicación (DateTimePicker).
Tiempo de Lectura en el Panel de Información
El panel de información disponible en la barra de herramientas superior ha sido mejorado y ahora muestra el Tiempo de lectura además de Palabras, Caracteres, Encabezados, Párrafos y Bloques.
El tiempo de lectura estimado se calcula sobre una media de 189 palabras por minuto. Leer más en @wordpress/editor: Añade el tiempo estimado de lectura al índice de contenidos en el editor.
Herramientas de Construcción Nuevas y Mejoradas
WordPress 6.1 también ampliará la funcionalidad del Constructor de Sitios. Los patrones de bloques estarán disponibles en más lugares y una mayor selección de tipos de plantillas mejorará la experiencia de edición en el editor de plantillas.
Patrones de Creación de Tipos de Entradas
WordPress 6.0 introdujo los Patrones de Creación de Páginas, que son una forma de proporcionar una selección de patrones cada vez que un usuario crea una nueva página. De esta forma, no tienes que construir la página desde cero, sino que puedes elegir un patrón de un modal y rellenar el contenido, y ya está listo.
Para activar esta función, al menos un patrón de bloque debe declarar la compatibilidad con los tipos de bloque de core/post-content.
Ahora, a partir de WordPress 6.1, esta función se extiende a todos los tipos de entradas. Todo lo que tienes que hacer es incluir core/post-content en el patrón blockTypes y establecer el correspondiente postTypes.
Ahora vamos a ver cómo aprovechar esta nueva función con un ejemplo práctico. Supongamos que tienes un tipo de entrada Película.
En primer lugar, tienes que registrar un patrón de bloque, tal y como se explica aquí.
O puedes ir por el camino fácil y utilizar el registro implícito de patrones (para simplificar este ejemplo, utilizaremos el registro implícito de patrones).
Crea un archivo PHP para tu patrón de bloques en el directorio /patterns de la carpeta de tu tema (para este ejemplo, hemos utilizado Twenty Twenty-Two). A continuación, añade el siguiente encabezamiento:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- wp:heading -->Y eso es todo. Ahora, cada vez que cree un nuevo tipo de entrada de Película, aparecerá en la pantalla un modal de Elegir un patrón.
Si quieres que el modal se muestre en varios tipos de post, sólo tienes que añadir los slugs correspondientes separados por comas:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie, book
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- wp:heading -->Para ver con más detalle los patrones de creación, consulta Capacidad de utilizar patrones de creación para otros tipos de post además de la página.
Más Tipos de Plantillas en el Editor del Sitio
Con WordPress 6.0, sólo se puede crear un número limitado de plantillas en el Editor de Sitios:
A partir de WordPress 6.1, será posible crear una plantilla diferente para cada tipo de entrada.
Y también podrás añadir y editar plantillas para taxonomías principales y personalizadas, incluso para categorías o etiquetas individuales.
Si registras tipos de entrada personalizados o una taxonomía personalizada, aparecerán automáticamente en el cuadro de selección de plantillas del Editor del Sitio.
Pero no sólo eso. Una vez seleccionado el tipo de entrada de la plantilla, un modal pregunta al usuario si desea crear una plantilla para todas las entradas de ese tipo o crear una nueva plantilla para una entrada específica del tipo de entrada seleccionado.
A continuación, un nuevo modal ofrece una lista de las entradas disponibles para ese tipo de entrada.
Cambios para Desarrolladores
WordPress 6.1 también añade una nueva API y varias mejoras para los desarrolladores.
Nueva API de Persistencia de Preferencias
WordPress 6.1 introduce una nueva API de persistencia de preferencias que guarda las preferencias del editor en la base de datos de WordPress en lugar de en el almacenamiento local.
De este modo, las preferencias del usuario pueden almacenarse en todos los navegadores y dispositivos.
Para ello, el anterior sistema de persistencia en el paquete @wordpress/data ha quedado obsoleto, y se ha introducido un nuevo paquete preferences-persistence. El nuevo paquete guarda los datos en la meta del usuario a través de la API Rest. Los datos también se guardarán en el almacenamiento local como reserva en caso de que el usuario se desconecte o se interrumpa una petición (ver también el pull #39795).
Soporte para Estilos de Botones en theme.json
Con WordPress 6.1, puedes añadir estilos de botones a tus temas mediante theme.json. Esto permite a los desarrolladores de temas añadir consistencia a los botones en todos los bloques. Un ejemplo es el bloque de búsqueda, pero también los bloques de terceros se beneficiarán de este cambio.
Para hacerlo posible, se añadirá una nueva clase wp-element-button a los elementos de los botones para que compartan el mismo estilo.
Puedes probar este cambio añadiendo el siguiente código a tu theme.json en un entorno de desarrollo:
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}Las Variaciones del Bloque de Búsqueda Ahora son Compatibles con las Query Vars
WordPress 6.1 soportará variaciones del bloque de búsqueda basadas en query vars. Esto significa que podrás proporcionar a tus usuarios cuadros de búsqueda que se utilizarán para buscar de forma granular cualquier tipo de contenido.
En el siguiente ejemplo, estamos registrando una variación de bloque para un tipo de entrada movies. El ejemplo se basa en el tutorial de Carolina Nymar sobre las variaciones de bloque.
En el archivo de funciones de tu tema (hijo), añade el siguiente código:
function movies_editor_assets() {
wp_enqueue_script(
'movies-block-variations',
get_template_directory_uri() . '/assets/block-variations.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );Ahora, crea el siguiente archivo block-variations.js en la carpeta de activos de tu tema (hijo):
wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);Ahora vuelve a cargar tu panel de control de WordPress y busca una variación del bloque de búsqueda de películas en el insertador de bloques.
Puedes leer más sobre las variaciones de bloque en la documentación oficial.
Un Nuevo Elemento de Botones en Estilos Globales
WordPress 5.9 introdujo una interfaz de Estilos Globales para permitir a los usuarios personalizar los preajustes de estilo para sus sitios web, ya sea de forma global o a nivel de bloque.
Con la primera implementación, podías personalizar los colores del Fondo, del Texto y de los Enlaces. Ahora, a partir de WordPress 6.1, se ha añadido un nuevo elemento Botones al panel Colores para que los usuarios puedan controlar la apariencia de los botones en todo su sitio web.
Esto afectaría al estilo de los botones en todo el sitio, desde el bloque Botones hasta el bloque Búsqueda y los bloques de terceros que hacen uso de botones.
Resumen
Es cierto que hay muchas novedades en WordPress 6.1, pero aún es pronto para hacer una valoración final de la última versión de 2022. Además, en el momento de escribir este artículo, aún no hemos llegado al bloqueo de características, por lo que todavía puede haber características y cambios adicionales de los que hablar antes del lanzamiento final, previsto para el 1 de noviembre.
Aunque ya podemos estar bastante seguros de las nuevas características que veremos gracias a las 11 versiones de Gutenberg fusionadas en el core, aún no estamos seguros de cómo se implementará la conversión de JPEG a WebP y es posible que se añadan otros cambios a los enumerados anteriormente.
Pero no dejes de seguirnos, ya que iremos actualizando este artículo a medida que se produzcan cambios que merezcan la pena y se incorporen nuevas funciones al core.
Ahora depende de ti. ¿Qué esperas de la próxima versión de WordPress? ¿Has probado ya la Nightly Build en tu entorno de desarrollo? Comparte con nosotros tus opiniones sobre WordPress 6.1 en la sección de comentarios más abajo.
