Estamos acostumbrados a ver pequeños y no tan pequeños cambios y nuevas características añadidas al núcleo de WordPress cada vez que se lanza una nueva versión. WordPress 5.7 no es una excepción, y es estupendo ver cómo cada nueva versión nos acerca un poco más al Big Picture.

Con varias versiones del editor de bloques fusionadas en el núcleo, la nueva versión mejora la experiencia general de edición y permite a los desarrolladores construir bloques más avanzados y añadir personalizaciones más potentes al editor de bloques.

Aparte del editor, WordPress 5.7 también introduce toneladas de cambios y grandes características, incluyendo iframes de lazy loading, actualizaciones de la interfaz de inicio de sesión y registro, enlaces para restablecer la contraseña, un gran número de correcciones de errores y mucho más.

Hemos hecho nuestras pruebas en DevKinsta, y estamos listos para compartir con contigo nuestras características y cambios favoritos que vienen con WordPress 5.7-completado, por supuesto, con toneladas de capturas de pantalla y fragmentos de código.

Si quieres profundizar en la primera gran versión de 2021, consulta el Development Cycle de WordPress 5.7, el Planning Roundu y la Field Guide.

Así que, mientras seguimos esperando el Full Site Editing (en el núcleo de WordPress 5.8), ¡pongámonos cómodos y disfrutemos de las novedades de WordPress 5.7!

WordPress 5.7 es la primera gran versión del año 🥳 Echa un vistazo a las novedades y descubre lo que podemos esperar de WordPress en 2021 🎁Click to Tweet

Novedades del Editor de Bloques

WordPress 5.7 trae muchas versiones del plugin Gutenberg al Core. Sería imposible mencionar aquí todas esas incorporaciones además de los numerosos cambios y correcciones de errores añadidos al editor, pero puedes visitar los siguientes enlaces para profundizar en cada versión: 9.3, 9.4, 9.5, 9.6, 9.7, 9.8, 9.9.

Las correcciones de errores y las mejoras de rendimiento de Gutenberg 10.0 y 10.1 también forman parte de WordPress 5.7.

Dicho esto, vamos a repasar nuestra lista de las características y los cambios más interesantes añadidos al editor de bloques con WordPress 5.7:

Características, Mejoras y API de las Variaciones de Bloques

Introducido con WordPress 5.4, las variaciones de bloque proporcionan una manera para que el usuario seleccione una instancia diferente del mismo bloque.

Esta función funciona junto con la API de variaciones de bloques, una potente herramienta que permite a los desarrolladores añadir, gestionar o eliminar variaciones de bloques.

WordPress 5.7 introduce varias mejoras, funciones y nuevas API para las variaciones de los bloques, proporcionando una mejor interfaz de usuario y herramientas más potentes para los desarrolladores. Vamos a sumergirnos en ello.

Transformaciones en la Variación de bloques

Introducido por primera vez con Gutenberg 9.4 y ahora añadido a WordPress 5.7, un conmutador de transformación a variación aparece debajo de la tarjeta de bloque para los bloques que soportan esta característica.

El conmutador de transformación a variación para un bloque de botones

El conmutador de transformación a variación para un bloque de botones

Al registrar una nueva variación de bloque, los desarrolladores de bloques pueden añadir el conmutador de variaciones al inspector de bloques añadiendo la opción de nueva transform al campo de scope de la variación de bloque, como se muestra en el siguiente ejemplo (solo código JS):

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter', 'transform' ] 
} );

En este ejemplo, la variación de un bloque aparece en dos áreas de la interfaz de usuario del editor: el insertador de bloques y el inspector de bloques.

Ejemplo de variación de bloques con ámbito de transformación

Ejemplo de variación de bloques con ámbito de transformación

Para obtener una descripción detallada de las transformaciones de las variaciones en bloque, véase también el PR #26687.

La Información de los Bloques Ahora coincide con las Variaciones de los Mismos

Desde WordPress 5.7 (y Gutenberg 9.7), la interfaz de usuario muestra información más específica sobre las variaciones de los bloques, mientras que antes solo mostraba información genérica.

Antes de WordPress 5.7, los elementos de la interfaz mostraban información genérica sobre las variaciones de los bloques

Antes de WordPress 5.7, los elementos de la interfaz mostraban información genérica sobre las variaciones de los bloques

Los bloques incrustados y los Iconos Sociales están construidos como variaciones de bloques; proporcionan buenos ejemplos de cómo WordPress hace coincidir la información de los bloques con las variaciones de los mismos.

Ahora los elementos de la interfaz muestran información específica de las variaciones de los bloques

Ahora los elementos de la interfaz muestran información específica de las variaciones de los bloques

Estos cambios afectan al inspector de bloques, a la barra de navegación de bloques y a las migas de pan. Desde Gutenberg 9.8, esta mejora de la interfaz de usuario también se aplica al conmutador de bloques.

Mejora de la interfaz de usuario para las variaciones de bloques en el conmutador de bloques

Mejora de la interfaz de usuario para las variaciones de bloques en el conmutador de bloques

Nuevas API de Variaciones de Bloques

WordPress 5.7 también introduce nuevas APs que los desarrolladores pueden utilizar en el registro de variaciones de bloque para mostrar la información correcta de una variación de bloque (Gutenberg 9.7).

La nueva propiedad isActive es una función que acepta los atributos de un bloque. Puedes utilizar los atributos de la variación para determinar si una variación está activa (véase también la Referencia de la API de bloques).

Los desarrolladores de bloques pueden utilizar esta función para mostrar la información de la variación en lugar de la información del bloque. Un ejemplo podría ser el bloque de embed, donde podemos cambiar el valor del atributo providerNameSlug (un ejemplo de la nota de desarrollo):

const variations = [
{
	name: 'wordpress',
	title: 'WordPress',
	keywords: [ __( 'post' ), __( 'blog' ) ],
	description: __( 'Embed a WordPress post.' ),
	attributes: { providerNameSlug: 'wordpress' },
	isActive: ( blockAttributes, variationAttributes ) =>
		blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
},
];

En el siguiente ejemplo, la propiedad isActive se utiliza para cambiar el atributo de color:

variations: [
{
	name: 'blue',
	title: __( 'Blue Quote' ),
	isDefault: true,
	attributes: { color: 'blue', className: 'is-style-blue-quote' },
	icon: 'format-quote',
	isActive: ( blockAttributes, variationAttributes ) =>
		blockAttributes.color === variationAttributes.color
},
],

El nuevo hook useBlockDisplayInformation devuelve información sobre un bloque determinado. El nuevo gancho tiene en cuenta la propiedad isActive de una variación del bloque y devuelve el title, el icon y la description del bloque.

Estos cambios afectan a la tarjeta de bloque (herramientas del inspector), a la vista de la lista de navegación (barra superior) y a las migas de pan (véase también el PR #27469).

Nuevas Características del Bloque de Botones

Un par de nuevas características mejoran la funcionalidad y la interfaz del bloque de botones.

Dimensiones de los Botones

Un nuevo control disponible en los Ajustes de la barra lateral nos permite ahora establecer un porcentaje de anchura para los botones alojados en los bloques de Botones (Gutenberg 9.4).

Configuración de la anchura de los botones

Configuración de la anchura de los botones

Solo tienes que seleccionar un botón y elegir 25%, 50%, 75% o 100%. Los porcentajes se refieren al contenedor principal. La imagen siguiente muestra diferentes combinaciones de dimensiones de botones.

Combinaciones de botones con diferentes valores de anchura

Combinaciones de botones con diferentes valores de anchura

Para más información técnica, consulta los pull requests #25999 y #26781.

Disposición Vertical

Esta nueva función añade variaciones para la orientación vertical al bloque de Botones. Los usuarios pueden cambiar de un diseño horizontal a uno vertical utilizando el conmutador de transformaciones disponible en el panel de configuración del bloque (Gutenberg 9.6).

Bloque de botones con orientación vertical

Bloque de botones con orientación vertical

Mejoras en los Íconos Sociales

WordPress 5.7 añade nuevas opciones de personalización a los Íconos Sociales: soporte de tamaños y colores personalizados.

Tamaño de los Íconos Sociales

Con el bloque de Íconos sociales seleccionado, la barra de herramientas del bloque ofrece ahora un menú de opciones de tamaño con los tamaños disponibles (Gutenberg 9.4).

Tamaño "enorme" para los iconos sociales

Tamaño «enorme» para los iconos sociales

Colores Personalizados en los Iconos Sociales

El mismo bloque ahora admite la configuración de colores, lo que nos permite establecer diferentes colores personalizados para los iconos y los fondos (Gutenberg 9.9).

Iconos sociales con fondo negro

Iconos sociales con fondo negro

Ahora puedes utilizar la paleta de colores del tema para los iconos sociales, evitando que los colores de los iconos choquen con el esquema de colores de tu sitio web (ver también PR #28084).

Soporte al Tamaño de la Fuente

WordPress 5.7 añade soporte del tamaño de la fuente para los bloques de lista y de código.

Tamaño de la Fuente en el Bloque de la Lista

Se ha añadido una tarjeta de tipografía con controles para el tamaño de la fuente en la configuración del bloque de la lista (Gutenberg 9.4).

Tamaño de la fuente en la configuración del bloque de la lista

Tamaño de la fuente en la configuración del bloque de la lista

Los usuarios pueden elegir uno de los tamaños de letra disponibles para los elementos de la lista o establecer un tamaño de letra personalizado expresado en píxeles. El botón «Reset» restablece los valores por defecto.

Soporte al Tamaño de la Fuente en el Bloque de Código

WordPress 5.7 también añade soporte para la gestión del tamaño de la fuente dentro de los bloques de código. Con un bloque de código seleccionado, la barra lateral de ajustes del bloque muestra un nuevo control de tamaño de fuente. Este control te permite elegir uno de los tamaños preestablecidos disponibles en tu tema o establecer un valor personalizado en píxeles (Gutenberg 9.5).

Tamaños de fuente globales disponibles en Twenty Twenty

Tamaños de fuente globales disponibles en Twenty Twenty

La implementación de esta función también permite utilizar variables de estilo globales en el CSS de los bloques Code (véase también el PR #27294). La imagen siguiente muestra un bloque Code en el frontend con el tema Twenty Twenty instalado.

Estilos CSS globales en un bloque de código

Estilos CSS globales en un bloque de código

Alineación de Altura Completa en el Bloque de Cubierta

WordPress 5.7 introduce un nuevo componente de alineación de la barra de herramientas de altura completa. Se añadió por primera vez al editor de bloques con Gutenberg 9.5. Ahora, se ha fusionado en el Core y se ha implementado en el bloque de cubierta.

Se ha implementado la alineación de altura completa en el bloque de cubierta

Se ha implementado la alineación de altura completa en el bloque de cubierta

Si activas el botón de la barra de herramientas del bloque, manteniendo un ojo en el control de la altura mínima, verás que la alineación de altura completa es solo una abreviatura de 100vh (lee más sobre las longitudes de porcentaje de la ventana gráfica).

Alineación de altura completa en un bloque de cubierta

Alineación de altura completa en un bloque de cubierta

Puedes utilizar la alineación de altura completa en combinación con otros ajustes de control como el fondo fijo, la posición del contenido, etc. Probablemente te sorprenderá la cantidad de efectos impresionantes que podrás crear en tus páginas.

Arrastrar y Soltar Bloques y Patrones Desde el Insertador

El insertador de bloques ahora soporta la función de arrastrar y soltar para bloques y patrones. Los usuarios pueden tomar cualquier bloque o patrón del insertador y colocarlo en cualquier lugar del lienzo de la publicación (Gutenberg 9.6 y 9.7).

Ahora puedes arrastrar bloques o patrones desde el insertador hasta el lienzo de la entrada

Ahora puedes arrastrar bloques o patrones desde el insertador hasta el lienzo de la entrada

Ten en cuenta que la función de arrastrar y soltar solo funciona si tu tema admite patrones de bloques.

Bloque Espaciador Semitransparente

En lugar del anterior color gris opaco, el bloque Espaciador tiene ahora un fondo semitransparente (Gutenberg 9.8).

Un bloque espaciador opaco en WordPress 5.6

Un bloque espaciador opaco en WordPress 5.6

Esta característica debería facilitar la identificación del bloque espaciador sobre cualquier color de fondo.

Un bloque espaciador semitransparente en WordPress 5.7

Un bloque espaciador semitransparente en WordPress 5.7

Mejoras Adicionales en el Editor de Bloques que Merecen la Pena Ser Mencionados

Nuestra lista no cubre todas las características y mejoras incorporadas al núcleo, así que asegúrate de consultar la documentación oficial y las notas de desarrollo para obtener un registro más completo de las novedades del editor de bloques con WordPress 5.7.

Pero solo para nombrar algunos otros, en 5.7, también encontrarás:

Las vistas previas de las transformaciones de bloques en WordPress 5.7

Las vistas previas de las transformaciones de bloques en WordPress 5.7

Lazy Loading iframes

La lazy loading es una técnica de optimización que aplaza la carga de recursos no críticos hasta que estén en la ventana gráfica del usuario. Las imágenes de lazy loading y los recursos incrustados no se descargan ni se procesan hasta que son necesarios. Puede mejorar significativamente el rendimiento del sitio, especialmente en el caso de los sitios web con imágenes y vídeos de alta resolución.

Antes de las lazy loading nativa, los desarrolladores solo podían cargar activos de forma lenta a través de JavaScript. Los usuarios de WordPress se veían obligados a utilizar un plugin para conseguir el mismo efecto. Sin embargo, desde que la lazy loading se convirtió en un estándar, las imágenes y los iframes se pueden cargar diferidamente simplemente añadiendo el atributo loading="lazy" a las etiquetas img e iframe.

Safari admite la lazy loading de imágenes como función experimental

Safari admite la lazy loading de imágenes como función experimental

WordPress 5.5 introdujo Native Image Lazy-Loading en el núcleo de WordPress, añadiendo automáticamente el atributo loading="lazy" a las etiquetas img con atributos de width y height especificados.

Ahora, desde WordPress 5.7, la lazy load se extiende a las etiquetas iframe. En cuanto a las imágenes, para evitar el desplazamiento del diseño, loading="lazy" solo se añadirá a las etiquetas iframe que tengan especificados los atributos width y height.

En WordPress, la lazy loading nativa funciona con iframes en los siguientes contextos:

Configuración de la lazy loading en Chrome (disponible en chrome://flags/)

Configuración de la lazy loading en Chrome (disponible en chrome://flags/)

En WordPress, la mayoría de los iframes dependen de la integración de oEmbed, que transforma automáticamente una URL en la etiqueta iframe correspondiente. Por desgracia, no todos los servicios web proporcionan atributos de width y height para los iframes; esto impide que WordPress añada el atributo de loading a esos iframes.

La siguiente imagen muestra una etiqueta iframe con el atributo loading="lazy":

Lazy loading con un vídeo de YouTube incrustado

Lazy loading con un vídeo de YouTube incrustado

En palabras de Felix Arntz:

El marcado de esas etiquetas iframe está controlado por el servicio web respectivo, y solo algunos de esos servicios web siguen la mejor práctica de proporcionar el atributo de width y height. Como WordPress no puede adivinar las dimensiones del recurso incrustado, el atributo loading="lazy" solo se añadirá si la etiqueta iframe oEmbed viene con ambos atributos de dimensión presentes.

La siguiente imagen muestra una etiqueta iframe sin el atributo loading="lazy":

Un iframe sin el atributo de carga

Un iframe sin el atributo de carga

Lazy Loading de iframes para Desarrolladores

Desde el punto de vista de los desarrolladores, la nueva función requería varios cambios, entre ellos:

Puedes anular el comportamiento por defecto utilizando el filtro existente wp_lazy_loading_enabled, que ahora devuelve true para las etiquetas iframe.

add_filter(
	'wp_lazy_loading_enabled',
	function( $default, $tag_name, $context ){
		if ( 'iframe' === $tag_name && 'the_content' === $context ){
			return false;
		}
		return $default;
	},
	10,
	3
);

También puedes utilizar el nuevo filtro wp_iframe_tag_add_loading_attr, que permite personalizar el comportamiento de una etiqueta iframe específica. Por ejemplo, puedes desactivar la lazy loading de los vídeos de YouTube en un contexto determinado.

El código siguiente se basa en un ejemplo de la nota de desarrollo y muestra cómo desactivar la lazy loading para los iframes que incrustan vídeos de YouTube:

add_filter(
	'wp_iframe_tag_add_loading_attr',
	function( $value, $iframe, $context ){
		if ( 'the_content' === $context && false !== strpos( $iframe, 'youtube.com' ) {
		return false;
	},
	10,
	3
);

Ten en cuenta que, en general, no todos los navegadores soportan el lazy loading en el momento de escribir este artículo. A continuación puedes ver que Firefox y Safari solo admiten la carga perezosa en las imágenes.

Carga perezosa mediante atributo para imágenes e iframes

Lazy Loading mediante atributo para imágenes e iframes (Fuente: caniuse.com)

Migración de Sitios de HTTP a HTTPS con un Solo Clic

Desde la versión 5.7, WordPress detecta si el entorno de un sitio web soporta HTTPS. Si es así, la sección de Estado de HTTPS en la herramienta de Salud del Sitio proporciona un botón de llamada a la acción que permite a los administradores del sitio cambiar sus sitios web de HTTP a HTTPS con un solo clic. El contenido del sitio se migra sobre la marcha, lo que evita que nos encontremos con avisos de contenido mixto.

Actualice su sitio para utilizar HTTPS en WordPress 5.7

Actualice su sitio para utilizar HTTPS en WordPress 5.7 (Fuente de la imagen: WordPress.org)

WordPress mostrará una notificación si HTTPS no es compatible.

No se admite HTTPS

No se admite HTTPS

Migración de HTTP a HTTPS para Desarrolladores

Junto con la nueva función automática accesible desde la herramienta Salud del Sitio, WordPress 5.7 introduce nuevas funciones que permiten a los desarrolladores probar y personalizar diferentes aspectos de la detección y migración de HTTPS.

La nueva función wp_is_using_https() devuelve true si tanto la «Dirección del sitio» (home_url()) como la «Dirección de WordPress» (site_url()) tienen una URL que contiene https. Esta nueva función es ilustrada claramente por Felix Arntz en la nota de desarrollo:

Esencialmente, cambiar estas dos URL a HTTPS indica formalmente que el sitio está usando HTTPS. Aunque hay otras formas de habilitar HTTPS parcialmente en WordPress (por ejemplo, con la constante FORCE_SSL_ADMIN), el nuevo mecanismo de detección se centra en el uso de HTTPS en todo el sitio, es decir, tu frontend y backend.

Mientras que la función wp_is_using_https() comprueba la presencia de https en la URL, wp_is_https_supported() comprueba si el entorno del sitio soporta correctamente HTTPS.

Esta función comprueba esencialmente la presencia de la opción https_detection_errors en la base de datos y devuelve true si no se detectan errores. En caso de que tu entorno no soporte HTTPS, la opción https_detection_errors estará presente en la tabla wp_options, como se muestra en la siguiente imagen:

No se admite HTTPS

No se admite HTTPS

Como se ha mencionado anteriormente, las URL codificadas en el contenido del sitio se cambian sobre la marcha, todo gracias a dos nuevas funciones: wp_replace_insecure_home_url() y wp_should_replace_insecure_home_url().

Para migrar un sitio web de HTTP a HTTPS, el administrador del sitio solo tendría que actualizar manualmente «Dirección del sitio» y «Dirección de WordPress» para incluir HTTPS en lugar de HTTP. Sin embargo, para facilitar aún más las cosas, WordPress 5.7 introduce la nueva función wp_update_urls_to_https().

Esta última función permite migrar un sitio y todo su contenido de HTTP a HTTPS con un solo clic (al menos en los escenarios más comunes, como cuando la «Dirección del sitio» coincide con la «Dirección de WordPress»). Es una novedad absoluta y una mejora considerable en la experiencia de administración de WordPress.

Para más aspectos técnicos de la detección y migración de HTTPS, véase la nota de desarrollo de Felix Arntz, así como los tickets #47577 y #51437.

Nuevas Funciones Relacionadas con la Entrada Principal

WordPress 5.7 introduce dos nuevas funciones relacionadas con la Entrada Principal. Son sencillas de usar y te ayudan a reducir la lógica en los plugins y temas.

has_parent_post()

La función has_parent_post() es una etiqueta condicional que comprueba si una entrada dada tiene un padre, y devuelve true o false en consecuencia. Acepta el ID de la entrada o el objeto WP_Post como parámetro, y utiliza la variable global $post si está disponible. Vea el siguiente ejemplo:

<?php if ( has_parent_post( get_the_ID() ) ) : ?>
	// your code here
<?php endif; ?>

get_parent_post()

La función get_parent_post() es una etiqueta de plantilla que recupera el objeto WP_Post padre de una entrada determinada. Al igual que la función anterior, acepta el ID de la entrada o el objeto WP_Post como parámetro. Mira el siguiente ejemplo de uso:

<a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>"><?php echo get_the_title( get_parent_post( get_the_ID() ) ); ?></a>

En el mundo real, utilizaríamos estas funciones conjuntamente. Puedes realizar una prueba por ti mismo añadiendo el siguiente código de la nota de desarrollo al archivo de plantilla single.php de tu tema:

<?php if ( has_parent_post( get_the_ID() ) ) : ?>
	<p><a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>">
	<?php
		echo sprintf(
			esc_html__( 'Parent page: %s', 'text-domain' ),
			get_the_title( get_parent_post( get_the_ID() ) )
		);
	?>
	</a></p>
<?php endif; ?>

Actualizaciones de la Interfaz de Inicio de Sesión y Registro

WordPress 5.7 aporta varias mejoras a la función de inicio de sesión y registro, con una interfaz mejorada para restablecer la contraseña, nuevos ganchos y otros cambios menores.

Pantalla de Restablecimiento de Contraseña

La pantalla de restablecimiento de contraseña ofrece ahora dos botones: Generar contraseña y Guardar contraseña. El primer botón genera una nueva contraseña fuerte en cada clic, mientras que el segundo botón guarda tu contraseña. Este cambio debería mejorar la experiencia de restablecimiento de la contraseña para los nuevos usuarios de WordPress.

La siguiente imagen compara las pantallas de restablecimiento de contraseña en WordPress 5.6 y 5.7:

La pantalla de restablecimiento de contraseña en WordPress 5.6 vs. 5.7

La pantalla de restablecimiento de contraseña en WordPress 5.6 vs. 5.7

Nuevos Filtros

El nuevo hook lostpassword_user_data nos permite filtrar la variable $user_data al restablecer la contraseña. Los desarrolladores ahora pueden realizar la validación de usuarios utilizando datos personalizados en lugar de un nombre de usuario o una dirección de correo electrónico. Para un ejemplo del mundo real, mira este comentario de Marcelo Villela Gusmão.

El nuevo hook de filtro login_site_html_link nos permite reemplazar completamente el HTML que genera el enlace «Back to {site_name}» con código/enlace personalizado. Ahora los desarrolladores pueden establecer un texto personalizado para el enlace, así como cambiar el propio enlace. Puedes utilizar el filtro como se ilustra en el siguiente ejemplo:

function custom_login_site_html_link( $link ) {
	return '<a href="' . esc_url( home_url( '/blog/' ) ) . '">' . __( 'Back to my awesome blog', 'textdomain' ) . '</a>';
}
add_filter( 'login_site_html_link', 'custom_login_site_html_link', 10, 1 );

La imagen siguiente muestra el resultado en la pantalla:

Enlace personalizado "Volver a {site_name}" en WordPress 5.7

Enlace personalizado «Volver a {site_name}» en WordPress 5.7

Para ver los cambios adicionales, consulta los cambios en las pantallas de inicio de sesión y registro en la nota de desarrollo de WordPress 5.7.

Nuevas Funciones para Comprobar si una Publicación es Visible Públicamente

WordPress 5.7 introduce dos nuevas funciones que permiten a los desarrolladores comprobar si una entrada es visible públicamente.

is_post_status_viewable()

La nueva función is_post_status_viewable() permite a los desarrolladores determinar si una publicación es visible públicamente en función del estado de la misma.

Esta nueva función proporciona una mejor manera de comprobar si una entrada es visible que la función existente is_post_type_viewable(), que puedes comprobar si un tipo de entrada es visible para los usuarios anónimos, pero no ayuda a determinar si una entrada específica es visible o no.

Para los tipos de entrada incorporados, is_post_status_viewable() comprueba el atributo public. Para los tipos de entrada personalizados, comprueba el atributo publicly_queryable en su lugar.

¿Necesitas una solución de alojamiento que te dé una ventaja competitiva? Kinsta te tiene cubierto todo con una velocidad increíble, seguridad de última generación y escalado automático. Echa un vistazo a nuestros planes

Hemos probado el siguiente código, basado en el ejemplo de la nota de desarrollo, en una instalación local:

$current_post_status = get_post_status( $post );
if ( is_post_status_viewable( $current_post_status ) ) {
	echo '<p>This post uses a public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>';
} else {
	echo '<p>This post uses a non public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>';
}

is_post_status_viewable() acepta un parámetro obligatorio:

En una entrada de blog pública, el código anterior produciría el siguiente resultado:

El estado actual de un puesto visible públicamente

El estado actual de una entrada visible públicamente

En una entrada privada, el resultado sería el siguiente:

El estado actual de un puesto privado

El estado actual de una entrada privada

Jean-Baptiste Audras, autor de la nota de dev, advierte:

Ten en cuenta que los mensajes protegidos por contraseña se consideran visibles públicamente, mientras que los mensajes privados no lo son.

is_post_publicly_viewable()

La nueva función is_post_publicly_viewable() devuelve true si tanto is_post_status_viewable() como is_post_type_viewable() devuelven true. También nos permite determinar si una entrada específica es públicamente visible (es decir, si es visible para los usuarios que no han iniciado sesión).

is_post_publicly_viewable() acepta un parámetro opcional:

Un Nuevo Gancho Dinámico para Filtrar el Contenido de un Tipo de Bloque Específico

WordPress 5.7 introduce un nuevo gancho dinámico que permite a los desarrolladores filtrar el contenido de un tipo de bloque específico.

Este nuevo filtro render_block_{$this->name} es similar al filtro render_block existente, con una diferencia clave: render_block filtra el contenido de un solo bloque, mientras que el nuevo gancho dinámico filtra el contenido del tipo de bloque {$this->name}.

Para utilizar este filtro, debes proporcionar los siguientes parámetros:

La llamada de retorno devuelve el contenido del bloque modificado.

El siguiente ejemplo muestra un caso de uso de este filtro en un bloque de párrafos:

add_filter( 
	'render_block_core/paragraph', 
	function( $block_content, $block ) {
		$content  = '<div class="my-custom-wrapper">' . $block_content . '</div>';
		return $content;
	}, 
	10, 
	2 
);

En este ejemplo, el sufijo core/paragraph es el slug del tipo de bloque de párrafo core. Para los bloques personalizados, el slug debe ser algo así como my-custom-plugin/my-custom-block.

Consulta la nota de desarrollo para obtener una descripción más detallada y otros ejemplos de uso.

Nueva API para Robots

La metaetiqueta robots permite a los propietarios de los sitios controlar la forma en que una página web debe ser indexada y servida a los usuarios en los resultados de los motores de búsqueda (por cierto, asegúrate de consultar nuestra guía sobre SEO en WordPress).

WordPress 5.7 introduce una nueva API de robots que permite a los desarrolladores controlar esta metaetiqueta robots. La nueva API proporciona un filtro wp_robots para que los desarrolladores de temas puedan añadir sus directivas personalizadas a la etiqueta meta robots.

Además, la directiva max-image-preview:large se añade ahora por defecto a los sitios web configurados para ser visibles por los motores de búsqueda. Indica a los motores de búsqueda que muestren vistas previas de imágenes grandes en los resultados de búsqueda.

La directiva 'max-image-preview:large' en WordPress 5.7

La directiva ‘max-image-preview:large’ en WordPress 5.7

Los desarrolladores pueden eliminar la directiva max-image-preview:large utilizando el siguiente código:

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

La personalización de las directivas robots es bastante sencilla. El siguiente ejemplo de la nota de desarrollo muestra cómo añadir una directiva personalizada a la etiqueta meta:

add_filter( 
	'wp_robots', 
	function( $robots ) {
		$robots['follow'] = true;
		return $robots;
	}
);

El código anterior produciría la siguiente salida:

<meta name="robots" content="max-image-preview:large, follow">

También es posible eliminar las directivas existentes simplemente anulando los valores. El siguiente código desactiva la directiva max-image-preview:

function my_wp_robots_directives( $robots ) {
	unset( $robots['max-image-preview'] );
	$robots['follow'] = true;
	return $robots;
}
add_filter( 'wp_robots', 'my_wp_robots_directives' );

Encontrarás una descripción detallada de la metaetiqueta robots en el blog de Ahrefs y en la referencia de Google Search. Consulta la nota de desarrollo para obtener información adicional sobre la nueva API de robots de WordPress y las funciones obsoletas.

Enlaces para Restablecer la Contraseña

Una nueva función permite ahora a los administradores del sitio enviar enlaces para restablecer la contraseña por correo electrónico a cualquier usuario registrado. Esta función puede ser útil si un usuario no puedes acceder al enlace de restablecimiento de contraseña por cualquier motivo.

Los administradores del sitio pueden enviar un enlace para restablecer la contraseña por correo electrónico desde diferentes áreas. En primer lugar, encontrarás una nueva sección que proporciona un botón de envío de enlace de restablecimiento en cualquier pantalla de perfil de usuario.

Enviar enlace de reinicio en la pantalla de su perfil

Enviar enlace de reinicio en la pantalla de su perfil

Si todo va bien, deberías ver un aviso del administrador confirmando que el enlace de restablecimiento de la contraseña fue enviado por correo electrónico al usuario.

Un aviso del administrador confirma que el correo electrónico se ha enviado con éxito

Un aviso del administrador confirma que el correo electrónico se ha enviado con éxito

También puedes enviar un enlace para restablecer la contraseña desde la pantalla de usuarios.

Enviar enlace de restablecimiento de contraseña en la pantalla de usuarios

Enviar enlace de restablecimiento de contraseña en la pantalla de usuarios

Incluso puedes seleccionar varios usuarios y enviar enlaces de restablecimiento de contraseña en bloque.

Enviar enlace de restablecimiento de contraseña en acciones masivas

Enviar enlace de restablecimiento de contraseña en acciones masivas

Como se ha mencionado anteriormente, los usuarios recibirán un correo electrónico con un enlace para restablecer la contraseña. La siguiente imagen muestra un correo electrónico de restablecimiento de contraseña en la herramienta DevKinsta Email Inbox.

El correo electrónico de restablecimiento de contraseña en DevKinsta

El correo electrónico de restablecimiento de contraseña en DevKinsta

Los desarrolladores pueden utilizar los filtros retrieve_password_title y retrieve_password_message para personalizar el asunto y el mensaje del correo electrónico.

Mejoras Adicionales para los Desarrolladores

Nuevas Características para Pasar Atributos a las Etiquetas de Script

Varias funciones nuevas permiten ahora pasar atributos a las etiquetas <script> (es decir, async o nonce).

wp_get_script_tag()

wp_get_script_tag() carga una etiqueta script formateada e inyecta automáticamente el atributo type si el tema no ha declarado la compatibilidad con las etiquetas script de HTML5. Acepta una matriz de pares clave-valor que representan los atributos que se añaden a la etiqueta <script>.

Esta función se empareja con el nuevo filtro wp_script_attributes, que puede utilizarse para filtrar atributos.

wp_print_script_tag()

wp_print_script_tag() imprime una etiqueta de script formateada.

wp_get_inline_script_tag()

wp_get_inline_script_tag() envuelve el JavaScript en línea en una etiqueta de script.

Esta función tiene su correspondiente hook wp_inline_script_attributes que filtra los atributos a añadir a una etiqueta de script.

wp_print_inline_script_tag()

wp_print_inline_script_tag() imprime JavaScript en línea en una etiqueta de script.

wp_sanitize_script_attributes()

La nueva función wp_sanitize_script_attributes() se utiliza para sanear una matriz de atributos en una cadena de atributos. A continuación, pueden añadirse a una etiqueta de script.

Consulta la nota de desarrollo para obtener más información y ejemplos de uso.

Colores Estandarizados de WP-Admin

Como parte de un proyecto más amplio destinado a limpiar el CSS de WP-Admin, WordPress utiliza ahora una nueva paleta de colores estandarizada para WP-Admin. La nueva paleta de colores incluye 12 tonos de azul, verde, rojo y amarillo. También añade 13 tonos de grises, negros y blancos. Además, cumple con los requisitos mínimos de relación de contraste recomendados por WCAG 2.0.

Paleta de colores de WP-Admin

Paleta de colores de WP-Admin (Fuente de la imagen: ryelle)

En palabras de Jean-Baptiste Audras:

La estandarización de este conjunto de colores ayudará a los colaboradores a tomar decisiones de diseño coherentes y accesibles. Se anima a los desarrolladores de temas y plugins a utilizar esta nueva paleta de colores para mejorar la coherencia entre sus productos y el núcleo de WordPress.

Constante WP_MEMORY_LIMIT en Site Health

La constante WP_MEMORY_LIMIT especifica la cantidad máxima de memoria que puede consumir PHP.

No incluida también en versiones anteriores de WordPress, la constante WP_MEMORY_LIMIT ha sido añadida a la pestaña de información en Site Health.

WP_MEMORY_LIMIT en la pestaña Site Health Info

WP_MEMORY_LIMIT en la pestaña Site Health Info

Los cambios adicionales para los desarrolladores se enumeran en Varios cambios centrados en los desarrolladores y Cambios en la API REST en WordPress 5.7. Encontrarás una lista completa de notas para desarrolladores en la Guía de Campo de WordPress 5.7.

Nuevas características, nuevas API, seguridad, mejoras en la accesibilidad y en la interfaz de usuario, funciones y ganchos para desarrolladores... Hay muchas cosas buenas en WordPress 5.7 🎁 Echa un vistazo a nuestro resumen en profundidad 🤓Click to Tweet

Resumen

La cuota de mercado de WordPress sigue creciendo a un ritmo constante:

El 64,4% de los sitios web cuyo sistema de gestión de contenidos conocemos utilizan WordPress. Esto supone el 40,3% de todos los sitios web.

Es una prueba significativa de la salud del CMS, especialmente para aquellos que construyen su negocio sobre WordPress. Y también es una excelente razón para prestar atención a lo que ocurre en el ecosistema de WordPress.

WordPress 5.7 añade montones de nuevas funciones y mejoras tanto para los usuarios como para los desarrolladores, pero eso es solo una muestra de lo que podemos esperar ver en 2021.

Ahora depende de ti. ¿Nos hemos dejado algo importante? ¿Cuáles son tus cambios y características favoritas de WordPress 5.7?


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes