{"id":42452,"date":"2021-07-22T12:59:59","date_gmt":"2021-07-22T10:59:59","guid":{"rendered":"https:\/\/kinsta.com\/?p=98590"},"modified":"2025-02-11T09:59:31","modified_gmt":"2025-02-11T08:59:31","slug":"wordpress-5-8","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/","title":{"rendered":"Novedades de WordPress 5.8 (Edici\u00f3n Completa del Sitio, Im\u00e1genes WebP, Estilos y Ajustes globales y Mucho M\u00e1s)"},"content":{"rendered":"<p>WordPress 5.8 \u00abTatum\u00bb ya <a href=\"https:\/\/wordpress.org\/news\/2021\/07\/tatum\/\">est\u00e1 aqu\u00ed<\/a> y es un lanzamiento trascendental. Aparte del incre\u00edble n\u00famero de caracter\u00edsticas, mejoras y correcciones de errores, WP 5.8 introduce una nueva forma de construir sitios web al traer las primeras funciones que caen bajo el proyecto m\u00e1s amplio conocido como <strong>Edici\u00f3n Completa del Sitio (Full Site Editing &#8211; FSE).<\/strong><\/p>\n<p>Aparte de la edici\u00f3n completa del sitio, WordPress 5.8 trae consigo toneladas de cambios y mejoras en varias \u00e1reas del <a href=\"https:\/\/kinsta.com\/es\/cuota-de-mercado-de-wordpress\/\">CMS<\/a>.<\/p>\n<p>Los usuarios de WordPress que no utilicen el plugin Gutenberg encontrar\u00e1n caracter\u00edsticas y mejoras procedentes de nueve versiones de Gutenberg en total (para profundizar en cada una de ellas, consulta Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/05\/whats-new-in-gutenberg-9-9-5-february\/\">9.9<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/17\/whats-new-in-gutenberg-10-0-february\/\">10.0<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">10.1<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">10.2<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">10.4<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">10.5<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">10.6<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">10.7<\/a>).<\/p>\n<p>Una novedad importante para los usuarios que se toman en serio el rendimiento de sus sitios es la compatibilidad con el formato WebP.<\/p>\n<p>A los desarrolladores seguramente les encantar\u00e1 la eliminaci\u00f3n de IE11 de la lista de navegadores compatibles, el nuevo mecanismo de configuraci\u00f3n y estilo de bloques basado en <strong>theme.json<\/strong>, el sistema mejorado de registro de bloques basado en <strong>block.json <\/strong>y las numerosas mejoras de la API que llegar\u00e1n con la segunda <a href=\"https:\/\/kinsta.com\/es\/blog\/version-wordpress\/\">versi\u00f3n de WordPress<\/a> de 2021.<\/p>\n<p>As\u00ed pues, no te pierdas nuestro an\u00e1lisis, porque va a ser un extenso resumen de las caracter\u00edsticas y mejoras que allanan el camino para las nuevas y potentes herramientas de creaci\u00f3n de sitios que se espera que salgan a la luz en los <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24551\">pr\u00f3ximos meses<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Hay muchos cambios en WordPress 5.8. Para evitar cualquier riesgo de incurrir en conflictos inesperados con tus temas y plugins, te recomendamos encarecidamente que hagas una <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/copias-de-seguridad-wordpress\/#wordpress-backup\">copia de seguridad de tu sitio web<\/a> y pruebes la nueva versi\u00f3n en un <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/entorno-staging\/\">entorno staging<\/a> antes de actualizar tu sitio en vivo.<\/p>\n<\/aside>\n\n\n<h2>Caracter\u00edsticas del Full Site Editing en WordPress 5.8<\/h2>\n<p>La visi\u00f3n detr\u00e1s de Full Site Editing es proporcionar una colecci\u00f3n de herramientas y caracter\u00edsticas que permitan a los usuarios de WordPress <a href=\"https:\/\/wordpress.org\/news\/2021\/06\/gutenberg-highlights\/\">construir un sitio web completo utilizando bloques<\/a>. Con Full Site Editing, veremos muchos bloques disponibles para crear cualquier elemento de la p\u00e1gina, desde <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-de-menu-de-wordpress\/\">men\u00fas de navegaci\u00f3n<\/a> hasta branding del sitio, widgets de la barra lateral, plantillas y mucho m\u00e1s.<\/p>\n<p>Incluso si WordPress 5.8 introduce varias caracter\u00edsticas que caen dentro del \u00e1mbito del Full Site Editing (FSE), no esperes ver un entorno visual de construcci\u00f3n de sitios con todas las funciones. FSE es todav\u00eda un trabajo en curso, y el lanzamiento de WordPress 5.8 abre una especie de fase beta p\u00fablica. Seg\u00fan <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/08\/full-site-editing-scope-for-wp5-8\/\">Josepha Haden Chomphosy<\/a>:<\/p>\n<blockquote><p><em>Full Site Editing es una colecci\u00f3n de proyectos y juntos representan un gran cambio, posiblemente demasiado para una sola versi\u00f3n. El contexto m\u00e1s importante que hay que compartir es que no es la experiencia completa por defecto para los usuarios. Uno de los comentarios m\u00e1s claros del proceso de fusi\u00f3n de la Fase Uno fue que no hubo tiempo suficiente para que nuestros extensores (agencias, autores de temas, desarrolladores de plugins, creadores de sitios, etc.) se prepararan para los pr\u00f3ximos cambios.<\/em><\/p>\n<p><em style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><em>Teniendo esto en cuenta, este proceso de fusi\u00f3n no ser\u00e1 un interruptor de encendido\/apagado. Ahora no se trata de una experiencia de usuario completa y llena de matices, sino m\u00e1s bien de una beta p\u00fablica abierta dentro de WordPress 5.8<\/em>.<\/em><\/p><\/blockquote>\n<p>As\u00ed que WordPress 5.8 no introduce una experiencia FSE perfecta y completa por ahora. En su lugar, veremos c\u00f3mo se a\u00f1aden y mejoran nuevas funciones con el tiempo, a partir de la versi\u00f3n 5.8. Por la misma raz\u00f3n, podemos suponer que WordPress 5.8 no tendr\u00e1 un impacto dram\u00e1tico en la forma en que estamos acostumbrados a construir sitios web.<\/p>\n<p>En el momento de escribir este art\u00edculo, los propietarios y administradores de sitios todav\u00eda tienen que optar conscientemente por FSE instalando un tema de bloques, como <a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\">Twenty-Twenty One Blocks<\/a> (la <a href=\"https:\/\/kinsta.com\/es\/blog\/twenty-twenty-one-tema\/#the-twenty-twentyone-blocks-experiment\">versi\u00f3n basada en bloques<\/a> de Twenty-Twenty One), y activando el plugin Gutenberg.<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=a1Sf7PxfmLQ\"><\/kinsta-video><\/p>\n<p>La <a href=\"https:\/\/developer.wordpress.org\/block-editor\/handbook\/full-site-editing\/\">Edici\u00f3n del Sitio completa<\/a> abarca una serie de subproyectos separados, incluyendo el Editor del Sitio, los <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Estilos Globales<\/a>, el bloque de Consulta, el bloque de Navegaci\u00f3n, las Plantillas, los bloques tem\u00e1ticos y mucho m\u00e1s. Pero lo m\u00e1s parecido a la edici\u00f3n de sitios en WordPress 5.8 es el <strong>modo de edici\u00f3n de plantillas<\/strong> y los correspondientes <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#theme-blocks\">bloques tem\u00e1ticos<\/a> disponibles para usar en ese modo, como veremos m\u00e1s adelante en este art\u00edculo.<\/p>\n<p>A continuaci\u00f3n, vamos a analizar algunas de las <strong>funciones de FSE que se han incorporado al n\u00facleo con WordPress 5.8<\/strong>.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Modo de edici\u00f3n de plantillas<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/introducing-the-template-editor-in-wordpress-5-8\/\">El modo de edici\u00f3n de plantillas<\/a> proporciona una forma de crear plantillas de entradas\/p\u00e1ginas utilizando bloques. Es una gran manera de reducir la complejidad de la creaci\u00f3n de sitios, permitiendo a los usuarios aprovechar varias caracter\u00edsticas de edici\u00f3n de sitios desde fuera de la interfaz del editor de sitios mientras se acostumbra a trabajar con bloques. Esto tambi\u00e9n es genial para los usuarios que no utilizan temas basados en bloques, pero que siguen buscando una forma f\u00e1cil de crear y editar plantillas desde la interfaz de usuario del editor de bloques.<\/p>\n<p>Personalizar los temas nunca hab\u00eda sido tan f\u00e1cil en WordPress. Ahora ya no necesitas <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">crear un tema hijo<\/a> para crear tus plantillas personalizadas. Con WordPress 5.8, la edici\u00f3n de plantillas no se limita a los temas en bloque, sino que tambi\u00e9n est\u00e1 <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">disponible para que la utilices con los temas cl\u00e1sicos<\/a>, aunque tienes que optar por activarla para los temas cl\u00e1sicos.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>La edici\u00f3n de plantillas se puede utilizar en temas cl\u00e1sicos que incluyan un archivo theme.json o que admitan \u00ab<code>plantillas en bloque<\/code>\u00ab. No se puede desactivar para los temas de bloque.<\/p>\n<\/aside>\n\n<figure style=\"width: 2873px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-the-template-editor.jpg\" alt=\"El editor de plantillas.\" width=\"2873\" height=\"1385\"><figcaption class=\"wp-caption-text\">El editor de plantillas.<\/figcaption><\/figure>\n<p>Para crear una nueva plantilla, basta con activar el modo de edici\u00f3n de plantillas en la barra lateral de <strong>configuraci\u00f3n<\/strong>. Ahora hay un nuevo panel de <strong>plantillas <\/strong>para que los usuarios cambien el modo de edici\u00f3n (v\u00e9ase la nota de la versi\u00f3n de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">Gutenberg 10.5<\/a>).<\/p>\n<figure style=\"width: 1676px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-panel.jpg\" alt=\"Panel de plantillas en la barra lateral del editor de bloques.\" width=\"1676\" height=\"942\"><figcaption class=\"wp-caption-text\">Panel de plantillas en la barra lateral del editor de bloques.<\/figcaption><\/figure>\n<p>En el panel de <strong>plantillas<\/strong>, puedes crear una nueva plantilla o editar una existente.<\/p>\n<figure style=\"width: 1674px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/create-custom-template.jpg\" alt=\"Establecer un nombre de plantilla.\" width=\"1674\" height=\"938\"><figcaption class=\"wp-caption-text\">Establecer un nombre de plantilla.<\/figcaption><\/figure>\n<p>Para crear una nueva plantilla, haz clic en <strong>Nueva<\/strong>. A continuaci\u00f3n, introduce un nombre de plantilla en el modal y haz clic en <strong>Crear<\/strong>, y ya est\u00e1 listo.<\/p>\n<figure style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode.jpg\" alt=\"Modo de edici\u00f3n de plantillas en WordPress 5.8.\" width=\"2876\" height=\"1314\"><figcaption class=\"wp-caption-text\">Modo de edici\u00f3n de plantillas en WordPress 5.8.<\/figcaption><\/figure>\n<p>En el modo de edici\u00f3n de plantillas, puedes construir tus plantillas utilizando todos los bloques disponibles, incluyendo los bloques de FSE como el t\u00edtulo del sitio, el lema del sitio, el inicio de sesi\u00f3n\/salida y muchos m\u00e1s.<\/p>\n<p>Una vez que est\u00e9s satisfecho con tus ediciones, puedes volver al modo de edici\u00f3n de publicaciones y guardar la plantilla por separado del contenido de la publicaci\u00f3n\/p\u00e1gina, como se muestra en la imagen siguiente:<\/p>\n<figure style=\"width: 2076px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/save-template.jpg\" alt=\"Las opciones de guardar la plantilla.\" width=\"2076\" height=\"994\"><figcaption class=\"wp-caption-text\">Las opciones para guardar la plantilla.<\/figcaption><\/figure>\n<p>Las plantillas se almacenan en la <a href=\"https:\/\/kinsta.com\/es\/blog\/base-de-datos-wordpress\/\">base de datos de WordPress<\/a> como tipos de entradas personalizadas denominadas <code>wp_template<\/code>. Esto no solo te permite editar una plantilla desde la interfaz del editor, sino que tambi\u00e9n facilita su importaci\u00f3n o exportaci\u00f3n a voluntad. Tambi\u00e9n puedes utilizar una plantilla en diferentes sitios web (en el momento de escribir este art\u00edculo, esta funci\u00f3n solo est\u00e1 disponible si activas el plugin Gutenberg).<\/p>\n<figure style=\"width: 1566px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/export-templates.png\" alt=\"Exportaci\u00f3n de plantillas y partes de plantillas.\" width=\"1566\" height=\"1116\"><figcaption class=\"wp-caption-text\">Exportaci\u00f3n de plantillas y partes de plantillas.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Ten en cuenta que si estableces una plantilla de bloque para una p\u00e1gina o una entrada de blog, la plantilla PHP normal ya no se utilizar\u00e1 para generar la p\u00e1gina. En su lugar se utilizar\u00e1 la plantilla de bloque.<\/p>\n<\/aside>\n\n<p>El modo de edici\u00f3n de plantillas sigue teniendo algunos fallos en el momento de escribir este art\u00edculo, como se informa en esta <a href=\"https:\/\/make.wordpress.org\/test\/2021\/05\/26\/fse-program-testing-call-7-polished-portfolios\/\">convocatoria de pruebas<\/a> y en <a href=\"https:\/\/wptavern.com\/fse-outreach-7-building-a-portfolio-in-the-upcoming-template-editing-mode\">este experimento de Justin Tadlock<\/a>.<\/p>\n<figure style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode-issue.jpg\" alt=\"Problema de alineaci\u00f3n de ancho completo en el tema cl\u00e1sico Twenty Twenty-One.\" width=\"2314\" height=\"916\"><figcaption class=\"wp-caption-text\">Problema de alineaci\u00f3n de ancho completo en el tema cl\u00e1sico Twenty Twenty-One.<\/figcaption><\/figure>\n<p>Pero todo lo que se necesita es un poco de paciencia y esperar a que se solucionen los <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Template%20Editing%20Mode\">principales problemas<\/a> para comprender plenamente c\u00f3mo el modo de edici\u00f3n de plantillas cambiar\u00e1 la forma de personalizar el aspecto de tus sitios web.<\/p>\n<p>Los usuarios ya no necesitar\u00e1n conocimientos de desarrollo para tener un control total sobre el dise\u00f1o y la apariencia general del sitio web.<\/p>\n<figure style=\"width: 2316px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/cover-block-in-template-editing-mode.jpg\" alt=\"Se ha solucionado el problema de la alineaci\u00f3n a lo ancho.\" width=\"2316\" height=\"1130\"><figcaption class=\"wp-caption-text\">Se ha solucionado el problema de la alineaci\u00f3n a lo ancho.<\/figcaption><\/figure>\n<p>El modo de edici\u00f3n de plantillas estaba <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">disponible al principio tanto para los temas en bloque como para los temas cl\u00e1sicos<\/a>. Despu\u00e9s de un debate en el canal de l\u00edderes de la versi\u00f3n 5.8, se decidi\u00f3 que el editor de plantillas estuviera disponible para los temas cl\u00e1sicos y no para los temas en bloque (v\u00e9ase tambi\u00e9n el pull #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32858\">32858<\/a>).<\/p>\n<p>Seg\u00fan <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/07\/08\/summary-theme-features-in-wordpress-5-8\/\">Carolina Nymark<\/a>:<\/p>\n<blockquote><p>Inicialmente, la edici\u00f3n de plantillas estaba habilitada para todos los temas. Los desarrolladores de temas expresaron su preocupaci\u00f3n por no poder actualizar todos sus temas cl\u00e1sicos existentes para soportar esta nueva caracter\u00edstica. Con un cambio tard\u00edo, el equipo de lanzamiento y el equipo de editores decidieron cambiar la edici\u00f3n de plantillas para que fuera opcional para los temas cl\u00e1sicos.<\/p><\/blockquote>\n<p>Para optar por los temas cl\u00e1sicos, ahora los desarrolladores deben a\u00f1adir soporte para los temas:<\/p>\n<pre><code class=\"language-php\">add_theme_support( 'block-templates' );<\/code><\/pre>\n<p>Los temas cl\u00e1sicos que utilizan <em>theme.json<\/em> pueden optar por eliminar el soporte de temas:<\/p>\n<pre><code class=\"language-php\">remove_theme_support(  'block-templates' );<\/code><\/pre>\n<p>Para una visi\u00f3n m\u00e1s detallada de c\u00f3mo funciona el modo de edici\u00f3n de plantillas en WordPress 5.8 y algunos ejemplos \u00fatiles de uso, aseg\u00farate de ver este v\u00eddeo de Anne McCarty:<\/p>\n<p>\u00a0<\/p>\n<h3>Bloques tem\u00e1ticos<\/h3>\n<p>Como se mencion\u00f3 anteriormente, FSE no es una sola caracter\u00edstica, sino un conjunto completo de caracter\u00edsticas de construcci\u00f3n de sitios no solo relacionados con el editor del sitio. El <a href=\"#template-editing-mode\">modo de edici\u00f3n de plantillas<\/a> es solo un ejemplo de ello. Pero junto con la edici\u00f3n de plantillas, WordPress 5.8 tambi\u00e9n trae muchos <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/20\/full-site-editing-go-no-go-next-steps\/\">bloques tem\u00e1ticos<\/a> que pueden mostrar informaci\u00f3n recuperada din\u00e1micamente de la base de datos. Algunos de estos bloques tambi\u00e9n se pueden utilizar en contextos que no son de FSE (ver tema #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">28744<\/a>).<\/p>\n<figure style=\"width: 1124px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/fse-blocks.jpg\" alt=\"Bloques completos del Editor del Sitio disponibles en contextos no FSE desde WordPress 5.8.\" width=\"1124\" height=\"1798\"><figcaption class=\"wp-caption-text\">Bloques completos del Editor del Sitio disponibles en contextos no FSE desde WordPress 5.8.<\/figcaption><\/figure>\n<p><strong>Los Bloques Tem\u00e1ticos traen las caracter\u00edsticas de las etiquetas de las plantillas a los temas cl\u00e1sicos<\/strong>, y puedes usarlos de la misma manera que los bloques normales. Por ejemplo, puedes a\u00f1adir etiquetas de entrada o la imagen destacada de la entrada en cualquier parte del contenido de la entrada o de la plantilla. Para hacerte una idea del n\u00famero de bloques tem\u00e1ticos a\u00f1adidos al n\u00facleo con WordPress 5.8, basta con escribir <strong>\/post <\/strong>en el marcador de posici\u00f3n del bloque:<\/p>\n<figure style=\"width: 662px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/post-related-blocks.png\" alt=\"Bloques tem\u00e1ticos sugeridos.\" width=\"662\" height=\"864\"><figcaption class=\"wp-caption-text\">Bloques tem\u00e1ticos sugeridos.<\/figcaption><\/figure>\n<p>Un bloque tem\u00e1tico \u00fatil disponible con WordPress 5.8 es el bloque <strong>Login\/out<\/strong>, que proporciona enlaces de inicio y cierre de sesi\u00f3n. Puedes mostrar opcionalmente el formulario de inicio de sesi\u00f3n en lugar de un enlace. Los administradores del sitio tambi\u00e9n pueden personalizar el objetivo de la redirecci\u00f3n (ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29766\">29766<\/a>).<\/p>\n<figure style=\"width: 1948px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/login-out-block.jpg\" alt=\"Bloque de entrada\/salida su configuraci\u00f3n en el editor de bloques.\" width=\"1948\" height=\"770\"><figcaption class=\"wp-caption-text\">Bloque de login\/out tu configuraci\u00f3n en el editor de bloques.<\/figcaption><\/figure>\n<p>Para ver m\u00e1s de cerca los bloques FSE, consulta el tema \u00abEnabling Full Site Editor blocks in classic themes\u00bb <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">en Github<\/a>.<\/p>\n<h3>El bloque Query Loop<\/h3>\n<p>\u00bfCu\u00e1ntas veces te has encontrado en una situaci\u00f3n en la que necesitas mostrar una lista personalizada de entradas del blog o <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-tipos-de-postes-personalizados\/\">tipos de entradas personalizadas<\/a>? Piensa en productos, eventos, inmuebles&#8230; Por supuesto, tienes toneladas de plugins entre los cuales elegir, pero la capacidad de crear consultas altamente personalizadas a menudo requiere habilidades de desarrollador para lidiar con el <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\">loop de WordPress<\/a>.<\/p>\n<p>Con la introducci\u00f3n del <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">bloque Query Loop<\/a> en el n\u00facleo de WordPress, los propietarios y administradores de sitios pueden crear listas de entradas y CPT sin tener que escribir c\u00f3digo complejo o <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">contratar a un desarrollador<\/a>, al menos en los casos de uso m\u00e1s comunes.<\/p>\n<p>Entonces, \u00bfqu\u00e9 hace el bloque Query Loop?<\/p>\n<p>En resumen, hace el mismo trabajo que el bucle de WordPress, pero en el contexto visual del editor de bloques.<\/p>\n<p>El bloque Query Loop realiza una consulta basada en la configuraci\u00f3n del usuario sobre la base de datos de WordPress, realiza un bucle a trav\u00e9s de cada entrada recuperada y muestra los datos en la p\u00e1gina.<\/p>\n<p>Despu\u00e9s de un <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">intenso desarrollo<\/a>, este bloque ha alcanzado su estructura actual y ahora <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32283\">consta de dos bloques anidados<\/a>: los bloques <strong>Query <\/strong>y <strong>Post Template<\/strong>.<\/p>\n<figure style=\"width: 2126px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/query-loop-list-view.jpg\" alt=\"Vista de lista de un bloque de bucle de consulta.\" width=\"2126\" height=\"1124\"><figcaption class=\"wp-caption-text\">Vista de lista de un bloque Query Loop.<\/figcaption><\/figure>\n<p>Al ser una funci\u00f3n avanzada, el bloque Query Loop requiere algunas configuraciones.<\/p>\n<p>En primer lugar, puedes elegir entre los diferentes <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-5\/#block-patterns\">patrones de bloques<\/a> que aparecen en la vista de carrusel y de cuadr\u00edcula. Una vez que hayas elegido t\u00fa patr\u00f3n, simplemente haz clic en <strong>Elegir<\/strong>, y el bloque de bucle de consulta generar\u00e1 tu lista personalizada de entradas.<\/p>\n<figure style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-grid-view.jpg\" alt=\"Consulta de patrones de bloque de bucle en la vista de cuadr\u00edcula.\" width=\"1262\" height=\"1374\"><figcaption class=\"wp-caption-text\">Consulta de patrones de bloque de bucle en la vista de cuadr\u00edcula.<\/figcaption><\/figure>\n<p>Si haces clic en <strong>Start blank<\/strong>, ver\u00e1s una lista de cuatro variaciones de bloques b\u00e1sicos: <strong>T\u00edtulo y fecha; T\u00edtulo y extracto; T\u00edtulo, fecha y extracto; <\/strong>e<strong> Imagen, fecha<\/strong> <strong>y t\u00edtulo <\/strong>(ver Patrones de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">oferta en la configuraci\u00f3n del bloque<\/a>).<\/p>\n<figure style=\"width: 1238px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-loop-variations-1.png\" alt=\"Variaciones del bloque del bucle de consulta.\" width=\"1238\" height=\"662\"><figcaption class=\"wp-caption-text\">Variaciones del bloque Query Loop.<\/figcaption><\/figure>\n<p>Una vez en su lugar, al seleccionar el bloque Qurey Loop se mostrar\u00e1 la barra lateral de configuraci\u00f3n del bloque, donde puedes construir tu consulta. Puedes heredar la consulta de la <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-una-url\/\">URL<\/a> o personalizar los argumentos de la consulta: el tipo de publicaciones que se incluir\u00e1n en la lista, el orden de visualizaci\u00f3n y si se trata de publicaciones fijas o no.<\/p>\n<p>Tambi\u00e9n puedes a\u00f1adir varios filtros, eligiendo entre categor\u00edas, autores y palabras clave.<\/p>\n<figure style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block.jpg\" alt=\"El bloque de bucle de consulta con la configuraci\u00f3n de la barra lateral.\" width=\"2876\" height=\"1380\"><figcaption class=\"wp-caption-text\">El bloque Query Loop con la configuraci\u00f3n de la barra lateral.<\/figcaption><\/figure>\n<p>Adem\u00e1s, un bot\u00f3n de <strong>configuraci\u00f3n de visualizaci\u00f3n <\/strong>en la barra de herramientas del bloque ofrece m\u00e1s ajustes para controlar el n\u00famero de elementos por p\u00e1gina, el desplazamiento y el n\u00famero m\u00e1ximo de p\u00e1ginas a mostrar.<\/p>\n<figure style=\"width: 1252px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-display-settings.jpg\" alt=\"Mostrar la configuraci\u00f3n del bloque de bucle de consulta.\" width=\"1252\" height=\"1152\"><figcaption class=\"wp-caption-text\">Mostrar la configuraci\u00f3n del bloque Query Loop.<\/figcaption><\/figure>\n<p>S\u00ed, el bloque Query Loop es una poderosa herramienta, que permite a los propietarios de sitios crear listas altamente personalizadas de entradas y tipos de entradas personalizadas.<\/p>\n<p>Pero si se recorren los par\u00e1metros de la clase <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/\">WP_Query<\/a>, est\u00e1 claro que el nivel de personalizaci\u00f3n posible utilizando el c\u00f3digo es mucho m\u00e1s granular que lo que es posible utilizando el bloque Query Loop.<\/p>\n<p>No obstante, es una herramienta valiosa y flexible que se presta a muchos casos de uso, y es muy probable que veamos nuevas mejoras en el futuro.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Los bloques Query Loop y Post Template han sido renombrados varias veces en las \u00faltimas semanas. La denominaci\u00f3n definitiva se ha alcanzado con <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">Gutenberg 10.9<\/a>.<\/p>\n<\/aside>\n\n<h3>Vista de lista persistente en el editor de publicaciones<\/h3>\n<p>Otra caracter\u00edstica de FSE extendida al Editor de Publicaciones es la <strong>Vista de Lista Persistente (Persistent List View)<\/strong>. Antes de WordPress 5.8 (y <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">Gutenberg 10.7<\/a>), la vista de lista se mostraba en un popover. Al mover el foco fuera del popover, la lista desaparec\u00eda.<\/p>\n<p>Por el contrario, el Editor de Sitios mostraba la Vista de Lista en una barra lateral que conten\u00eda todo el \u00e1rbol de bloques.<\/p>\n<p>Con WordPress 5.8, la vista de lista se muestra ahora en una barra lateral en el editor de entradas, lo que permite a los usuarios navegar por el \u00e1rbol de bloques de forma m\u00e1s r\u00e1pida y precisa.<\/p>\n<figure style=\"width: 698px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/persistent-list-view.png\" alt=\"La barra lateral de la vista de lista en WordPress 5.8.\" width=\"698\" height=\"1182\"><figcaption class=\"wp-caption-text\">La barra lateral de la vista de lista en WordPress 5.8.<\/figcaption><\/figure>\n<p>Al hacer clic en un elemento de la Vista de Lista se resalta el elemento de la lista y se mueve el foco al bloque correspondiente en el lienzo del Editor de Publicaciones. Adem\u00e1s, si pasas el rat\u00f3n por encima de los elementos de la vista de lista, tanto el elemento como el bloque correspondiente en el editor de publicaciones quedan resaltados.<\/p>\n<figure style=\"width: 2158px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-enhancement-1.jpg\" alt=\"Pasar el rat\u00f3n por encima de los elementos en la vista de lista.\" width=\"2158\" height=\"1184\"><figcaption class=\"wp-caption-text\">Pasar el rat\u00f3n por encima de los elementos en la vista de lista.<\/figcaption><\/figure>\n<p>Por \u00faltimo, al a\u00f1adir un ancla a un bloque tambi\u00e9n aparecer\u00e1 junto al elemento correspondiente en la vista de lista.<\/p>\n<figure style=\"width: 2496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-anchor-2.jpg\" alt=\"A\u00f1adir un ancla a los bloques en WordPress 5.8.\" width=\"2496\" height=\"1156\"><figcaption class=\"wp-caption-text\">A\u00f1adir un ancla a los bloques en WordPress 5.8.<\/figcaption><\/figure>\n<p>Con todas estas mejoras en la vista de lista, navegar por documentos complejos deber\u00eda ser mucho m\u00e1s f\u00e1cil.<\/p>\n<h2>Editor de widgets en bloque y widgets en bloque en el personalizador<\/h2>\n<p>El <strong>editor de widgets basado en bloques <\/strong>es un <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/projects\/27\">amplio proyecto<\/a> que pretende llevar la interfaz del <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">editor de bloques a los widgets de tem\u00e1tica cl\u00e1sica<\/a>.<\/p>\n<p>El nuevo editor de widgets ofrece muchas ventajas a la gran mayor\u00eda que todav\u00eda utiliza temas cl\u00e1sicos. Al mismo tiempo, les permite familiarizarse con la interfaz de bloques antes de que se convierta en un est\u00e1ndar para todos los <a href=\"https:\/\/kinsta.com\/es\/blog\/roles-de-usuario\/\">usuarios de WordPress<\/a>.<\/p>\n<figure style=\"width: 2150px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-widgets.jpg\" alt=\"Bloque de widgets modal.\" width=\"2150\" height=\"1254\"><figcaption class=\"wp-caption-text\">Bloque de widgets modal.<\/figcaption><\/figure>\n<p>Como <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">se\u00f1ala Anne McCarty<\/a>, los widgets basados en bloques ofrecen varias ventajas, entre ellas<\/p>\n<ul>\n<li>Ahora puedes crear <strong>dise\u00f1os en barras laterales<\/strong>, cabeceras y pies de p\u00e1gina utilizando columnas, separadores, espaciadores y otros bloques de dise\u00f1o.<\/li>\n<li>Los widgets ahora admiten la <strong>edici\u00f3n de texto enriquecido <\/strong>por defecto, sin necesidad de que los usuarios a\u00f1adan c\u00f3digo personalizado o incorporen un editor HTML de terceros con un plugin.<\/li>\n<li>Muchos widgets basados en c\u00f3digos cortos est\u00e1n ahora <strong>disponibles como bloques<\/strong>, lo que agiliza la experiencia de edici\u00f3n.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">Andrei Draganescu<\/a> tambi\u00e9n subraya las ventajas que podemos obtener al poder editar los widgets desde una interfaz basada en bloques:<\/p>\n<blockquote><p>El principal beneficio de la actualizaci\u00f3n de la funcionalidad de los widgets a los bloques viene de la capacidad de editar directamente los widgets utilizando la interacci\u00f3n familiar de los bloques que utilizas cuando editas una p\u00e1gina o un post en tu sitio. La posibilidad de utilizar bloques abre un mont\u00f3n de nuevas posibilidades creativas, desde mini dise\u00f1os sin c\u00f3digo hasta el aprovechamiento de la amplia biblioteca de bloques principales y de terceros para crear contenido.<\/p><\/blockquote>\n<p>No tienes que preocuparte de que tus widgets dejen de funcionar con WordPress 5.8 porque <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">la comunidad ha trabajado duro<\/a> para <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/07\/whats-next-in-gutenberg-may-2021\/\">garantizar la compatibilidad con versiones anteriores<\/a>, de modo que \u00ablos widgets existentes y los de terceros seguir\u00e1n funcionando y podr\u00e1n utilizarse junto con los bloques\u00bb (ver <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">Editor de widgets basado en bloques en WordPress 5.8<\/a>).<\/p>\n<p>Pero, de nuevo, para evitar cualquier problema de compatibilidad en su instalaci\u00f3n de WordPress existente, no olvides probar la nueva versi\u00f3n en un <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/entorno-staging\/\">entorno staging<\/a> antes de actualizar tu sitio en vivo.<\/p>\n<p>Para aquellos que opten por no utilizar el editor de widgets basado en bloques en este momento, todav\u00eda es posible restaurar la pantalla cl\u00e1sica de <a href=\"https:\/\/kinsta.com\/es\/blog\/widgets-wordpress\/\">widgets<\/a> de tres maneras diferentes:<\/p>\n<ol>\n<li>Puedes instalar el <a href=\"https:\/\/wordpress.org\/plugins\/classic-widgets\/\">plugin oficial Classic Widgets<\/a>, que restaura la interfaz anterior de la pantalla de widgets. El plugin \u00abrecibir\u00e1 soporte y mantenimiento hasta al menos 2022, o el tiempo que sea necesario\u00bb.<\/li>\n<li>Los desarrolladores de temas pueden desactivar el editor de widgets basado en bloques eliminando el soporte del tema como es habitual:\n<pre><code class=\"language-php\">remove_theme_support( 'widgets-block-editor' );<\/code><\/pre>\n<\/li>\n<li>Tambi\u00e9n se puede utilizar un nuevo filtro <code>use_widgets_block_editor<\/code>\n<pre><code class=\"language-php\">add_filter( 'use_widgets_block_editor', '__return_false' );<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>V\u00e9ase tambi\u00e9n <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/opting-out\/\">Restaurar el editor de widgets cl\u00e1sico<\/a> en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/overview\/\">Visi\u00f3n general del editor de bloques de widgets<\/a>.<\/p>\n<h3>Bloquear los widgets en el personalizador<\/h3>\n<p>Como parte del mismo proyecto, WordPress 5.8 tambi\u00e9n incorpora <strong>widgets de bloque al personalizador<\/strong>.<\/p>\n<figure style=\"width: 598px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-block-widgets.jpg\" alt=\"Bloquear los widgets en el personalizador.\" width=\"598\" height=\"1398\"><figcaption class=\"wp-caption-text\">Bloquear los widgets en el personalizador.<\/figcaption><\/figure>\n<p>A\u00f1adir un widget basado en bloques en el personalizador es bastante sencillo. Puedes iniciar el <strong>insertador de widgets personalizados <\/strong>haciendo clic en el icono del signo m\u00e1s en la esquina superior derecha del panel de widgets.<\/p>\n<figure style=\"width: 1706px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-inserter.jpg\" alt=\"El insertador de widgets personalizados.\" width=\"1706\" height=\"1298\"><figcaption class=\"wp-caption-text\">El insertador de widgets personalizados.<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes lanzar el <strong>insertador r\u00e1pido <\/strong>desde la parte inferior del panel de widgets, como se muestra en la siguiente imagen.<\/p>\n<figure style=\"width: 1212px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-quick-inserter.jpg\" alt=\"El insertador r\u00e1pido de widgets personalizados.\" width=\"1212\" height=\"886\"><figcaption class=\"wp-caption-text\">El insertador r\u00e1pido de widgets personalizados.<\/figcaption><\/figure>\n<p>En el momento de escribir este art\u00edculo, la nueva interfaz de edici\u00f3n de widgets todav\u00eda requiere <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Widgets%20Customizer\">mejoras y correcciones de errores<\/a>, pero las posibilidades de personalizaci\u00f3n son pr\u00e1cticamente ilimitadas.<\/p>\n<p>B\u00e1sicamente, a partir de WordPress 5.8, tendr\u00e1s el poder del <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor de bloques<\/a> en el personalizador, y podr\u00e1s construir barras laterales altamente personalizadas sin problemas.<\/p>\n<figure style=\"width: 924px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/show-more-settings.jpg\" alt=\"Mostrar m\u00e1s ajustes.\" width=\"924\" height=\"1066\"><figcaption class=\"wp-caption-text\">Mostrar m\u00e1s ajustes.<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">nota de desarrollo del editor de widgets basados en bloques<\/a> ofrece una visi\u00f3n m\u00e1s detallada del editor de widgets basados en bloques, con ejemplos y recursos para los desarrolladores.<\/p>\n<h2>Caracter\u00edsticas y mejoras del editor de bloques<\/h2>\n<p>Adem\u00e1s de la primera implementaci\u00f3n de FSE, WordPress 5.8 tambi\u00e9n trae nuevas caracter\u00edsticas y mejoras en varios elementos del editor de bloques, que mejoran significativamente la experiencia general de edici\u00f3n.<\/p>\n<p>Estos cambios incluyen:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"9\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Mejoras en los bloques de medios y texto<\/h3>\n<p>Transformar un bloque en un bloque de <strong>columnas<\/strong> es posible desde hace tiempo. Sin embargo, todos los bloques transformados en bloques de columnas tienen una sola columna. Esto podr\u00eda llevar a resultados sub\u00f3ptimos para el bloque de <strong>medios y texto<\/strong>, para el cual una sola columna no suele ser adecuada.<\/p>\n<figure style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-transforms.jpg\" alt=\"Transformaciones y estilos de bloques de texto y multimedia.\" width=\"2314\" height=\"1110\"><figcaption class=\"wp-caption-text\">Transformaciones y estilos de bloques de medios y texto.<\/figcaption><\/figure>\n<p>A partir de WordPress 5.8 (y <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">Gutenberg 10.2<\/a>), la transformaci\u00f3n del bloque de <strong>medios y texto <\/strong>en un bloque de<strong> columnas <\/strong>a\u00f1ade autom\u00e1ticamente dos columnas: una para la imagen y otra para el texto.<\/p>\n<figure style=\"width: 2018px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-to-two-columns.jpg\" alt=\"Dos columnas transformadas para los medios de comunicaci\u00f3n y el texto.\" width=\"2018\" height=\"652\"><figcaption class=\"wp-caption-text\">Dos columnas transformadas para los medios de comunicaci\u00f3n y el texto.<\/figcaption><\/figure>\n<h3>Mejoras en los bloques reutilizables<\/h3>\n<p>Los bloques reutilizables permiten al usuario guardar un bloque o un grupo de bloques para reutilizarlos posteriormente en cualquier post o p\u00e1gina de un sitio web. Esto es \u00fatil sobre todo para los usuarios que incluyen repetidamente el mismo bloque o grupo de bloques en diferentes posts\/p\u00e1ginas.<\/p>\n<figure style=\"width: 1290px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-modal.jpg\" alt=\"Un modal para el flujo de creaci\u00f3n de bloques reutilizables.\" width=\"1290\" height=\"964\"><figcaption class=\"wp-caption-text\">Un modal para el flujo de creaci\u00f3n de bloques reutilizables.<\/figcaption><\/figure>\n<p>Con WordPress 5.8, los bloques reutilizables son visualmente m\u00e1s claros, lo que facilita su gesti\u00f3n a los usuarios de WordPress.<\/p>\n<figure style=\"width: 2084px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block.jpg\" alt=\"Un bloque reutilizable en WordPress 5.8.\" width=\"2084\" height=\"724\"><figcaption class=\"wp-caption-text\">Un bloque reutilizable en WordPress 5.8.<\/figcaption><\/figure>\n<p>He aqu\u00ed una lista r\u00e1pida de las mejoras de los bloques reutilizables que los usuarios encontrar\u00e1n tras actualizar tus sitios web a WordPress 5.8:<\/p>\n<ul>\n<li>Al crear un bloque reutilizable, ahora un modal permite a los usuarios asignar un nombre al bloque.<\/li>\n<li>El nombre del bloque reutilizable se muestra ahora en la barra de herramientas del bloque, en la lista de navegaci\u00f3n y en las migas de pan.<\/li>\n<li>Cuando se selecciona un bloque hijo, los bloques reutilizables aparecen ahora perfilados. Esto supone una importante mejora en la usabilidad, ya que permite identificar f\u00e1cilmente el bloque padre y su contenido.<\/li>\n<li>Ahora es posible modificar el nombre del bloque en el inspector de la barra lateral.<\/li>\n<\/ul>\n<figure style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-outlines.jpg\" alt=\"Contornos de bloques reutilizables.\" width=\"1262\" height=\"658\"><figcaption class=\"wp-caption-text\">Contornos de bloques reutilizables.<\/figcaption><\/figure>\n<h3>Barra de herramientas del bloque de im\u00e1genes normalizadas<\/h3>\n<p>Varias barras de herramientas de los bloques se han reorganizado para proporcionar una <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">interfaz de usuario coherente entre los bloques<\/a> y mejorar la experiencia del usuario. Ahora, los controles de la barra de herramientas se agrupan siguiendo el orden sem\u00e1ntico \u00abmeta, nivel de bloque, en l\u00ednea\u00bb.<\/p>\n<figure style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/heading-block-toolbar.png\" alt=\"Barra de herramientas del bloque de r\u00fabricas.\" width=\"950\" height=\"294\"><figcaption class=\"wp-caption-text\">Barra de herramientas del bloque de r\u00fabricas.<\/figcaption><\/figure>\n<p>Desde Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">10.1<\/a> y <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">Gutenberg 10.3<\/a>, se ha normalizado todo un conjunto de barras de herramientas en bloque. Estas incluyen una <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29205\">imagen<\/a>, un bot\u00f3n, botones, una lista, un encabezado, un p\u00e1rrafo, una cita, un audio, un archivo, un medio y un texto, un v\u00eddeo y muchos m\u00e1s.<\/p>\n<p>Seg\u00fan <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/25983\">Matias Ventura<\/a>:<\/p>\n<blockquote><p>Las agrupaciones sem\u00e1nticas que tenemos en la barra de herramientas &#8211; meta, nivel de bloque, inline &#8211; deber\u00edan tener tambi\u00e9n una representaci\u00f3n visual con los bordes. Ahora mismo, los controles de nivel de bloque separados tienen representaciones diferentes, incluyendo casos como el de Navegaci\u00f3n, en el que cada uno de ellos tiene bordes.<\/p><\/blockquote>\n<figure style=\"width: 953px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar.png\" alt=\"Barra de herramientas del bloque de im\u00e1genes normalizadas.\" width=\"953\" height=\"280\"><figcaption class=\"wp-caption-text\">Barra de herramientas del bloque de im\u00e1genes normalizadas.<\/figcaption><\/figure>\n<p>As\u00ed, desde WordPress 5.8, la barra de herramientas de bloques agrupa <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/designers\/block-design\/#group-block-toolbar-controls-with-related-items\">los controles en segmentos<\/a> rodeados de bordes. Adem\u00e1s:<\/p>\n<ul>\n<li>El segmento <strong>Meta <\/strong>contiene controles de tipo bloque, como el conmutador de bloques, el tirador de arrastre y el control de desplazamiento.<\/li>\n<li>El segmento <strong>de nivel de bloque <\/strong>contiene herramientas espec\u00edficas de bloque que afectan a todo el contenido, como la alineaci\u00f3n en un bloque de p\u00e1rrafo o la vinculaci\u00f3n en un bloque de imagen.<\/li>\n<li>El <strong>nivel Inline\/Otro <\/strong>segmento contiene herramientas de transformaci\u00f3n inline, como el formato inline en un bloque de texto.<\/li>\n<li>El men\u00fa <strong>M\u00e1s <\/strong>incluye herramientas adicionales.<\/li>\n<\/ul>\n<p>La imagen de abajo compara la barra de herramientas del bloque de im\u00e1genes en WordPress 5.7 y 5.8:<\/p>\n<figure style=\"width: 902px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar-before-after.png\" alt=\"Barra de herramientas del bloque de im\u00e1genes en WordPress 5.7 vs WordPress 5.8.\" width=\"902\" height=\"466\"><figcaption class=\"wp-caption-text\">Barra de herramientas del bloque de im\u00e1genes en WordPress 5.7 vs WordPress 5.8.<\/figcaption><\/figure>\n<h3>Mejoras en la barra de herramientas<\/h3>\n<p>Con el modo de barra de herramientas superior activado en versiones anteriores de WordPress, la barra de herramientas superior y la barra de herramientas de bloque se mostraban una al lado de la otra, como se muestra en la siguiente imagen:<\/p>\n<figure style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-57-top-toolbar.jpg\" alt=\"La barra de herramientas superior en pantallas anchas en WordPress 5.7.\" width=\"2880\" height=\"1332\"><figcaption class=\"wp-caption-text\">La barra de herramientas superior en pantallas anchas en WordPress 5.7.<\/figcaption><\/figure>\n<p>Con WordPress 5.8, la activaci\u00f3n de la vista de la barra de herramientas superior fijar\u00e1 la barra de herramientas en bloque en la parte superior del editor, justo debajo de la barra de herramientas superior. Esto ocurre independientemente del ancho del navegador y deber\u00eda mejorar significativamente la experiencia del usuario.<\/p>\n<figure style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-58-top-toolbar.jpg\" alt=\"La barra de herramientas superior en pantallas anchas en WordPress 5.8.\" width=\"2880\" height=\"1324\"><figcaption class=\"wp-caption-text\">La barra de herramientas superior en pantallas anchas en WordPress 5.8.<\/figcaption><\/figure>\n<p>Esta mejora tambi\u00e9n aporta cambios para los desarrolladores, ya que unifica las APIs de las barras de herramientas bajo el componente\u00a0 <code>&lt;BlockTools \/&gt;<\/code>\u00a0(ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31134\">31134<\/a>).<\/p>\n<h3>PDFs incrustados<\/h3>\n<p>Cuando se a\u00f1ade un archivo PDF al documento a trav\u00e9s del bloque de archivos, una nueva barra lateral permite activar\/desactivar una <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">versi\u00f3n PDF incrustada<\/a> (ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30857\">30857<\/a>).<\/p>\n<figure style=\"width: 2080px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/embedded-pdf.jpg\" alt=\"Un PDF incrustado en WordPress 5.8.\" width=\"2080\" height=\"1054\"><figcaption class=\"wp-caption-text\">Un PDF incrustado en WordPress 5.8.<\/figcaption><\/figure>\n<p>Puedes arrastrar el archivo directamente al lienzo del editor o simplemente seleccionarlo de la biblioteca. Tambi\u00e9n es posible ajustar manualmente la altura del visor de PDF o mediante el control de la barra lateral.<\/p>\n<p>Todos los principales navegadores web son compatibles con el visor de PDF, <a href=\"https:\/\/caniuse.com\/pdf-viewer\">excepto los navegadores m\u00f3viles<\/a>.<\/p>\n<h3>Soporte de bloques Duotone<\/h3>\n<p>Una de las caracter\u00edsticas m\u00e1s interesantes fusionadas en el Core con WordPress 5.8 es el filtro duotono, introducido por primera vez con <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">Gutenberg 10.6<\/a>.<\/p>\n<figure style=\"width: 1256px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image.jpg\" alt=\"La nueva herramienta de dise\u00f1o duotono en un bloque de im\u00e1genes.\" width=\"1256\" height=\"1186\"><figcaption class=\"wp-caption-text\">La nueva herramienta de dise\u00f1o duotono en un bloque de im\u00e1genes.<\/figcaption><\/figure>\n<p>Disponible como una <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26752\">funci\u00f3n de \u00absoporte de bloques\u00bb<\/a>, el filtro duotono est\u00e1 activado por defecto en los bloques de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26751\">imagen<\/a> principal y de portada. En el bloque de portada, sin embargo, no funciona con <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/31662\">fondos fijos<\/a>.<\/p>\n<figure style=\"width: 1268px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-picker.jpg\" alt=\"El nuevo selector de duotono en WordPress 5.8.\" width=\"1268\" height=\"998\"><figcaption class=\"wp-caption-text\">El nuevo selector de duotono en WordPress 5.8.<\/figcaption><\/figure>\n<p>Las barras de herramientas de la imagen y del bloque de portada muestran ahora un control de <strong>Aplicar filtro de duotono <\/strong>que muestra un selector de duotono con muchos preajustes para elegir.<\/p>\n<p>Dos subcontroles permiten personalizar las sombras y las iluminaciones por separado. El efecto se aplica con un <a href=\"https:\/\/www.w3.org\/TR\/SVG11\/filters.html\">filtro SVG<\/a> oculto con estilos en l\u00ednea y se aplica utilizando un nombre de clase espec\u00edfico.<\/p>\n<figure style=\"width: 2142px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-source-code.jpg\" alt=\"Inspecci\u00f3n del filtro SVG duotono en Chrome DevTools.\" width=\"2142\" height=\"1038\"><figcaption class=\"wp-caption-text\">Inspecci\u00f3n del filtro SVG duotono en Chrome DevTools.<\/figcaption><\/figure>\n<p>La nueva herramienta viene acompa\u00f1ada de una nueva propiedad\u00a0 <code>color.__experimentalDuotone<\/code> que permite a los desarrolladores a\u00f1adir el filtro duotono a los bloques o a partes de los mismos en su archivo <strong>block.json <\/strong>(m\u00e1s informaci\u00f3n sobre esto en la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color\">referencia del objeto color<\/a>):<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\t__experimentalDuotone: '&gt; .duotone-img, &gt; .duotone-video',\n\t\tbackground: false,\n\t\ttext: false\n\t}\n}<\/code><\/pre>\n<p>Cuando un bloque declara la compatibilidad con <code>color.__experimentalDuotone<\/code>, se puede utilizar un atributo de <code>style<\/code> para establecer <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color-__experimentalduotone\">colores personalizados por defecto<\/a>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tduotone: [\n\t\t\t\t\t'#FFF',\n\t\t\t\t\t'#000\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>A continuaci\u00f3n puedes ver la misma imagen con dos efectos duotono diferentes aplicados:<\/p>\n<figure style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-blue.jpg\" alt=\"Filtro de color duotono aplicado sobre una imagen.\" width=\"1250\" height=\"850\"><figcaption class=\"wp-caption-text\">Filtro de color duotono aplicado sobre una imagen.<\/figcaption><\/figure>\n<figure style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-yellow.jpg\" alt=\"Un filtro de color duotono diferente aplicado sobre una imagen.\" width=\"1250\" height=\"850\"><figcaption class=\"wp-caption-text\">Un filtro de color duotono diferente aplicado sobre una imagen.<\/figcaption><\/figure>\n<p>Los desarrolladores pueden definir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">los preajustes<\/a> de duotono en el archivo <strong>theme.json <\/strong>(v\u00e9ase <a href=\"#block-settings-and-styles-with-themejso\">la siguiente secci\u00f3n<\/a>), como se muestra en el siguiente fragmento:<\/p>\n<pre><code class=\"language-javascript\">{\n\"version\": 1,\n\"settings\": {\n\t\"color\": {\n\t\t\"duotone\": [\n\t\t\t{\n\t\t\t\t\"colors\": [ \"#000\", \"#7f7f7f\" ],\n\t\t\t\t\"slug\": \"black-and-white\",\n\t\t\t\t\"name\": \"dark-grayscale\"\n\t\t\t}\n\t\t],\n\t...<\/code><\/pre>\n<p>Puedes leer m\u00e1s sobre los filtros de duotono en <a href=\"https:\/\/wordpress.org\/news\/2021\/05\/coloring-your-images-with-duotone-filters\/\">Colorear tus im\u00e1genes con filtros de duotono<\/a>.<\/p>\n<h3>Colores y bordes del bloque de tabla<\/h3>\n<p>WordPress 5.8 tambi\u00e9n aporta un par de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">mejoras al bloque Tabla<\/a>, incluyendo un mejor control de los <a href=\"https:\/\/kinsta.com\/es\/blog\/combinaciones-colores-sitios-web\/\">colores de fondo y primer plano<\/a> de la tabla.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/table-block-color-settings.jpg\" alt=\"Mejora de la configuraci\u00f3n del color del bloque de la tabla.\" width=\"1618\" height=\"1144\"><figcaption class=\"wp-caption-text\">Mejora de la configuraci\u00f3n del color del bloque de la tabla.<\/figcaption><\/figure>\n<p>Otra adici\u00f3n al bloque de la tabla es el <strong>soporte del bloque del borde<\/strong>, que ofrece a los usuarios la posibilidad de controlar el color, el estilo y la anchura del borde.<\/p>\n<p>Si el tema activo es compatible con la nueva funci\u00f3n, un nuevo panel de <strong>configuraci\u00f3n de bordes <\/strong>ofrece tres nuevos controles para las personalizaciones del usuario..<\/p>\n<figure style=\"width: 1984px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/border-block-support.jpg\" alt=\"Controles de bloques de borde en WordPress 5.8 y bloques TT1.\" width=\"1984\" height=\"1224\"><figcaption class=\"wp-caption-text\">Controles de bloques de borde en WordPress 5.8 y bloques TT1.<\/figcaption><\/figure>\n<p>Los desarrolladores pueden a\u00f1adir <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31265\">soporte de bloques de borde<\/a> a sus temas a\u00f1adiendo el siguiente c\u00f3digo al archivo <strong>theme.json<\/strong>:<\/p>\n<pre><code class=\"language-javascript\">\"border\": {\n\t\"customColor\": true,\n\t\"customStyle\": true,\n\t\"customWidth\": true\n}<\/code><\/pre>\n<h3>Mejoras en el insertador de bloques<\/h3>\n<p>En WordPress 5.8, el insertador de bloques ha sido mejorado con <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">varias adiciones<\/a> (PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26938\">26938<\/a> y #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21080#issuecomment-649231549\">21080<\/a>):<\/p>\n<figure style=\"width: 1354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-inserter-keyboard-navigation.jpg\" alt=\"Pulsando la flecha hacia arriba y hacia abajo se mueve el foco de la fila.\" width=\"1354\" height=\"840\"><figcaption class=\"wp-caption-text\">Pulsando la flecha hacia arriba y hacia abajo se mueve el foco de la fila.<\/figcaption><\/figure>\n<p><strong>1. <\/strong><strong style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Navegaci\u00f3n bidimensional con el teclado en el insertador de bloques<\/strong>. Ahora podemos navegar entre bloques de forma m\u00e1s precisa e intuitiva.<\/p>\n<ul>\n<li>Al pulsar la flecha hacia arriba (\u2191) y la flecha hacia abajo (\u2193) se desplaza el foco a la fila superior o inferior.<\/li>\n<li>Pulsar <strong>Tab <\/strong>o <strong>Shift + Tab <\/strong>permite mover el foco entre el cuadro de b\u00fasqueda, la lista de pesta\u00f1as y el primer elemento de cada categor\u00eda<\/li>\n<\/ul>\n<p><strong>2. <\/strong><strong>Una nueva categor\u00eda \u00abTema\u00bb para las partes y variaciones de la plantilla <\/strong>aparece ahora en el insertador en la Edici\u00f3n Completa del Sitio (ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30020\">30020<\/a>).<\/p>\n<p><strong>3. <\/strong>Ahora se permiten <strong>m\u00faltiples palabras en el comparador de frases autocompletado <\/strong>(ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29939\">29939<\/a>).<\/p>\n<h3>Mejoras adicionales en el editor de bloques<\/h3>\n<p>WordPress 5.8 trae un mont\u00f3n de peque\u00f1os y medianos cambios adicionales que merecen unas l\u00edneas aqu\u00ed. Entre estas mejoras, mencionamos las siguientes:<\/p>\n<h4><strong>Soporte para arrastrar y soltar en los bloques de portada<\/strong><\/h4>\n<p>Ahora puedes arrastrar y soltar im\u00e1genes desde tu escritorio para reemplazar el fondo de un bloque de portada (ver Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a> y PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29813\">29813<\/a>).<\/p>\n<figure style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/drag-and-drop-cover-background-image.gif\" alt=\"Arrastrar y soltar im\u00e1genes de fondo en el bloque de portada.\" width=\"558\" height=\"338\"><figcaption class=\"wp-caption-text\">Arrastrar y soltar im\u00e1genes de fondo en el bloque de portada.<\/figcaption><\/figure>\n<h4>Interfaz de publicaci\u00f3n mejorada<\/h4>\n<p>Desde WordPress 5.8, la UI de publicaci\u00f3n muestra el icono del sitio y el t\u00edtulo para que quede m\u00e1s claro d\u00f3nde vas a publicar tus entradas o p\u00e1ginas (<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">Gutenberg 10.4<\/a>).<\/p>\n<figure style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-57.png\" alt=\"La interfaz de publicaci\u00f3n en WordPress 5.7.\" width=\"562\" height=\"730\"><figcaption class=\"wp-caption-text\">La interfaz de publicaci\u00f3n en WordPress 5.7.<\/figcaption><\/figure>\n<figure style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-58.png\" alt=\"La interfaz de publicaci\u00f3n en WordPress 5.8.\" width=\"562\" height=\"730\"><figcaption class=\"wp-caption-text\">La interfaz de publicaci\u00f3n en WordPress 5.8.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30231\">Esta mejora<\/a> es beneficiosa si se trabaja en modo de pantalla completa o en dispositivos m\u00f3viles.<\/p>\n<h2>Configuraci\u00f3n de bloques y estilos con theme.json<\/h2>\n<p>Con WordPress 5.8, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">el archivo <strong>theme.json <\/strong><\/a>se convierte en \u00abun punto central de configuraci\u00f3n\u00bb, proporcionando una nueva forma para que los desarrolladores de temas personalicen la configuraci\u00f3n y los estilos del editor.<\/p>\n<p>Utilizando un archivo <strong>theme.json<\/strong>, los temas pueden establecer preajustes personalizados y\/o a\u00f1adir soporte para nuevas caracter\u00edsticas, como el duotono y los bordes de las tablas (ver <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Ajustes globales y estilos).<\/a><\/p>\n<p>Seg\u00fan <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">Andr\u00e9 Maneiro<\/a>:<\/p>\n<blockquote><p>Este nuevo mecanismo pretende asumir y consolidar todas las diversas llamadas a <code>add_theme_support<\/code> que antes eran necesarias para controlar el editor.<\/p><\/blockquote>\n<p>Por ejemplo, puede establecer globalmente un preajuste de duotono personalizado con el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [ \"#000\", \"#0FF\" ],\n\t\t\t\t\t\"slug\": \"black-cyan\",\n\t\t\t\t\t\"name\": \"Black Cyan\"\n\t\t\t\t}\n\t\t\t],<\/code><\/pre>\n<p>Esto sobrescribir\u00eda los preajustes por defecto, y solo ver\u00e1s una opci\u00f3n de duotono:<\/p>\n<figure style=\"width: 1264px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/custom-duotone-preset.jpg\" alt=\"Preajuste de duotono personalizado en theme.json.\" width=\"1264\" height=\"802\"><figcaption class=\"wp-caption-text\">Preajuste de duotono personalizado en theme.json.<\/figcaption><\/figure>\n<p>El nuevo mecanismo proporciona una forma de controlar los ajustes, ya sea globalmente o por bloques. Por ejemplo, puedes a\u00f1adir un tama\u00f1o de fuente personalizado de 12px de forma global a\u00f1adiendo el siguiente preajuste a tu archivo <strong>theme.json<\/strong>:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"customLineHeight\": true,\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t},\n\t\t\t\t{...}<\/code><\/pre>\n<p>El resultado es un nuevo tama\u00f1o de fuente disponible para que los usuarios lo utilicen con <em>cualquier <\/em>texto de su contenido.<\/p>\n<figure style=\"width: 560px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/extra-extra-small-font-size-settings.png\" alt=\"Un tama\u00f1o de fuente personalizado definido globalmente en theme.json.\" width=\"560\" height=\"754\"><figcaption class=\"wp-caption-text\">Un tama\u00f1o de fuente personalizado definido globalmente en theme.json.<\/figcaption><\/figure>\n<p>Si solo quieres personalizar el bloque de p\u00e1rrafos, tu c\u00f3digo ser\u00e1 ligeramente diferente:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/paragraph\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSizes\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-small\",\n\t\t\t\t\t\t\t\"size\": \"16px\",\n\t\t\t\t\t\t\t\"name\": \"Extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"small\",\n\t\t\t\t\t\t\t\"size\": \"18px\",\n\t\t\t\t\t\t\t\"name\": \"Small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"normal\",\n\t\t\t\t\t\t\t\"size\": \"20px\",\n\t\t\t\t\t\t\t\"name\": \"Normal\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"large\",\n\t\t\t\t\t\t\t\"size\": \"24px\",\n\t\t\t\t\t\t\t\"name\": \"Large\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Ya est\u00e1. Acabas de crear tus preajustes de tama\u00f1o de fuente personalizados en el bloque de p\u00e1rrafo.<\/p>\n<figure style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/paragraph-block-custom-settings.png\" alt=\"Un bloque de p\u00e1rrafos con preajustes de tama\u00f1o de letra personalizados.\" width=\"558\" height=\"1216\"><figcaption class=\"wp-caption-text\">Un bloque de p\u00e1rrafos con preajustes de tama\u00f1o de letra personalizados.<\/figcaption><\/figure>\n<p>Los bloques del n\u00facleo se han actualizado para seguir el nuevo mecanismo, mientras que los bloques de terceros pueden adaptarse al nuevo mecanismo utilizando el gancho React <code>useSetting<\/code> (lee m\u00e1s sobre esta funci\u00f3n en la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">nota de desarrollo<\/a> y la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-editor\/#useSetting\">documentaci\u00f3n de la API<\/a>):<\/p>\n<pre><code class=\"language-javascript\">const isEnabled = useSetting( 'spacing.margin' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Los ajustes declarados en <strong>theme.json <\/strong>tendr\u00e1n prioridad sobre los ajustes declarados mediante <code>add_theme_support<\/code>.<\/p>\n<\/aside>\n\n<p>El nuevo mecanismo basado en el archivo <strong>theme.json <\/strong>no se aplica solo a la configuraci\u00f3n de los bloques. De hecho, a partir de WordPress 5.8, ya no ser\u00e1 necesario crear estilos de editor y ponerlos en cola. Bastar\u00e1 con declarar los preajustes dentro del archivo <strong>theme.json<\/strong>; el motor generar\u00e1 las clases y las pondr\u00e1 en cola autom\u00e1ticamente tanto en el editor como en el frontend.<\/p>\n<p>El motor tambi\u00e9n generar\u00e1 las correspondientes <a href=\"https:\/\/kinsta.com\/es\/blog\/twenty-twenty-one-tema\/#styles-and-css-custom-properties\">propiedades personalizadas CSS<\/a>.<\/p>\n<p>En el ejemplo anterior, establecimos cinco preajustes <code>fontSizes<\/code> para el bloque de p\u00e1rrafo. Para esos preajustes, se generar\u00e1n las siguientes propiedades personalizadas de CSS:<\/p>\n<pre><code class=\"language-css\">p {\n\t--wp--preset--font-size--extra-extra-small: 12px;\n\t--wp--preset--font-size--extra-small: 16px;\n\t--wp--preset--font-size--small: 18px;\n\t--wp--preset--font-size--normal: 20px;\n\t--wp--preset--font-size--large: 24px;\n}<\/code><\/pre>\n<p>Una vez que hayas establecido el tama\u00f1o de la fuente del p\u00e1rrafo en tu archivo <strong>theme.json<\/strong>, el elemento <code>p<\/code> correspondiente toma la clase <code>has-{preset-slug}-{preset-category}<\/code>.<\/p>\n<p>Esto significa que un p\u00e1rrafo con un tama\u00f1o de fuente <code>extra-extra-small<\/code> recibir\u00e1 la clase <code>has-extra-extra-small-font-size<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"has-extra-extra-small-font-size\"&gt;Lorem ipsum dolor...&lt;\/p&gt;<\/code><\/pre>\n<p>Y aqu\u00ed est\u00e1 el bloque de declaraci\u00f3n CSS:<\/p>\n<pre><code class=\"language-css\">p.has-extra-extra-small-font-size {\n\tfont-size: var(--wp--preset--font-size--extra-extra-small) !important;\n}<\/code><\/pre>\n<p>Para ver m\u00e1s de cerca la configuraci\u00f3n y los estilos con <strong>theme.json<\/strong>, aseg\u00farate de consultar la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">nota de desarrollo<\/a> y la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">documentaci\u00f3n de la API<\/a>.<\/p>\n<p>Adem\u00e1s, consulta la <a href=\"https:\/\/make.wordpress.org\/test\/2021\/06\/24\/call-for-testing-thrive-with-theme-json\/\">convocatoria de pruebas de FSE<\/a> de Anne McCarty para obtener m\u00e1s lecturas \u00fatiles y un emocionante reto para los desarrolladores que quieran explorar las nuevas caracter\u00edsticas de <strong>theme.json<\/strong>.<\/p>\n<h2>Mejoras en la API de bloques<\/h2>\n<p>Las <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">mejoras de la API de bloques<\/a> que llegan con WordPress 5.8 merecen una atenci\u00f3n especial por parte de los desarrolladores de plugins.<\/p>\n<p>Ahora se fomenta el uso del archivo <strong>block.json <\/strong>como la forma can\u00f3nica de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\">registrar los tipos de bloque<\/a> y proporciona varias ventajas:<\/p>\n<ul>\n<li>En cuanto al rendimiento, si el tema admite <a href=\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\">el lazy load de activos<\/a>, el registro de los tipos de bloque a trav\u00e9s del archivo <strong>block.json <\/strong>optimizar\u00e1 autom\u00e1ticamente la puesta en cola de los recursos. Esto se debe a que los recursos especificados por las propiedades de <code>style<\/code> y <code>script<\/code> se pondr\u00e1n en cola en el frontend s\u00f3lo cuando se detecte el bloque. Esto permite el desarrollo de plugins m\u00e1s eficientes, reduciendo el tama\u00f1o de la p\u00e1gina y previniendo varios de los problemas cubiertos en <a href=\"https:\/\/kinsta.com\/es\/blog\/deshabilitar-wordpress-plugins\/\">este art\u00edculo<\/a>.<\/li>\n<li>El archivo <strong>block.json <\/strong>simplifica el registro de bloques en el lado del servidor al permitir que el <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\">punto final de la API REST<\/a> de <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/block-types\/\">Block Types<\/a> liste el bloque.<\/li>\n<li>El archivo <strong>block.json <\/strong>tambi\u00e9n es necesario si decide enviar tu plugin de bloques al directorio de plugins de WordPress.<\/li>\n<\/ul>\n<h3>Cambios en la funci\u00f3n register_block_type<\/h3>\n<p>Desde WordPress 5.8, la funci\u00f3n <code>register_block_type<\/code> se ha mejorado para leer los metadatos del archivo <strong>block.json<\/strong>. Ahora, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\">el primer par\u00e1metro<\/a> acepta la ruta de la carpeta donde se encuentra el archivo <strong>block.json<\/strong>.<\/p>\n<p>La funci\u00f3n puede utilizarse como se muestra en el siguiente ejemplo:<\/p>\n<pre><code class=\"language-php\">function create_custom_block_init() {\n\tregister_block_type( __DIR__ );\n}\nadd_action( 'init', 'create_custom_block_init' );<\/code><\/pre>\n<p>Devuelve el tipo de bloque registrado o <code>false<\/code> en caso de fallo.<\/p>\n<p>Como puedes observar, la funci\u00f3n <code>register_block_type<\/code> se utiliza ahora de la misma manera que la funci\u00f3n <code>register_block_type_from_metadata<\/code>, que antes era la \u00fanica funci\u00f3n <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type_from_metadata\/\">disponible para registrar un tipo de bloque<\/a> leyendo los metadatos del archivo <strong>block.json<\/strong>. Como explica <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">Greg Zi\u00f3\u0142kowski<\/a>:<\/p>\n<blockquote><p>Hemos decidido consolidar la funcionalidad preexistente disponible con el m\u00e9todo <code>register_block_type_from_metadata<\/code> en <code>register_block_type<\/code> para evitar cierta confusi\u00f3n que creaba. Todav\u00eda es posible utilizar ambas funciones, pero pensamos utilizar solo la versi\u00f3n m\u00e1s corta en los documentos y herramientas oficiales a partir de ahora.<\/p><\/blockquote>\n<p>Una vez que el bloque est\u00e1 registrado en el servidor, solo tienes que <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/\">registrar la configuraci\u00f3n<\/a> en el cliente utilizando el mismo nombre de bloque en tu archivo <strong>index.js<\/strong>.<\/p>\n<p>Para una visi\u00f3n m\u00e1s detallada de las mejoras de la API de bloques introducidas por WordPress 5.8, aseg\u00farate de consultar la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">nota de desarrollo de Greg Zi\u00f3\u0142kowski<\/a>.<\/p>\n<h2>Soporte de WebP en WordPress 5.8<\/h2>\n<p>En Kinsta, estamos obsesionados con la velocidad del sitio y el rendimiento de WordPress. Por eso la compatibilidad con el formato <a href=\"https:\/\/kinsta.com\/es\/blog\/webp\/\">WebP<\/a> en WordPress 5.8 es una noticia tan importante para nosotros.<\/p>\n<p>Considerado un <a href=\"https:\/\/web.dev\/uses-webp-images\/\">formato de nueva generaci\u00f3n<\/a>, WebP es un <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-archivos-de-imagen\/\">formato de imagen<\/a> desarrollado por Google que proporciona \u00abuna mejor compresi\u00f3n que PNG o JPEG, lo que significa descargas m\u00e1s r\u00e1pidas y menos consumo de datos\u00bb.\u00bb<\/p>\n<figure style=\"width: 1406px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/next-gen-image-formats-lighthouse.png\" alt=\"Google Lighthouse sugiere el uso de formatos de imagen de \u00faltima generaci\u00f3n.\" width=\"1406\" height=\"338\"><figcaption class=\"wp-caption-text\">Google Lighthouse sugiere el uso de formatos de imagen de \u00faltima generaci\u00f3n.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developers.google.com\/speed\/webp\">Seg\u00fan Google<\/a>:<\/p>\n<blockquote><p>WebP es un <strong>formato de imagen <\/strong>moderno que proporciona una compresi\u00f3n superior <strong>sin p\u00e9rdidas y con p\u00e9rdidas <\/strong>para las im\u00e1genes en la web. Con WebP, los administradores y desarrolladores web pueden crear im\u00e1genes m\u00e1s peque\u00f1as y ricas que hacen que la web sea m\u00e1s r\u00e1pida.<\/p>\n<p>Las im\u00e1genes sin p\u00e9rdidas de WebP son un 26% m\u00e1s peque\u00f1as que las de PNG. Las im\u00e1genes con p\u00e9rdidas de WebP son un 25-34% m\u00e1s peque\u00f1as que las <a href=\"https:\/\/kinsta.com\/es\/blog\/jpg-vs-jpeg\/\">im\u00e1genes JPEG<\/a> comparables con un \u00edndice de calidad SSIM equivalente.<\/p><\/blockquote>\n<p>A partir de WordPress 5.8, se puede utilizar el formato de imagen WebP del mismo modo que los formatos JPEG, PNG y GIF. Solo tienes que subir tus im\u00e1genes a tu <a href=\"https:\/\/kinsta.com\/es\/blog\/biblioteca-multimedia-wordpress\/\">biblioteca multimedia<\/a> e incluirlas en tu contenido.<\/p>\n<p>En un <a href=\"https:\/\/kinsta.com\/es\/blog\/webp\/\">art\u00edculo anterior<\/a>, analizamos en profundidad el formato WebP y las herramientas disponibles para utilizarlo en WordPress. Ahora, debido al soporte <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">para im\u00e1genes WebP en WordPress 5.8<\/a>, las cosas cambian un poco\u00a0Dado que el formato WebP es compatible desde el principio, no es necesario instalar plugins de terceros para subir im\u00e1genes WebP en WordPress, al menos en los casos de uso m\u00e1s comunes.<\/p>\n<p>Ten en cuenta que, aunque ahora puede subir tus im\u00e1genes WebP a WordPress utilizando la biblioteca multimedia, WordPress no admite la conversi\u00f3n autom\u00e1tica de im\u00e1genes al formato WebP. Para activar esa funci\u00f3n en tu sitio web, necesitar\u00e1s un <a href=\"https:\/\/kinsta.com\/es\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">plugin de WordPress para WebP<\/a> de terceros.<\/p>\n<h3>C\u00f3mo utilizar im\u00e1genes WebP en WordPress<\/h3>\n<p>Puedes convertir tus im\u00e1genes a WebP de muchas maneras diferentes:<\/p>\n<ul>\n<li>Puedes utilizar las <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled\">utilidades y la biblioteca WebP precompiladas<\/a> de Google para Linux, Windows o Mac OS X.<\/li>\n<li>Los usuarios de Mac pueden instalar un <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled#os_x_package_managers\">gestor de paquetes<\/a> como el <a href=\"https:\/\/formulae.brew.sh\/formula\/webp\">paquete Homebrew WebP<\/a> o el <a href=\"https:\/\/ports.macports.org\/?search=webp&#038;search_by=name\">paquete Macports WebP<\/a>.<\/li>\n<li>Puedes utilizar una herramienta de edici\u00f3n de im\u00e1genes compatible con WebP, como <a href=\"https:\/\/squoosh.app\/\">Squoosh<\/a> de <a href=\"https:\/\/github.com\/GoogleChromeLabs\/squoosh\">Google Chrome Labs<\/a>, el conversor de im\u00e1genes por lotes <a href=\"https:\/\/www.xnview.com\/en\/xnconvert\/\">XnConvert<\/a>, un editor de im\u00e1genes popular como <a href=\"https:\/\/www.gimp.org\/\">GIMP<\/a>, y muchos otros.<\/li>\n<li>Puedes instalar un <a href=\"https:\/\/kinsta.com\/es\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">plugin de WebP para<\/a> WordPress para tener un mejor control general de las im\u00e1genes WebP en WordPress.<\/li>\n<\/ul>\n<figure style=\"width: 582px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-export-settings-gimp.jpg\" alt=\"Exportar la imagen como WebP en GIMP.\" width=\"582\" height=\"596\"><figcaption class=\"wp-caption-text\">Exportar la imagen como WebP en GIMP.<\/figcaption><\/figure>\n<p>Si optas por una herramienta de l\u00ednea de comandos, puedes codificar y descodificar tus im\u00e1genes utilizando las utilidades <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/cwebp\">cwebp<\/a> y <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/dwebp\">dwebp<\/a>. Por ejemplo, el siguiente comando ejecuta una conversi\u00f3n b\u00e1sica de JPEG a WebP:<\/p>\n<pre><code class=\"language-bash\">cwebp [options] original_image.jpg -o compressed_image.webp<\/code><\/pre>\n<p>Tambi\u00e9n puedes realizar una conversi\u00f3n masiva de tus im\u00e1genes utilizando Bash y cwebp (ejemplo de <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/converting-images-to-webp\/\">Jeremy Wagner<\/a>):<\/p>\n<pre><code class=\"language-bash\">find .\/ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o \"${1%.png}.webp\"' _ {} \\;\n<\/code><\/pre>\n<p>El comando anterior convierte todas las im\u00e1genes <strong>.png <\/strong>a formato <strong>.webp <\/strong>con un factor de compresi\u00f3n de 75.<\/p>\n<figure style=\"width: 1269px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-quality-vs-file-size.jpg\" alt=\"Comparaci\u00f3n del factor de compresi\u00f3n y el tama\u00f1o de los archivos\" width=\"1269\" height=\"870\"><figcaption class=\"wp-caption-text\">Comparaci\u00f3n del factor de compresi\u00f3n y el tama\u00f1o de los archivos<\/figcaption><\/figure>\n<p>Una vez que tenga tus im\u00e1genes WebP, puede simplemente subirlas usando la <a href=\"https:\/\/kinsta.com\/es\/blog\/biblioteca-multimedia-wordpress\/\">Biblioteca de Medios<\/a> de WordPress. A continuaci\u00f3n puedes ver una imagen JPEG de 127 KB antes de la conversi\u00f3n en la Biblioteca de Medios:<\/p>\n<figure style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/jpeg-image.jpg\" alt=\"El tama\u00f1o del archivo JPEG comprimido es de 127 KB.\" width=\"1960\" height=\"1280\"><figcaption class=\"wp-caption-text\">El tama\u00f1o del archivo JPEG comprimido es de 127 KB.<\/figcaption><\/figure>\n<p>El tama\u00f1o de la imagen WebP comprimida es un 42% menor que la imagen JPEG original.<\/p>\n<figure style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-image.jpg\" alt=\"La misma imagen en formato WebP ocupa 74 KB.\" width=\"1960\" height=\"1280\"><figcaption class=\"wp-caption-text\">La misma imagen en formato WebP ocupa 74 KB.<\/figcaption><\/figure>\n<p>Por \u00faltimo, las im\u00e1genes WebP tienen las mismas funciones de edici\u00f3n que las im\u00e1genes JPEG, PNG y GIF. Puedes recortarlas, rotarlas, voltearlas y escalarlas, as\u00ed como aplicar cambios a los tama\u00f1os de imagen que elijas.<\/p>\n<h3>Advertencias sobre WebP en WordPress 5.8<\/h3>\n<p>Seg\u00fan Adam Silverstein:<\/p>\n<blockquote><p>Las im\u00e1genes WebP admiten compresi\u00f3n con y sin p\u00e9rdidas, as\u00ed como un formato animado y soporte para im\u00e1genes transparentes. En WordPress, el formato WebP sin p\u00e9rdidas solo es compatible cuando el servidor de alojamiento utiliza Imagick (la biblioteca de PHP) hasta que LibGD a\u00f1ada soporte. Adem\u00e1s, los formatos animados y alfa a\u00fan no son compatibles con las im\u00e1genes redimensionadas (cuando se suben im\u00e1genes en estos formatos se crean im\u00e1genes con p\u00e9rdidas en su lugar).<\/p><\/blockquote>\n<p>Si tu alojamiento web no admite im\u00e1genes WebP, ver\u00e1s un mensaje de error al intentar cargarlas. Si no est\u00e1 seguro de si tu alojamiento web admite la biblioteca Imagick, la pesta\u00f1a Informaci\u00f3n de la herramienta Salud del sitio incluye un campo de <strong>biblioteca Imagick <\/strong>que proporciona esa informaci\u00f3n.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/site-health-tool-1.jpg\" alt=\"Kinsta es compatible con la biblioteca Imagick.\" width=\"1600\" height=\"1222\"><figcaption class=\"wp-caption-text\">Kinsta es compatible con la biblioteca Imagick.<\/figcaption><\/figure>\n<p>Con el soporte de WebP, WordPress 5.8 tambi\u00e9n introduce dos campos adicionales en la secci\u00f3n de Manejo de Medios en la Salud del Sitio: <strong>Versi\u00f3n de Imagick <\/strong>y <strong>formatos de archivo compatibles con ImageMagick<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-media-handling.jpg\" alt=\"Campo de la versi\u00f3n de ImageMagick en Site Heath.\" width=\"1600\" height=\"473\"><figcaption class=\"wp-caption-text\">Campo de la versi\u00f3n de ImageMagick en Site Heath.<\/figcaption><\/figure>\n<p>Si WebP no figura entre los tipos de archivo admitidos, tendr\u00e1s que ponerte en contacto con tu proveedor de servicios web para obtener ayuda.<\/p>\n<p>La <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">nota de desarrollo<\/a> proporciona <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/#comment-41376\">informaci\u00f3n adicional<\/a> sobre la compatibilidad con WebP en WordPress 5.8, preguntas frecuentes \u00fatiles y otros recursos.<\/p>\n<p>Si te interesa la optimizaci\u00f3n de im\u00e1genes, puede que tambi\u00e9n te gusten los siguientes tutoriales:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">C\u00f3mo optimizar las im\u00e1genes para la web y el rendimiento<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/compresion-con-perdida\/\">Por qu\u00e9 y c\u00f3mo utilizar la compresi\u00f3n con p\u00e9rdidas en tus im\u00e1genes de WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/webp\/\">C\u00f3mo utilizar im\u00e1genes WebP en WordPress (y reducir el tama\u00f1o de los archivos de imagen hasta un 35%)<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-archivos-de-imagen\/\">15 mejores tipos de archivos de imagen<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/tamanos-imagenes-wordpress\/\">Todo lo que necesitas saber sobre los tama\u00f1os de las im\u00e1genes en WordPress<\/a><\/li>\n<\/ul>\n<h2>Funciones adicionales para desarrolladores<\/h2>\n<p>En WordPress 5.8 encontrar\u00e1s docenas de caracter\u00edsticas interesantes para los desarrolladores. En este art\u00edculo, hemos prestado m\u00e1s atenci\u00f3n a las que deber\u00edan tener un impacto m\u00e1s significativo en tu trabajo de desarrollo. Pero hay muchas nuevas caracter\u00edsticas que merecen atenci\u00f3n, incluyendo las siguientes:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>API de soporte a los bloques<\/h3>\n<p>WordPress 5.8 a\u00f1ade <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">nuevas banderas de soporte de bloques<\/a> que permiten a los desarrolladores personalizar los bloques registrados con las \u00faltimas caracter\u00edsticas de los bloques.<\/p>\n<p>Adem\u00e1s del <a href=\"#duotone-block-support\">soporte experimental de bloques duotono<\/a> mencionado anteriormente (<code>color._experimentalDuotone<\/code>), WordPress 5.8 tambi\u00e9n a\u00f1ade soporte para el color de los enlaces. Para aprovechar esta funci\u00f3n, basta con a\u00f1adir el siguiente indicador a los metadatos de tu bloque:<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\tlink: true;\n\t}\n}<\/code><\/pre>\n<p>Puede establecer valores por defecto utilizando atributos, como se muestra en el siguiente ejemplo, o establecer sus preajustes en <em>theme.json<\/em>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tlink: '#FF0000',\n\t\t\t}\n\t\t}<\/code><\/pre>\n<p>Otros cambios en la API de bloques son<\/p>\n<ul>\n<li>Los soportes <code>fontSize<\/code> y <code>lineHeight<\/code> se estabilizan.<\/li>\n<li>Se ha ampliado el soporte de <code>spacing<\/code>, y ahora puede controlar el <code>margin<\/code> y el <code>padding<\/code>, as\u00ed como controlar individualmente los tama\u00f1os <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code> e <code>left<\/code>.<\/li>\n<\/ul>\n<p>Puedes leer m\u00e1s sobre la API de soporte de bloques en WordPress 5.8 en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">Block supports API updates<\/a> dev-note.<\/p>\n<p>Para conocer m\u00e1s a fondo c\u00f3mo utilizar la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\">API de soportes de bloques<\/a>, consulta la documentaci\u00f3n oficial de la API de soportes de bloques.<\/p>\n<h3>Pesta\u00f1as personalizadas de salud del sitio<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">Dos nuevos ganchos<\/a> permiten ahora a los desarrolladores a\u00f1adir sus pesta\u00f1as personalizadas a la interfaz de Site Health y personalizar las pantallas disponibles.<\/p>\n<p>El <strong>filtro <\/strong><code><strong>site_health_navigation_tabs<\/strong><\/code> es una matriz asociativa de IDs de pesta\u00f1as y etiquetas para registrar una nueva pesta\u00f1a en la pantalla Site Health. Puedes utilizar el filtro a\u00f1adiendo el siguiente c\u00f3digo de ejemplo al <a href=\"https:\/\/kinsta.com\/es\/blog\/como-personalizar-tema-wordpress\/#the-theme-editor-and-why-not-to-use-it\">archivo de funciones de su tema<\/a> o al plugin personalizado:<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_navigation_tabs( $tabs ) {\n\t$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );\n\n\treturn $tabs;\n}\nadd_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );<\/code><\/pre>\n<p>La siguiente imagen muestra la nueva pesta\u00f1a de Salud del Sitio:<\/p>\n<figure style=\"width: 1646px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-custom-tabs.png\" alt=\"Se ha a\u00f1adido una pesta\u00f1a personalizada al men\u00fa de navegaci\u00f3n de Salud del Sitio.\" width=\"1646\" height=\"1068\"><figcaption class=\"wp-caption-text\">Se ha a\u00f1adido una pesta\u00f1a personalizada al men\u00fa de navegaci\u00f3n de Salud del Sitio.<\/figcaption><\/figure>\n<p>Gracias al filtro <code>site_health_navigation_tabs<\/code>, tambi\u00e9n es posible reordenar las pesta\u00f1as o eliminar uno o varios elementos.<\/p>\n<p>La <code><strong>acci\u00f3n <\/strong><strong>site_health_tab_content<\/strong><\/code> se <strong>activa<\/strong> cuando un usuario visita la pantalla de Salud del Sitio, excepto la pantalla de <strong>Estado <\/strong>por defecto. Puedes utilizar este gancho como se muestra en el siguiente fragmento (ejemplo de la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">nota de desarrollo<\/a>):<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_tab_content( $tab ) {\n\t\/\/ Return if this is not your tab.\n\tif ( 'kinsta-site-health-tab' !== $tab ) {\n\t\treturn;\n\t}\n\n\t\/\/ Include the interface, kept in a separate file just to differentiate code from views.\n\tinclude trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views\/kinsta-site-health-tab.php';\n}\nadd_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );<\/code><\/pre>\n<p>En primer lugar, detecta si la pesta\u00f1a actual es tu pesta\u00f1a personalizada, luego carga el contenido de tu pantalla de Salud del Sitio desde un archivo <strong>.php<\/strong>. La acci\u00f3n <code>site_health_tab_content<\/code> tambi\u00e9n permite a los desarrolladores ampliar la pesta\u00f1a de <strong>informaci\u00f3n <\/strong>por defecto a\u00f1adiendo piezas de informaci\u00f3n espec\u00edficas para sus plugins o temas.<\/p>\n<h3>Cambios en la API del editor de bloques para soportar m\u00faltiples pantallas de administraci\u00f3n<\/h3>\n<p>Con WordPress 5.8, el editor de entradas ya no es la \u00fanica pantalla de administraci\u00f3n que utiliza el editor de bloques (la pantalla de widgets es un ejemplo).<\/p>\n<p>Los colaboradores del n\u00facleo encontraron varios ganchos definidos en el servidor que dependen del objeto <code>$post<\/code>. Este objeto no est\u00e1 presente en la edici\u00f3n del sitio, los widgets y las pantallas de navegaci\u00f3n. En adelante, varios filtros han sido desaprobados y reemplazados por sustituciones conscientes del contexto.<\/p>\n<p>Adem\u00e1s, se ha introducido una nueva clase <code>WP_Block_Editor_Context<\/code> que representa el contexto actual del editor de bloques y varios m\u00e9todos.<\/p>\n<p>Estos cambios mejoran estas pantallas con nuevas capacidades y permiten a los desarrolladores a\u00f1adir sus personalizaciones.<\/p>\n<p>Para obtener una lista completa de los cambios en la API del Editor de Bloques relacionados con las pantallas de administraci\u00f3n, consulta la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/block-editor-api-changes-to-support-multiple-admin-screens-in-wp-5-8\/\">nota de desarrollo<\/a> de Greg Zi\u00f3\u0142kowski.<\/p>\n<h3>Caracter\u00edsticas y mejoras adicionales<\/h3>\n<p>Hay tantas novedades y cambios para los desarrolladores que trae WordPress 5.8 que nos ser\u00eda imposible mencionarlas todas en este art\u00edculo. Sin embargo, hemos recopilado una lista de notas de desarrollo que no se han incluido aqu\u00ed, para que pueda seguir leyendo:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/news\/2021\/05\/dropping-support-for-internet-explorer-11\/\">Se abandona la compatibilidad con Internet Explorer 11<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/01\/block-styles-loading-enhancements-in-wordpress-5-8\/\">Mejoras en la carga de estilos de bloques en WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/blocks-in-an-iframed-template-editor\/\">Bloques en un editor iframed (plantilla)<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/on-layout-and-content-width-in-wordpress-5-8\/\">Sobre el dise\u00f1o y el ancho del contenido en WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/introducing-update-uri-plugin-header-in-wordpress-5-8\/\">Introducci\u00f3n de la cabecera del plugin \u00abUpdate URI\u00bb en WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-editor-api-removals-58\/\">Varias eliminaciones de la API del editor de bloques en WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/rest-api-changes-in-wordpress-5-8\/\">Cambios en la API REST de WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/28\/miscellaneous-developer-focused-changes-in-wordpress-5-8\/\">Diversos cambios centrados en los desarrolladores en WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/12\/miscellaneous-block-editor-api-additions-in-wordpress-5-8\/\">Adiciones a la API del editor de bloques en WordPress 5.8<\/a><\/li>\n<\/ul>\n\n<h2>Resumen<\/h2>\n<p>WordPress 5.8 marca un hito en el camino hacia el Full Site Editing. Pero la segunda versi\u00f3n de WordPress del a\u00f1o trae mucho m\u00e1s que FSE. Los usuarios y desarrolladores encontrar\u00e1n montones de mejoras en el editor de bloques, un nuevo mecanismo <strong>theme.json<\/strong>, una API de bloques m\u00e1s potente, compatibilidad con el formato de imagen WebP y mucho m\u00e1s.<\/p>\n<p>Nos han impresionado especialmente las mejoras, grandes y peque\u00f1as, del editor de bloques y su interfaz de usuario. Nos encanta la mejora de la navegaci\u00f3n entre bloques, la barra de herramientas de bloques renovada, la mayor claridad de la interfaz y las mejoras de varios bloques.<\/p>\n<p>Estos peque\u00f1os cambios mejoran la experiencia de edici\u00f3n poco a poco y, sin casi darnos cuenta, nos encontramos utilizando un software mejor y m\u00e1s robusto. \u00a1As\u00ed es <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-wordpress\/\">WordPress<\/a>!<\/p>\n<p><em>Ahora, estamos a tu disposici\u00f3n. \u00bfQu\u00e9 opinas del Full Site Editing? \u00bfY cu\u00e1les son tus cambios favoritos de WordPress 5.8?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 5.8 \u00abTatum\u00bb ya est\u00e1 aqu\u00ed y es un lanzamiento trascendental. Aparte del incre\u00edble n\u00famero de caracter\u00edsticas, mejoras y correcciones de errores, WP 5.8 introduce una &#8230;<\/p>\n","protected":false},"author":36,"featured_media":42503,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[421,172],"topic":[1357],"class_list":["post-42452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-cms","tag-wordpress","topic-actualizaciones-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Novedades de WordPress 5.8<\/title>\n<meta name=\"description\" content=\"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Novedades de WordPress 5.8 (Edici\u00f3n Completa del Sitio, Im\u00e1genes WebP, Estilos y Ajustes globales y Mucho M\u00e1s)\" \/>\n<meta property=\"og:description\" content=\"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-22T10:59:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T08:59:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/ES-Homepage-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"47 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Novedades de WordPress 5.8 (Edici\u00f3n Completa del Sitio, Im\u00e1genes WebP, Estilos y Ajustes globales y Mucho M\u00e1s)\",\"datePublished\":\"2021-07-22T10:59:59+00:00\",\"dateModified\":\"2025-02-11T08:59:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\"},\"wordCount\":8468,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg\",\"keywords\":[\"CMS\",\"WordPress\"],\"articleSection\":[\"Noticias de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\",\"name\":\"Novedades de WordPress 5.8\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg\",\"datePublished\":\"2021-07-22T10:59:59+00:00\",\"dateModified\":\"2025-02-11T08:59:31+00:00\",\"description\":\"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Actualizaciones de WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/actualizaciones-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Novedades de WordPress 5.8 (Edici\u00f3n Completa del Sitio, Im\u00e1genes WebP, Estilos y Ajustes globales y Mucho M\u00e1s)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Novedades de WordPress 5.8","description":"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/","og_locale":"es_ES","og_type":"article","og_title":"Novedades de WordPress 5.8 (Edici\u00f3n Completa del Sitio, Im\u00e1genes WebP, Estilos y Ajustes globales y Mucho M\u00e1s)","og_description":"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).","og_url":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-07-22T10:59:59+00:00","article_modified_time":"2025-02-11T08:59:31+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/ES-Homepage-featured-image.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).","twitter_image":"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"47 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Novedades de WordPress 5.8 (Edici\u00f3n Completa del Sitio, Im\u00e1genes WebP, Estilos y Ajustes globales y Mucho M\u00e1s)","datePublished":"2021-07-22T10:59:59+00:00","dateModified":"2025-02-11T08:59:31+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/"},"wordCount":8468,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg","keywords":["CMS","WordPress"],"articleSection":["Noticias de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/","url":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/","name":"Novedades de WordPress 5.8","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg","datePublished":"2021-07-22T10:59:59+00:00","dateModified":"2025-02-11T08:59:31+00:00","description":"Consulta nuestro an\u00e1lisis en profundidad sobre WordPress 5.8 y descubre las principales caracter\u00edsticas que se incorporan a la \u00faltima versi\u00f3n (que son muchas).","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/wordpress-5.8.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Actualizaciones de WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/actualizaciones-wordpress\/"},{"@type":"ListItem","position":3,"name":"Novedades de WordPress 5.8 (Edici\u00f3n Completa del Sitio, Im\u00e1genes WebP, Estilos y Ajustes globales y Mucho M\u00e1s)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=42452"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42452\/revisions"}],"predecessor-version":[{"id":43293,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42452\/revisions\/43293"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/dk"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/translations\/se"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42452\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/42503"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=42452"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=42452"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=42452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}