{"id":40201,"date":"2021-03-18T11:27:42","date_gmt":"2021-03-18T10:27:42","guid":{"rendered":"https:\/\/kinsta.com\/?p=90307"},"modified":"2025-12-16T19:47:45","modified_gmt":"2025-12-16T18:47:45","slug":"wordpress-5-7","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-7\/","title":{"rendered":"Las Novedades de WordPress 5.7 (Lazy Loading, HTTPS, Actualizaciones de la Interfaz de Usuario, Nuevas API y Mucho M\u00e1s)"},"content":{"rendered":"

Estamos acostumbrados a ver peque\u00f1os y no tan peque\u00f1os cambios y nuevas caracter\u00edsticas a\u00f1adidas al n\u00facleo de WordPress<\/a> cada vez que se lanza una nueva versi\u00f3n. WordPress 5.7 no es una excepci\u00f3n, y es estupendo ver c\u00f3mo cada nueva versi\u00f3n nos acerca un poco m\u00e1s al Big Picture<\/a>.<\/p>\n

Con varias versiones del editor de bloques fusionadas en el n\u00facleo, la nueva versi\u00f3n mejora la experiencia general de edici\u00f3n y permite a los desarrolladores construir bloques m\u00e1s avanzados y a\u00f1adir personalizaciones m\u00e1s potentes al editor de bloques.<\/p>\n

Aparte del editor, WordPress 5.7 tambi\u00e9n introduce toneladas de cambios y grandes caracter\u00edsticas, incluyendo iframes de lazy loading, actualizaciones de la interfaz de inicio de sesi\u00f3n y registro, enlaces para restablecer la contrase\u00f1a, un gran n\u00famero de correcciones de errores y mucho m\u00e1s.<\/p>\n

Hemos hecho nuestras pruebas en DevKinsta<\/a>, y estamos listos para compartir con contigo nuestras caracter\u00edsticas y cambios favoritos que vienen con WordPress 5.7-completado, por supuesto, con toneladas de capturas de pantalla y fragmentos de c\u00f3digo.<\/p>\n

Si quieres profundizar en la primera gran versi\u00f3n de 2021, consulta el Development Cycle<\/a> de WordPress 5.7, el Planning Roundu<\/a>\u00a0y la Field Guide<\/a>.<\/p>\n

As\u00ed que, mientras seguimos esperando el Full Site Editing<\/a> (en el n\u00facleo de WordPress 5.8), \u00a1pong\u00e1monos c\u00f3modos y disfrutemos de las novedades de WordPress 5.7!<\/p>\n\n

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

Novedades del Editor de Bloques<\/h2>\n

WordPress 5.7 trae muchas versiones del plugin Gutenberg<\/a> al Core. Ser\u00eda imposible mencionar aqu\u00ed todas esas incorporaciones adem\u00e1s de los numerosos cambios y correcciones de errores a\u00f1adidos al editor, pero puedes visitar los siguientes enlaces para profundizar en cada versi\u00f3n: 9.3<\/a>, 9.4<\/a>, 9.5<\/a>, 9.6<\/a>, 9.7<\/a>, 9.8<\/a>, 9.9<\/a>.<\/p>\n

Las correcciones de errores y las mejoras de rendimiento de Gutenberg 10.0 y 10.1 tambi\u00e9n forman parte de WordPress 5.7.<\/p>\n

Dicho esto, vamos a repasar nuestra lista de las caracter\u00edsticas y los cambios m\u00e1s interesantes a\u00f1adidos al editor de bloques con WordPress 5.7:<\/p>\n

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

Caracter\u00edsticas, Mejoras y API de las Variaciones de Bloques<\/h3>\n

Introducido con WordPress 5.4, las variaciones de bloque<\/a> proporcionan una manera para que el usuario seleccione una instancia diferente del mismo bloque.<\/p>\n

Esta funci\u00f3n funciona junto con la API de variaciones<\/a> de bloques, una potente herramienta que permite a los desarrolladores a\u00f1adir, gestionar o eliminar variaciones de bloques.<\/p>\n

WordPress 5.7 introduce varias mejoras, funciones y nuevas API para las variaciones de los bloques, proporcionando una mejor interfaz de usuario y herramientas m\u00e1s potentes para los desarrolladores. Vamos a sumergirnos en ello.<\/p>\n

Transformaciones en la Variaci\u00f3n de bloques<\/h4>\n

Introducido por primera vez con Gutenberg 9.4<\/a> y ahora a\u00f1adido a WordPress 5.7, un conmutador de transformaci\u00f3n a variaci\u00f3n <\/strong>aparece debajo de la tarjeta de bloque para los bloques que soportan esta caracter\u00edstica.<\/p>\n

\"El
El conmutador de transformaci\u00f3n a variaci\u00f3n para un bloque de botones<\/figcaption><\/figure>\n

Al registrar una nueva variaci\u00f3n de bloque, los desarrolladores de bloques pueden a\u00f1adir el conmutador de variaciones al inspector de bloques a\u00f1adiendo la opci\u00f3n de nueva transform<\/code> al campo de scope<\/code> de la variaci\u00f3n de bloque, como se muestra en el siguiente ejemplo (solo c\u00f3digo JS):<\/p>\n

wp.blocks.registerBlockVariation( 'core\/heading', { \n\tname: 'green-text', \n\ttitle: 'Green Text', \n\tdescription: 'This block has green text. It overrides the default description.',  \n\tattributes: { \n\t\tcontent: 'Green Text', \n\t\ttextColor: 'vivid-green-cyan' \n\t}, \n\ticon: 'palmtree', \n\tscope: [ 'inserter', 'transform' ] \n} );<\/code><\/pre>\n
En este ejemplo, la variaci\u00f3n de un bloque aparece en dos \u00e1reas de la interfaz de usuario del editor: el insertador de bloques y el inspector de bloques.<\/p>\n
\"Ejemplo
Ejemplo de variaci\u00f3n de bloques con \u00e1mbito de transformaci\u00f3n<\/figcaption><\/figure>\n
Para obtener una descripci\u00f3n detallada de las transformaciones de las variaciones en bloque, v\u00e9ase tambi\u00e9n el PR #26687<\/a>.<\/p>\n
La Informaci\u00f3n de los Bloques Ahora coincide con las Variaciones de los Mismos<\/h4>\n
Desde WordPress 5.7 (y Gutenberg 9.7<\/a>), la interfaz de usuario muestra informaci\u00f3n m\u00e1s espec\u00edfica sobre las variaciones de los bloques, mientras que antes solo mostraba informaci\u00f3n gen\u00e9rica.<\/p>\n
\"Antes
Antes de WordPress 5.7, los elementos de la interfaz mostraban informaci\u00f3n gen\u00e9rica sobre las variaciones de los bloques<\/figcaption><\/figure>\n
Los bloques incrustados y los Iconos Sociales est\u00e1n construidos como variaciones de bloques; proporcionan buenos ejemplos de c\u00f3mo WordPress hace coincidir la informaci\u00f3n de los bloques con las variaciones de los mismos.<\/p>\n
\"Ahora
Ahora los elementos de la interfaz muestran informaci\u00f3n espec\u00edfica de las variaciones de los bloques<\/figcaption><\/figure>\n
Estos cambios afectan al inspector de bloques, a la barra de navegaci\u00f3n de bloques y a las migas de pan. Desde Gutenberg 9.8<\/a>, esta mejora de la interfaz de usuario tambi\u00e9n se aplica al conmutador de bloques.<\/p>\n
\"Mejora
Mejora de la interfaz de usuario para las variaciones de bloques en el conmutador de bloques<\/figcaption><\/figure>\n
Nuevas API de Variaciones de Bloques<\/h4>\n
WordPress 5.7 tambi\u00e9n introduce nuevas APs<\/a> que los desarrolladores pueden utilizar en el registro de variaciones de bloque para mostrar la informaci\u00f3n correcta de una variaci\u00f3n de bloque (Gutenberg 9.7<\/a>).<\/p>\n
La nueva propiedad isActive<\/code> es una funci\u00f3n que acepta los atributos de un bloque. Puedes utilizar los atributos de la variaci\u00f3n para determinar si una variaci\u00f3n est\u00e1 activa (v\u00e9ase tambi\u00e9n la Referencia de la API de bloques<\/a>).<\/p>\n
Los desarrolladores de bloques pueden utilizar esta funci\u00f3n para mostrar la informaci\u00f3n de la variaci\u00f3n en lugar de la informaci\u00f3n del bloque. Un ejemplo podr\u00eda ser el bloque de embed<\/code>, donde podemos cambiar el valor del atributo providerNameSlug<\/code> (un ejemplo de la nota de desarrollo<\/a>):<\/p>\n
const variations = [\n{\n\tname: 'wordpress',\n\ttitle: 'WordPress',\n\tkeywords: [ __( 'post' ), __( 'blog' ) ],\n\tdescription: __( 'Embed a WordPress post.' ),\n\tattributes: { providerNameSlug: 'wordpress' },\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n},\n];<\/code><\/pre>\n
En el siguiente ejemplo, la propiedad isActive<\/code> se utiliza para cambiar el atributo de color:<\/p>\n
variations: [\n{\n\tname: 'blue',\n\ttitle: __( 'Blue Quote' ),\n\tisDefault: true,\n\tattributes: { color: 'blue', className: 'is-style-blue-quote' },\n\ticon: 'format-quote',\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.color === variationAttributes.color\n},\n],<\/code><\/pre>\n
El nuevo hook useBlockDisplayInformation<\/code> devuelve informaci\u00f3n sobre un bloque determinado. El nuevo gancho tiene en cuenta la propiedad isActive de una variaci\u00f3n del bloque y devuelve el title<\/code>, el icon<\/code> y la description<\/code> del bloque.<\/p>\n
Estos cambios afectan a la tarjeta de bloque (herramientas del inspector), a la vista de la lista de navegaci\u00f3n (barra superior) y a las migas de pan (v\u00e9ase tambi\u00e9n el PR #27469<\/a>).<\/p>\n
Nuevas Caracter\u00edsticas del Bloque de Botones<\/h3>\n
Un par de nuevas caracter\u00edsticas mejoran la funcionalidad y la interfaz del bloque de botones.<\/p>\n
Dimensiones de los Botones<\/h4>\n
Un nuevo control disponible en los Ajustes de la barra lateral nos permite ahora establecer un porcentaje de anchura para los botones alojados en los bloques de Botones (Gutenberg 9.4<\/a>).<\/p>\n
\"Configuraci\u00f3n
Configuraci\u00f3n de la anchura de los botones<\/figcaption><\/figure>\n
Solo tienes que seleccionar un bot\u00f3n y elegir 25%, 50%, 75% o 100%. Los porcentajes se refieren al contenedor principal. La imagen siguiente muestra diferentes combinaciones de dimensiones de botones.<\/p>\n
\"Combinaciones
Combinaciones de botones con diferentes valores de anchura<\/figcaption><\/figure>\n
Para m\u00e1s informaci\u00f3n t\u00e9cnica, consulta los pull requests #25999<\/a> y #26781<\/a>.<\/p>\n
Disposici\u00f3n Vertical<\/h4>\n
Esta nueva funci\u00f3n a\u00f1ade variaciones para la orientaci\u00f3n vertical al bloque de Botones. Los usuarios pueden cambiar de un dise\u00f1o horizontal a uno vertical utilizando el conmutador de transformaciones disponible en el panel de configuraci\u00f3n del bloque (Gutenberg 9.6<\/a>).<\/p>\n
\"Bloque
Bloque de botones con orientaci\u00f3n vertical<\/figcaption><\/figure>\n
Mejoras en los \u00cdconos Sociales<\/h3>\n
WordPress 5.7 a\u00f1ade nuevas opciones de personalizaci\u00f3n a los \u00cdconos Sociales<\/a>: soporte de tama\u00f1os y colores personalizados.<\/p>\n
Tama\u00f1o de los \u00cdconos Sociales<\/h4>\n
Con el bloque de \u00cdconos sociales seleccionado, la barra de herramientas del bloque ofrece ahora un men\u00fa de opciones de tama\u00f1o <\/strong>con los tama\u00f1os disponibles (Gutenberg 9.4<\/a>).<\/p>\n
\"Tama\u00f1o
Tama\u00f1o \u00abenorme\u00bb para los iconos sociales<\/figcaption><\/figure>\n
Colores Personalizados en los Iconos Sociales<\/h4>\n
El mismo bloque ahora admite la configuraci\u00f3n de colores, lo que nos permite establecer diferentes colores personalizados para los iconos y los fondos (Gutenberg 9.9<\/a>).<\/p>\n
\"Iconos
Iconos sociales con fondo negro<\/figcaption><\/figure>\n
Ahora puedes utilizar la paleta de colores del tema para los iconos sociales, evitando que los colores de los iconos choquen con el esquema de colores de tu sitio web<\/a> (ver tambi\u00e9n PR #28084<\/a>).<\/p>\n
Soporte al Tama\u00f1o de la Fuente<\/h3>\n
WordPress 5.7 a\u00f1ade soporte del tama\u00f1o de la fuente<\/a> para los bloques de lista y de c\u00f3digo.<\/p>\n
Tama\u00f1o de la Fuente en el Bloque de la Lista<\/h4>\n
Se ha a\u00f1adido una tarjeta de tipograf\u00eda con controles para el tama\u00f1o de la fuente en la configuraci\u00f3n del bloque de la lista (Gutenberg 9.4<\/a>).<\/p>\n
\"Tama\u00f1o
Tama\u00f1o de la fuente en la configuraci\u00f3n del bloque de la lista<\/figcaption><\/figure>\n
Los usuarios pueden elegir uno de los tama\u00f1os de letra disponibles para los elementos de la lista o establecer un tama\u00f1o de letra personalizado expresado en p\u00edxeles. El bot\u00f3n \u00abReset\u00bb restablece los valores por defecto.<\/p>\n
Soporte al Tama\u00f1o de la Fuente en el Bloque de C\u00f3digo<\/h4>\n
WordPress 5.7 tambi\u00e9n a\u00f1ade soporte para la gesti\u00f3n del tama\u00f1o de la fuente dentro de los bloques de c\u00f3digo. Con un bloque de c\u00f3digo seleccionado, la barra lateral de ajustes del bloque muestra un nuevo control de tama\u00f1o de fuente<\/strong>. Este control te permite elegir uno de los tama\u00f1os preestablecidos disponibles en tu tema<\/a> o establecer un valor personalizado en p\u00edxeles (Gutenberg 9.5<\/a>).<\/p>\n
\"Tama\u00f1os
Tama\u00f1os de fuente globales disponibles en Twenty Twenty<\/figcaption><\/figure>\n
La implementaci\u00f3n de esta funci\u00f3n tambi\u00e9n permite utilizar variables de estilo globales en el CSS de los bloques Code (v\u00e9ase tambi\u00e9n el PR #27294<\/a>). La imagen siguiente muestra un bloque Code en el frontend con el tema Twenty Twenty<\/a> instalado.<\/p>\n
\"Estilos
Estilos CSS globales en un bloque de c\u00f3digo<\/figcaption><\/figure>\n
Alineaci\u00f3n de Altura Completa en el Bloque de Cubierta<\/h3>\n
WordPress 5.7 introduce un nuevo componente de alineaci\u00f3n de la barra de herramientas de altura completa. Se a\u00f1adi\u00f3 por primera vez al editor de bloques con Gutenberg 9.5<\/a>. Ahora, se ha fusionado en el Core y se ha implementado en el bloque de cubierta.<\/p>\n
\"Se
Se ha implementado la alineaci\u00f3n de altura completa en el bloque de cubierta<\/figcaption><\/figure>\n
Si activas el bot\u00f3n de la barra de herramientas del bloque, manteniendo un ojo en el control de la altura m\u00ednima, ver\u00e1s que la alineaci\u00f3n de altura completa es solo una abreviatura de 100vh<\/code> (lee m\u00e1s sobre las longitudes de porcentaje de la ventana gr\u00e1fica<\/a>).<\/p>\n
\"Alineaci\u00f3n
Alineaci\u00f3n de altura completa en un bloque de cubierta<\/figcaption><\/figure>\n
Puedes utilizar la alineaci\u00f3n de altura completa en combinaci\u00f3n con otros ajustes de control como el fondo fijo, la posici\u00f3n del contenido, etc. Probablemente te sorprender\u00e1 la cantidad de efectos impresionantes que podr\u00e1s crear en tus p\u00e1ginas.<\/p>\n
Arrastrar y Soltar Bloques y Patrones Desde el Insertador<\/h3>\n
El insertador de bloques ahora soporta la funci\u00f3n de arrastrar y soltar para bloques y patrones<\/a>. Los usuarios pueden tomar cualquier bloque o patr\u00f3n del insertador y colocarlo en cualquier lugar del lienzo de la publicaci\u00f3n (Gutenberg 9.6<\/a> y 9.7<\/a>).<\/p>\n
\"Ahora
Ahora puedes arrastrar bloques o patrones desde el insertador hasta el lienzo de la entrada<\/figcaption><\/figure>\n
Ten en cuenta que la funci\u00f3n de arrastrar y soltar solo funciona si tu tema admite patrones de bloques.<\/p>\n
Bloque Espaciador Semitransparente<\/h3>\n
En lugar del anterior color gris opaco, el bloque Espaciador tiene ahora un fondo semitransparente (Gutenberg 9.8<\/a>).<\/p>\n
\"Un
Un bloque espaciador opaco en WordPress 5.6<\/figcaption><\/figure>\n
Esta caracter\u00edstica deber\u00eda facilitar la identificaci\u00f3n del bloque espaciador sobre cualquier color de fondo.<\/p>\n
\"Un
Un bloque espaciador semitransparente en WordPress 5.7<\/figcaption><\/figure>\n
Mejoras Adicionales en el Editor de Bloques que Merecen la Pena Ser Mencionados<\/h3>\n
Nuestra lista no cubre todas las caracter\u00edsticas y mejoras incorporadas al n\u00facleo, as\u00ed que aseg\u00farate de consultar la documentaci\u00f3n oficial y las notas de desarrollo para obtener un registro m\u00e1s completo de las novedades del editor de bloques con WordPress 5.7.<\/p>\n
Pero solo para nombrar algunos otros, en 5.7, tambi\u00e9n encontrar\u00e1s:<\/p>\n