WordPress 6.1 «Misha» se ha lanzado el 1 de noviembre de 2022. El tercer gran lanzamiento del año sigue a WordPress 6.0 Arturo, publicado el 24 de mayo, y a WordPress 5.9 Josephine, publicado el 25 de enero.
Como siempre ocurre, las nuevas versiones de WordPress traen nuevas funciones, mejoras y correcciones de errores de las últimas versiones del plugin Gutenberg en el core. Y WordPress 6.1 no es una excepción, ya que se han incorporado al núcleo 11 versiones del plugin Gutenberg, desde la 13.1 hasta la 14.1.
En este post, echaremos un vistazo detrás del telón y presentaremos las nuevas e interesantes características que llegarán con la nueva versión principal de WordPress.
Matias Ventura nos ha dado algunas ideas en la Hoja de ruta hacia la 6.1, donde dijo que el objetivo de la 6.1 es perfeccionar las experiencias introducidas con la 5.9 y la 6.0 y arreglar algunas cosas a medida que nos acercamos a la fase 3 de la hoja de ruta 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 central en la creación de plantillas y páginas, adaptándolos a los tipos de entradas personalizadas y tipos de bloques, mejorando la funcionalidad de bloqueo, mejorando la gestión de los patrones guardados, etc.
3. Estilos y Bloques Globales y Herramientas de Diseño: WordPress 6.1 permitirá gestionar las fuentes web, 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:
Tipografía Fluida y Espaciado
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 Bloques de WordPress, por Rich Tabor, y Tipografía fluida con Gutenberg, por Carolina Nymark.
Al igual que la tipografía fluida, WordPress 6.1 también introduce la compatibilidad con el Espaciado Fluido.
Antes de WordPress 6.1, sólo era posible establecer valores de espaciado personalizados en el editor, y los autores de temas no podían especificar valores fijos para el relleno, el margen y el espacio. Por lo tanto, no era posible transferir los ajustes de espaciado de un tema a otro o mantener los valores de espaciado al copiar y pegar contenido entre diferentes sitios web.
Ahora los desarrolladores de temas pueden declarar la compatibilidad con el Espaciado Fluido mediante los ajustes de spacing.spacingScale y spacing.spacingSizes[] (ver también Theme.json: Añadir preajustes de tamaño de espaciado y Ampliar theme.json para proporcionar preajustes de tamaño de espaciado).
"settings": {
"spacing": {
"spacingScale":
{
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "1"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "2"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "3"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "4"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "5"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "6"
}
],
...
}
}Encontrarás las propiedades de espaciado y tipografía fluida documentadas en Ajustes Globales y Estilos Preestablecidos y en la referencia viva de la API de theme.json V2.
Edición de Bloques de Contenido
WordPress 6.1 introduce la edición solo de contenido para bloques, patrones y plantillas. Con la edición de sólo contenido activada, los usuarios sólo pueden cambiar el contenido de un bloque o patrón, evitando que rompan accidentalmente el diseño o cambien los estilos.
Actualmente, no es posible activar la edición de sólo contenido desde la interfaz del Editor visual. Para habilitar esta función, el atributo templateLock debe estar ajustado a contentOnly y para ello puedes utilizar el editor de código.
La siguiente imagen ofrece un ejemplo sencillo.
Cuando se activa la edición de sólo contenido en un bloque o patrón, la barra lateral de ajustes cambia. No verás los controles de configuración habituales, sino una lista de bloques incluidos en el grupo. Puedes seleccionar cualquiera de esos bloques haciendo clic en el bloque en el lienzo del editor o en el elemento de la lista correspondiente en la barra lateral.
Puedes desactivar la edición de sólo contenido haciendo clic en el botón Modificar de la barra de herramientas del grupo.
Una vez que hayas terminado con tus ediciones, puedes volver a activar la edición de sólo contenido haciendo clic en el botón Hecho.
Además, los bloques que no tienen contenido se ocultan de la vista de lista y no pueden recibir atención en la lista de bloques.
Puedes leer más sobre la edición de sólo contenido en la nota del desarrollador y en este artículo del blog de Rich Tabor.
Tipos de Bloque Mejorados
Con tantas versiones de Gutenberg fusionadas en el core, WordPress 6.1 va a traer muchos cambios y mejoras a los tipos de bloque existentes.
Se ha añadido Soporte de Bordes para el bloque 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 bordes 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 imagen siguiente, puedes ver la barra lateral de configuración del bloque Comentarios y los cambios aplicados al Título de los Comentarios.
Variaciones del Bloque de Términos para Términos de Taxonomía Personalizados
El bloque Términos de Post 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 personalizado.
La imagen de abajo muestra una lista de actores en un tipo de entrada de película.
Un Nuevo Filtro Padres para el Bloque Lista de Contenidos
Ahora hay un nuevo filtro Padres para el Bloque Lista de Contenidos que permite mostrar las entradas y páginas jerarquizadas que tienen el mismo padre.
Controles de la Familia de Fuentes en el Bloque de Encabezamiento
El bloque Encabezado ahora admite controles de Familia de Fuentes.
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 de 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 Imagen Destacada al flujo de reemplazo de medios.
Herramientas de Apariencia para los Enlaces de Navegación de las Publicaciones
La propiedad de configuración 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 la familia de la fuente 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.
Bloque de Lista Mejorado
El bloque Lista se ha mejorado y ahora aprovecha los bloques interiores.
Este cambio facilita la ordenación y la sangría de los elementos de la lista y, en definitiva, mejora la experiencia del usuario.
Soporte a los Pseudoelementos en los Temas de los Bloques
Ahora los temas de bloque pueden personalizar la apariencia de los elementos y bloques en función de su estado (activo/enfocado/desplazado).
Este es un ejemplo de uso de pseudoelementos con enlaces, tal y como se define en el theme.json de Twenty Twenty-Three:
"styles": {
...
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"typography": {
"textDecoration": "none"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "underline"
}
}
}
}El siguiente código de estilos de botones:
"styles": {
...
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}Puedes ver el resultado en las siguientes imágenes.
Pero también puedes estilizar elementos a nivel de bloque. La única diferencia es que tienes que definir los estilos dentro de un bloque. Como ejemplo, el siguiente código del theme.json de Twenty Twenty-Three aplica estilos a los enlaces del bloque de Navegación del core:
"styles": {
"blocks": {
"core/navigation": {
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "none"
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
}
}
}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 (pero consulta este artículo de Anne McCarty para ver una lista completa de herramientas de diseño por bloques).
Aquí nos sumergiremos en los siguientes cambios:
Variaciones de Partes de la 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 cuantos 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 dejar mucho más claro cuánto espacio 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 la 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. Lee más en @wordpress/editor: Añadir el tiempo estimado de lectura a la tabla de contenidos en el editor.
Se ha Añadido el Control de Espaciado de Bloques a la Interfaz de Estilos
Ahora los usuarios pueden ajustar el espaciado vertical y horizontal desde la UI de Estilos para los bloques que admiten esta función.
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 creas un nuevo tipo de entrada de Película, aparece 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.
Twenty Twenty-Three y Otras Mejoras en los Temas
WordPress 6.1 también ofrece un nuevo tema por defecto: Twenty Twenty-Three. Se trata de un tema minimalista, sin imágenes ni funcionalidades adicionales.
El nuevo tema por defecto reúne todas las funciones más recientes de edición del sitio en un solo lugar y es una caja de arena perfecta para probar plantillas y partes de plantillas, variaciones de estilo, tipografía y espaciado flexibles, y todas las funciones introducidas con las últimas versiones de WordPress.
Y por eso, también es una gran herramienta para aprender a desarrollar temas, plantillas y patrones de bloques con ejemplos de trabajo.
Puedes profundizar en el nuevo tema por defecto de WordPress en nuestro resumen en profundidad.
Aparte del nuevo tema por defecto, WordPress 6.1 también introduce varias mejoras en los temas.
Actualización de la Cabecera URI en los Temas
Antes de WordPress 6.1, si un tema tenía el mismo nombre que un tema disponible en el directorio de temas de WordPress, se mostraba al usuario un mensaje de actualización disponible.
Con WordPress 6.1, una nueva cabecera de Actualización URI evita sobrescribir accidentalmente archivos de temas de terceros. Esta función es especialmente útil si tienes un tema desarrollado internamente con el mismo nombre que un tema del directorio de temas de WordPress pero no quieres compartirlo con la comunidad.
Ahora, si el valor del campo de cabecera del tema Update URI no coincide con https://wordpress.org/themes/{$slug}/ o w.org/theme/{$slug}, WordPress no intentará actualizarlo.
Si se establece, Update URI debe ser un URI con nombre de host único, como https://wordpress.org/themes/my-theme/ o https://example.com/my-theme/.
Los desarrolladores de temas encontrarán una descripción más detallada de la nueva cabecera del tema Update URI en la nota para desarrolladores oficial.
Filtro de Temas de Bloques en la Pantalla «Añadir Temas»
Un nuevo acceso directo permite ahora filtrar los temas de bloques al añadir un nuevo tema a tu instalación de WordPress.
Además, se ha añadido una nueva pestaña de ayuda para los Temas de Bloques en la misma pantalla.
Cambios para los Desarrolladores
WordPress 6.1 también añade una nueva API y muchas funciones y cambios 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 solicitud (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 Admiten Vars de Consulta
WordPress 6.1 soportará variaciones del bloque de búsqueda basadas en vars de consulta. Esto significa que podrás ofrecer 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 los 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.
Herramientas de Apariencia Disponibles para Cualquier Tema
Antes de WordPress 6.1, las Herramientas de Apariencia sólo estaban disponibles en los temas de bloque. Con la versión 6.1, cualquier tema puede incluir esta función simplemente añadiendo soporte en su archivo de funciones:
add_theme_support( 'appearance-tools' );Esto habilitaría todos los siguientes ajustes a la vez:
- borde: color, radio, estilo, ancho
- color: enlace
- espaciado: blockGap, margen, padding
- tipografía: lineHeight
Nueva Función is_login_screen()
Una nueva función is_login_screen() permite ahora determinar si la página actual es la pantalla de inicio de sesión. También se admiten ubicaciones de inicio de sesión personalizadas.
Puedes utilizar la nueva etiqueta condicional de la siguiente manera:
function add_text_to_login() {
if ( is_login_screen() ) {
echo( "<h1>Welcome to Kinsta!</h1>" );
}
}
add_action( 'init', 'add_text_to_login' );El resultado en la pantalla sería el siguiente:
Nuevas Comprobaciones del Estado del Sitio para la Caché de Objetos Persistentes y la Caché de Página Completa
WordPress 6.1 introduce dos comprobaciones del Estado del Sitio para la Caché de Objetos Persistente y la Caché de Página. Ambas comprobaciones sólo se ejecutan en entornos de producción.
Puedes ver los resultados de estas nuevas comprobaciones en la pestaña Estado de la pantalla Salud del Sitio.
La prueba de Caché de Objetos Persistentes determina si el sitio utiliza una caché de objetos persistentes y, en caso contrario, recomienda su uso si tiene sentido para el sitio.
Además de la nueva prueba, WordPress 6.1 introduce varios filtros nuevos que los proveedores de alojamiento pueden utilizar en sus respectivos entornos.
Con site_status_persistent_object_cache_url, los proveedores de alojamiento pueden sustituir el texto predeterminado del enlace Más información para la caché de objetos persistentes por un enlace personalizado. Por ejemplo:
add_filter( 'site_status_persistent_object_cache_url', function() {
return 'https://example.com/persistent-object-cache';
} );Con site_status_persistent_object_cache_notes los alojamientos pueden reemplazar las notas por defecto para recomendar su solución de caché de objetos preferida. Aquí tienes un ejemplo de uso:
add_filter( 'site_status_persistent_object_cache_notes', function( $notes ) {
$notes = __( 'Custom notes.', 'text-domain' );
return $notes;
} );site_status_persistent_object_cache_thresholds filtra los umbrales utilizados para determinar si se debe sugerir el uso de una caché de objetos persistente. Los valores por defecto son:
$thresholds = apply_filters(
'site_status_persistent_object_cache_thresholds',
array(
'alloptions_count' => 500,
'alloptions_bytes' => 100000,
'comments_count' => 1000,
'options_count' => 1000,
'posts_count' => 1000,
'terms_count' => 1000,
'users_count' => 1000,
)
);Puedes utilizar el filtro de la siguiente manera:
add_filter( 'site_status_persistent_object_cache_thresholds', function( $thresholds ) {
$thresholds = array(
'alloptions_count' => 700,
'alloptions_bytes' => 150000,
'comments_count' => 1500,
'options_count' => 1500,
'posts_count' => 2000,
'terms_count' => 1000,
'users_count' => 2000,
);
return $thresholds;
} );site_status_should_suggest_persistent_object_cache es un filtro de cortocircuito que filtra si se sugiere el uso de una caché de objetos persistentes y omite las comprobaciones de umbral por defecto. Puedes utilizarlo de la siguiente manera:
add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_true' );La prueba de Caché de Página Completa comprueba si el sitio utiliza la caché de página completa y si el tiempo de respuesta es correcto:
Dos nuevos filtros también permiten a los alojamientos personalizar el umbral de respuesta y añadir cabeceras de caché personalizadas para ser detectadas.
El site_status_good_response_time_threshold filtra el umbral por debajo del cual un tiempo de respuesta se considera bueno. El valor por defecto es de 600 ms (ver también Los tiempos de respuesta lentos del servidor afectan al rendimiento).
site_status_page_cache_supported_cache_headers permite a los proveedores de alojamiento añadir cabeceras de caché personalizadas y las correspondientes llamadas de verificación. La nota para desarrolladores proporciona el siguiente ejemplo de uso:
add_filter( 'site_status_page_cache_supported_cache_headers', function( $cache_headers ) {
// Add new header to the existing list.
$cache_headers['cf-cache-status'] = static function ( $header_value ) {
return false !== strpos( strtolower( $header_value ), 'hit' );
};
return $cache_headers;
});Los desarrolladores pueden profundizar en las nuevas verificaciones del estado del sitio en:
- Propuesta: Comprobaciones del Estado del Sitio de la Caché de Objetos Persistentes y de la Caché de Página Completa
- Nuevas comprobaciones de la Salud del Sitio de la caché en WordPress 6.1
- Portar la Auditoría de Caché de Página Completa del plugin de rendimiento al core
- class-wp-site-health.php
Actualizaciones de la Herramienta de Andamiaje Create-block
WordPress 6.1 también introduce nuevas funciones y actualizaciones en el paquete @wordpress/create-block disponible para que los desarrolladores puedan crear nuevos bloques.
El andamiaje de bloques es la estructura de directorios de apoyo que permite a WordPress reconocer un bloque.
Con WordPress 6.1 se introducen un par de nuevas funciones y varias mejoras.
Una nueva bandera –variant permite a los desarrolladores de bloques elegir una variante de bloque para su andamiaje. Las plantillas internas proporcionadas por la herramienta de creación de bloques admiten las variantes dynamic y static, lo que significa que puedes andamiar un bloque dinámico o estático respectivamente. Por defecto es static.
Puedes utilizar la nueva bandera de la siguiente manera:
npx @wordpress/create-block my-first-block -variant=dynamicLos desarrolladores pueden definir variantes personalizadas añadiendo un objeto variants a la definición de la plantilla. Una función adicional permite ahora a los desarrolladores de bloques añadir nuevos bloques a un plugin existente gracias a la bandera --no-plugin.
npx @wordpress/create-block custom-block --no-pluginAl ejecutar el comando anterior se crea un nuevo conjunto de archivos de bloques en un subdirectorio del directorio actual.
Ten en cuenta que el script no conoce su ubicación:
Al llamar a
npx @wordpress/create-block block-name --no-pluginse creará un nuevo bloque dentro delfolderNamedirectorydonde se llama
Puedes leer más sobre las actualizaciones de la herramienta de creación de bloques.
Almacenamiento en Caché de los Resultados de las Consultas en WP_Query
WordPress 6.1 cambia la forma en que se ejecutan las consultas a la base de datos en la clase WP_Query. A partir de la versión 6.1, las consultas se almacenarán en la caché, por lo que si una consulta se ejecuta más de una vez, los resultados se cargarán desde la caché.
Tanto los sitios que utilicen la caché de objetos persistentes como los que utilicen la caché en memoria se beneficiarán de este cambio, aunque los beneficios para estos últimos serán menores.
Por defecto, todas las llamadas a WP_Query se almacenarán en la caché, pero los desarrolladores pueden optar por no almacenar las consultas en la caché utilizando el parámetro cache_results:
$args = array(
'posts_per_page' => 20,
'cache_results' => false
);
$query = new WP_Query( $args );También puedes desactivar el almacenamiento en caché de las consultas de forma global utilizando el hook disable_caching, aunque no se recomienda.
Hay que tener en cuenta que algunos parámetros de consulta no se tienen en cuenta para el almacenamiento en caché de las consultas. El más utilizado de estos parámetros es el parámetro fields. La razón es que si se tuviera en cuenta fields se producirían múltiples cachés para varios subconjuntos de los mismos datos, lo que provocaría una degradación del rendimiento.
Para profundizar en el almacenamiento en caché de WP_Query, consulta la nota pr desarrolladores Mejoras en el rendimiento de WP_Query en 6.1.
Partes de Plantillas en los Temas Clásicos
A partir de WordPress 6.1, los temas clásicos admiten partes de plantilla basadas en bloques. Para añadir esta función, los temas deben añadir soporte para block-template-parts como se muestra a continuación:
function add_block_template_part_support() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'add_block_template_part_support' );Los temas clásicos pueden incluir partes de plantilla en las plantillas PHP utilizando la función block_template_part. Puedes leer más sobre esta función en la nota para desarrolladores de temas tradicionales sobre «partes de plantillas» basadas en bloques.
Una nota Sobre la Conversión de Imágenes JPEG a WebP
Inicialmente parecía que WordPress 6.1 también habría introducido el soporte para la conversión de imágenes automática JPEG a WebP.
Sin embargo, muchos colaboradores informaron de varios problemas. En concreto, se observó que:
Los recursos para generar imágenes cuando se sube una imagen aumentarán drásticamente, sin embargo los recursos para servir una imagen disminuirá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 las 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 malo aquí. Significa que muchas subidas fallarán y dejarán a los usuarios tirados. También aumentará dramáticamente las solicitudes de soporte tanto para WordPress como para las empresas de alojamiento. No creas que esto es aceptable. Por todo ello, aunque el soporte de imágenes multi-mime sea necesario en WordPress, el enfoque actual no parece una buena solución.
Por último, tras un post de Matt Mullenweg en WordPress.org, la conversión automática de JPEG a WEBP ha sido retirada de WordPress 6.1.
Me interesa admitir nuevos formatos y mejorar el rendimiento, pero creo que, por ahora, este cambio que se aplica por defecto a los usuarios cuando se actualizan a la versión 6.1, es demasiado, incluso con algunas de las torpes interacciones que los sistemas operativos todavía tienen en torno a los archivos webp (¡y HEIC!).
Me parece bien que el soporte para trabajar con archivos webp y HEIC permanezca en el core, ya que deberíamos ser liberales en lo que aceptamos y trabajamos, pero no con el cambio de convertir todo a webp cuando se suben los JPEG.
Este es un territorio excelente para un plugin canónico, un concepto que creo que todos los equipos de Make deberían explorar mucho más como lugar para experimentar e impulsar la funcionalidad…
De todos modos, los usuarios y desarrolladores de WordPress pueden probar la conversión automática de imágenes JPEG a WebP instalando el plugin Performance Lab del Grupo de Rendimiento de WordPress.
Cambios Adicionales para los Desarrolladores
Además de las funciones y mejoras que hemos comentado anteriormente, WordPress 6.1 introduce varios cambios adicionales para los desarrolladores. Quizás quieras profundizar en estos cambios en las notas de desarrollo:
- Mejora del rendimiento de PHP para el registro de bloques del core
- Comportamiento del Bloque de Navegación en WP 6.1
- Preselecciones de Tamaño de Espaciado en theme.json
- Esconder nombres de Tablas y Campos con wpdb::prepare() en WordPress 6.1
- WP_List_Table::get_views_links() en WordPress 6.1
- Funciones y hooks para los campos obligatorios en WordPress 6.1
- Desplazamiento de la acción send_headers al final de la carga
- Mejoras en el rendimiento de la API REST
- Actualizaciones de los Componentes del Editor en WordPress 6.1
- Mejoras en el multisitio en WordPress 6.1
- Varios cambios en el Core de WordPress 6.1
- Guía del Campo Rendimiento para WordPress 6.1
- Mejoras varias en la API REST en WordPress 6.1
- Cambios en la API de bloques en WordPress 6.1
- Cambios varios en el editor de WordPress 6.1
- Soporte actualizado del diseño del editor en la 6.1 tras la refactorización
- Cambios en las preferencias del editor de bloques en WordPress 6.1
- Generación de estilos de bloque (Motor de Estilo)
- Valores de los Estilos de referencia en theme.json
Resumen
Con WordPress 6.1 estamos asistiendo a la consolidación de las capacidades de edición de sitios de WordPress. Todavía estamos en la fase dos de la hoja de ruta a largo plazo de Gutenberg, pero las herramientas y funciones de las que disponemos son cada vez más fiables y robustas. WordPress 6.1 trae la tipografía fluida, nuevas herramientas de creación de sitios y toneladas de mejoras en los bloques existentes.
Pero no sólo eso. WordPress 6.1 también aporta mejoras significativas en el rendimiento del CMS. Dos nuevas comprobaciones del estado del sitio detectan el uso de la caché de página completa y de la caché de objetos persistentes, el almacenamiento en caché de las consultas mejora el rendimiento de WP_Query y también hay mejoras en el rendimiento de PHP para el registro de los bloques principales.
En resumen, la 6.1 es una versión que encantará a los usuarios y diseñadores de WordPress, así como a los desarrolladores, que se beneficiarán de muchas mejoras en varias áreas del CMS.
Ahora depende de ti. ¿Qué es lo que más te gusta de WordPress 6.1? ¿Has probado ya la nueva versión en tu entorno de desarrollo? Comparte con nosotros tu opinión sobre WordPress 6.1 en la sección de comentarios que aparece a continuación.
Deja una respuesta