{"id":57185,"date":"2022-09-09T09:47:46","date_gmt":"2022-09-09T07:47:46","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=57185&preview=true&preview_id=57185"},"modified":"2025-01-17T14:52:50","modified_gmt":"2025-01-17T13:52:50","slug":"wordpress-6-1","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/wordpress-6-1\/","title":{"rendered":"Novedades de WordPress 6.1: Conversi\u00f3n de JPEG a WebP, Tipograf\u00eda Fluida, Sistema de Plantillas Mejorado \u00a1y Mucho M\u00e1s!"},"content":{"rendered":"

WordPress 6.1 \u00abMisha\u00bb se ha lanzado el 1 de noviembre de 2022<\/a>. El tercer gran lanzamiento del a\u00f1o sigue a WordPress 6.0 Arturo<\/a>, publicado el 24 de mayo, y a WordPress 5.9 Josephine<\/a>, publicado el 25 de enero.<\/p>\n

Como siempre ocurre, las nuevas versiones de WordPress traen nuevas funciones, mejoras y correcciones de errores de las \u00faltimas versiones del plugin Gutenberg en el core. Y WordPress 6.1 no es una excepci\u00f3n, ya que se han incorporado al n\u00facleo 11 versiones del plugin Gutenberg<\/a>, desde la 13.1 hasta la 14.1.<\/p>\n

En este post, echaremos un vistazo detr\u00e1s del tel\u00f3n y presentaremos las nuevas e interesantes caracter\u00edsticas que llegar\u00e1n con la nueva versi\u00f3n principal de WordPress.<\/p>\n

Matias Ventura nos ha dado algunas ideas en la Hoja de ruta hacia la 6.1<\/a>, 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.<\/p>\n\n

1. Mejoras en el Editor de Plantillas<\/strong>: Una de las principales novedades es el Editor de Plantillas<\/a>. WordPress 6.1 deber\u00eda introducir la posibilidad de navegar, visualizar y editar la estructura del sitio.<\/p>\n

2. Patrones de Plantillas<\/strong>: El objetivo es dar a los patrones de bloques un papel central<\/a> en la creaci\u00f3n de plantillas y p\u00e1ginas, adapt\u00e1ndolos a los tipos de entradas personalizadas<\/a> y tipos de bloques, mejorando la funcionalidad de bloqueo, mejorando la gesti\u00f3n de los patrones guardados, etc.<\/p>\n

3. Estilos y Bloques Globales y Herramientas de Dise\u00f1o<\/strong>: WordPress 6.1 permitir\u00e1 gestionar las fuentes web, implementar la tipograf\u00eda responsiva y ampliar el conjunto de herramientas disponibles para los bloques.<\/p>\n

Dicho esto, echemos un vistazo a algunas de las caracter\u00edsticas m\u00e1s potentes que llegar\u00e1n con WordPress 6.1:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Tipograf\u00eda Fluida y Espaciado<\/h2>\n

WordPress 6.1 a\u00f1ade soporte<\/a> para la Tipograf\u00eda Fluida<\/a> a trav\u00e9s de las funciones CSS\u00a0 calc<\/code><\/a>\/clamp<\/code><\/a>.<\/p>\n

La expresi\u00f3n Tipograf\u00eda fluida<\/a> describe la capacidad del texto de adaptarse a la anchura de la ventana gr\u00e1fica, escalando suavemente de una anchura m\u00ednima a una m\u00e1xima.<\/p>\n

Es algo diferente de lo que puedes conseguir con las media queries, ya que las media queries permiten que los temas cambien el tama\u00f1o del texto en funci\u00f3n de tama\u00f1os espec\u00edficos de la ventana gr\u00e1fica, pero no hacen nada entre diferentes valores.<\/p>\n

Algunos temas ya admiten la tipograf\u00eda fluida. Twenty Twenty-Two<\/a>, por ejemplo, utiliza la funci\u00f3n CSS clamp()<\/code> para varios tama\u00f1os de fuente. Por ejemplo:<\/p>\n

\"settings\": {\n\t...\n\t\"custom\": {\n\t\t\"spacing\": {\n\t\t\t\"small\": \"max(1.25rem, 5vw)\",\n\t\t\t\"medium\": \"clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))\",\n\t\t\t\"large\": \"clamp(4rem, 10vw, 8rem)\",\n\t\t\t\"outer\": \"var(--wp--custom--spacing--small, 1.25rem)\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"font-size\": {\n\t\t\t\t\"huge\": \"clamp(2.25rem, 4vw, 2.75rem)\",\n\t\t\t\t\"gigantic\": \"clamp(2.75rem, 6vw, 3.25rem)\",\n\t\t\t\t\"colossal\": \"clamp(3.25rem, 8vw, 6.25rem)\"\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n
Como puedes ver en el c\u00f3digo anterior, se utilizan valores de tama\u00f1o de fuente fluida para cada uno de los tama\u00f1os de fuente.<\/p>\n
Ahora, a partir de WordPress 6.1, los temas est\u00e1n habilitados para generar autom\u00e1ticamente tama\u00f1os de fuente fluidos<\/a> declarando la nueva propiedad typography.fluid<\/code> como sigue:<\/p>\n
\"settings\": {\n\t....\n\t\"typography\": {\n\t\t\"fluid\": true,\n\t\t\"fontSizes\": [\n\t\t\t{\n\t\t\t\t\"size\": \"2rem\",\n\t\t\t\t\"fluid\": {\n\t\t\t\t\t\"min\": \"2rem\",\n\t\t\t\t\t\"max\": \"2.5rem\"\n\t\t\t\t},\n\t\t\t\t\"slug\": \"medium\",\n\t\t\t\t\"name\": \"Medium\"\n\t\t\t}\n\t\t]\n}<\/code><\/pre>\n
Usando typography.fluid<\/code> y typography.fontSizes[].fluid<\/code>, el valor de cada tama\u00f1o de fuente se calcula autom\u00e1ticamente usando la siguiente f\u00f3rmula<\/a>:<\/p>\n
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});<\/code><\/pre>\n
Por ejemplo:<\/p>\n
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});<\/code><\/pre>\n
Ten en cuenta que, en el momento de escribir este art\u00edculo, la tipograf\u00eda fluida es una funci\u00f3n experimental. Puedes profundizar en los detalles t\u00e9cnicos en Soporte de bloques: a\u00f1adir tipograf\u00eda fluida<\/a>.<\/p>\n
\n
Fluid typography is a significant improvement for building modern #WordPress<\/a> websites. We just updated @frostwp<\/a> to include this feature. Here\u2019s a great read from @richard_tabor<\/a> into what it is and why it matters. https:\/\/t.co\/Bq5YuHX3wi<\/a><\/p>\n
— Brian Gardner (@bgardner) August 8, 2022<\/a><\/p><\/blockquote>\n