Novedades de WordPress 5.7 (carga diferida, HTTPS, actualizaciones de la interfaz de usuario, nuevas API y mucho más)

Estamos acostumbrados a ver cambios pequeños y no tan pequeños y nuevas funciones agregadas a WordPress Core cada vez que se lanza una nueva versión. WordPress 5.7 no es una excepción, y es genial ver cómo cada nueva versión nos acerca un poco más al panorama general.

Con varias versiones del Editor de bloques fusionadas en Core, la nueva versión mejora la experiencia de edición general y permite a los desarrolladores crear bloques más avanzados y agregar personalizaciones más poderosas al editor de bloques.

Aparte del editor, WordPress 5.7 también presenta toneladas de cambios y excelentes características, que incluyen iframes de carga diferida, actualizaciones de la interfaz de inicio de sesión y registro, enlaces de restablecimiento de contraseña, una gran cantidad de correcciones de errores y mucho más.

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

Si desea profundizar en el primer lanzamiento importante de 2021, consulte el ciclo de desarrollo de WordPress 5.7, el resumen de planificación y la guía de campo.

Entonces, mientras seguimos esperando la edición completa del sitio (en Core by WordPress 5.8), ¡pongámonos cómodos y disfrutemos de las novedades de WordPress 5.7!

WordPress 5.7 es el primer lanzamiento importante del año 🥳 Consulte las nuevas funciones y descubra lo que podemos esperar de WordPress en 2021 🎁Haz clic para tuitear

Novedades del editor de bloques

WordPress 5.7 trae muchas versiones del complemento Gutenberg a Core. Sería imposible mencionar todas esas adiciones aquí además de los muchos cambios y correcciones de errores agregados al editor, pero puede 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, repasemos nuestra lista cuidadosamente seleccionada de las características y cambios más interesantes agregados al editor de bloques con WordPress 5.7:

Funciones, mejoras y API de Block Variations

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

Esta característica funciona en conjunto con la API Block Variations, una poderosa herramienta que permite a los desarrolladores agregar, administrar o eliminar variaciones de bloques.

WordPress 5.7 presenta varias mejoras, funciones y nuevas API para variaciones de bloques, lo que proporciona una mejor interfaz de usuario y herramientas más potentes para los desarrolladores. Vamos a sumergirnos.

Transformaciones de variación de bloque

Introducido por primera vez con Gutenberg 9.4 y ahora agregado a WordPress 5.7, un Transformar a la variación El conmutador aparece debajo de la tarjeta de bloque para los bloques que admiten esta función.

Al registrar una nueva variación de bloque, los desarrolladores de bloques pueden agregar el conmutador de variaciones al inspector de bloques agregando el nuevo transform opción a la variación de bloque scope , 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, aparece una variación de bloque en dos áreas de la interfaz de usuario del editor: el insertador de bloques y el inspector de bloques.

Para obtener una descripción general detallada de las transformaciones de variación de bloques, consulte también PR # 26687.

La información del bloque ahora coincide con las variaciones del bloque

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

Los bloques incrustados y los iconos sociales se crean como variaciones de bloques; proporcionan buenos ejemplos de información de bloques coincidentes de WordPress con variaciones de bloques.

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

Nuevas API de variaciones de bloque

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

El nuevo isActive La propiedad es una función que acepta los atributos de un bloque. Puede utilizar los atributos de la variación para determinar si una variación está activa (consulte también Referencia de API de bloque).

Los desarrolladores de bloques pueden utilizar esta función para mostrar información de variación en lugar de información de bloque. Un ejemplo podría ser el embed bloque, donde podemos cambiar el providerNameSlug valor del atributo (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, el isActive La propiedad 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 useBlockDisplayInformation hook devuelve información sobre un bloque determinado. El nuevo gancho tiene en cuenta la isActive propiedad de una variación de bloque y devuelve el title, icon, y description.

Estos cambios afectan la tarjeta de bloque (herramientas del inspector), la vista de lista de navegación (barra superior) y las rutas de navegación (ver también PR # 27469).

Nuevas funciones del bloque de botones

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

Dimensiones del botón

Un nuevo control disponible en la barra lateral de configuración ahora nos permite establecer un porcentaje de ancho para los botones alojados en bloques de botones (Gutenberg 9.4).

Simplemente seleccione un botón y elija 25%, 50%, 75% o 100%. Los porcentajes se refieren al contenedor principal. La siguiente imagen muestra diferentes combinaciones de dimensiones de botones.

Para obtener más información técnica, consulte las solicitudes de extracción n. ° 25999 y n. ° 26781.

Disposición vertical

Esta nueva característica agrega variaciones para la orientación vertical al bloque 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 de bloques (Gutenberg 9.6).

Mejoras en los iconos sociales

WordPress 5.7 agrega nuevas opciones de personalización a los iconos sociales: compatibilidad con tamaños personalizados y colores personalizados.

Tamaño de los iconos sociales

Con el bloque de Iconos sociales seleccionado, la barra de herramientas del bloque ahora proporciona un Tamaño menú de opciones con tamaños disponibles (Gutenberg 9.4).

Colores personalizados en iconos sociales

El mismo bloque ahora admite configuraciones de color, lo que nos permite establecer diferentes colores personalizados para iconos y fondos (Gutenberg 9.9).

Ahora puede usar la paleta de colores del tema para los íconos sociales, evitando que los colores de los íconos entren en conflicto con la combinación de colores de su sitio web (consulte también PR # 28084).

Soporte de tamaño de fuente

WordPress 5.7 agrega compatibilidad con el tamaño de fuente tanto para bloques de lista como de código.

Tamaño de fuente en el bloque de lista

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

Los usuarios pueden elegir uno de los tamaños de fuente disponibles para los elementos de la lista o establecer un tamaño de fuente personalizado expresado en píxeles. El botón «Restablecer» restaura los valores predeterminados.

Soporte de tamaño de fuente en bloque de código

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

La implementación de esta característica también permite usar variables de estilo globales en el CSS de los bloques de código (ver también PR # 27294). La imagen a continuación muestra un bloque de código en la interfaz con el tema Twenty Twenty instalado.

Alineación de altura completa en bloque de cubierta

WordPress 5.7 presenta un nuevo componente de alineación de barra de herramientas de altura completa. Primero se agregó al editor de bloques con Gutenberg 9.5. Ahora, se fusionó con Core y se implementó en el bloque Cover.

Si alterna el botón de bloqueo de la barra de herramientas, sin perder de vista el control de altura mínima, verá que la alineación de altura completa es solo una abreviatura de 100vh (lea más sobre las longitudes de porcentaje de la ventana gráfica).

Puede utilizar la alineación de altura completa en combinación con otras configuraciones de control como fondo fijo, 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 admite arrastrar y soltar 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).

Tenga en cuenta que arrastrar y soltar solo funciona si su tema admite patrones de bloques.

Bloque espaciador semitransparente

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

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

Mejoras adicionales en el editor de bloques que vale la pena mencionar

Nuestra lista no cubrirá todas las funciones y mejoras fusionadas en Core, así que asegúrese de consultar la documentación oficial y las notas de los desarrolladores para obtener un registro más completo de las novedades del editor de bloques con WordPress 5.7.

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

Iframes de carga diferida

La carga diferida es una técnica de optimización que pospone la carga de recursos no críticos hasta que están en la ventana gráfica del usuario. Las imágenes de carga diferida y los recursos integrados no se descargan ni procesan hasta que se necesitan. Puede mejorar significativamente el rendimiento del sitio, especialmente para sitios web con imágenes y videos de alta resolución.

Antes de la carga diferida nativa, los desarrolladores solo podían cargar activos de forma diferida a través de JavaScript. Los usuarios de WordPress se vieron obligados a utilizar un complemento para lograr el mismo efecto. Sin embargo, dado que la carga diferida se convirtió en un estándar, las imágenes y los iframes se pueden cargar de forma diferida simplemente agregando el loading="lazy" atribuir a img y iframe etiquetas.

WordPress 5.5 introdujo la carga diferida de imágenes nativas en WordPress Core, agregando automáticamente el loading="lazy" atribuir a img etiquetas con width y height atributos especificados.

Ahora, desde WordPress 5.7, la carga diferida se extiende a iframe etiquetas. En cuanto a las imágenes, para evitar cambios de diseño, loading="lazy" solo se agregará a aquellos iframe etiquetas que tienen width y height atributos especificados.

En WordPress, la carga diferida nativa funciona con iframes en los siguientes contextos:

• iframes en el contenido de la publicación (the_content)
• iframes en extractos de publicaciones (the_excerpt)
• iframes en widgets de texto (widget_text_content)

En WordPress, la mayoría de iframes se basan en la integración oEmbed, que transforma automáticamente una URL en la correspondiente iframe etiqueta. Desafortunadamente, no todos los servicios web ofrecen width y height atributos para iframes; esto evita que WordPress agregue el loading atribuir a esos iframes.

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

En palabras de Felix Arntz:

El marcado de esos iframe etiquetas está controlado por el servicio web respectivo, y solo algunos de esos servicios web siguen las mejores prácticas de proporcionar width y height atributo. Dado que WordPress no puede adivinar las dimensiones del recurso incrustado, el loading="lazy" El atributo solo se agregará si el oEmbed iframe viene con ambos atributos de dimensión presentes.

La siguiente imagen muestra un iframe etiqueta sin la loading="lazy" atributo:

Iframes de carga diferida para desarrolladores

Desde la perspectiva de un desarrollador, la nueva función requirió varios cambios, que incluyen:

• La wp_filter_content_tags() El comportamiento de la función se ha ampliado para agregar el loading atribuir a iframe etiquetas. La loading El atributo anteriormente solo se agregó a img etiquetas.
• Por defecto, el wp_lazy_loading_enabled() la función ahora regresa true por iframe etiquetas (cuando está habilitado).
• El nuevo wp_iframe_tag_add_loading_attr() La función permite la adición de la loading atribuir a iframe etiquetas (similar a wp_img_tag_add_loading_attr()—Ver Referencia de código).
• La wp_iframe_tag_add_loading_attr El filtro permite la personalización de la carga diferida en iframes específicos. Regresando false o una cadena vacía no agregará el atributo.

Puede anular el comportamiento predeterminado utilizando el wp_lazy_loading_enabled filtro, que ahora devuelve true por iframe etiquetas.

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 puede utilizar el nuevo wp_iframe_tag_add_loading_attr filtro, que permite la personalización de un determinado iframe comportamiento de la etiqueta. Por ejemplo, puede deshabilitar la carga diferida para videos de YouTube en un contexto particular.

El siguiente código se basa en un ejemplo de la nota del desarrollador y muestra cómo deshabilitar la carga diferida para iframes que incorporan videos 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
);

Tenga en cuenta que, en general, no todos los navegadores web admiten la carga diferida en el momento de redactar este documento. Puede ver a continuación que Firefox y Safari solo admiten la carga diferida de imágenes.

Migración de sitios con un clic de HTTP a HTTPS

Desde 5.7, WordPress detectará si el entorno de un sitio web es compatible con HTTPS. Si es así, la sección Estado de HTTPS en la herramienta Estado 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 nos evita encontrar advertencias de contenido mixto.

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

Migración de HTTP a HTTPS para desarrolladores

Junto con la nueva función automática accesible desde la herramienta Site Health, 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.

El nuevo wp_is_using_https() devuelve la función true si tanto la «Dirección del sitio» (home_url()) y «Dirección de WordPress» (site_url()) tienen una URL que contiene https. Felix Arntz ilustra claramente esta nueva característica en la nota del desarrollador:

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

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

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

Como se mencionó anteriormente, las URL codificadas en el contenido del sitio se cambian sobre la marcha, todo gracias a dos funciones nuevas: 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 necesitaría actualizar manualmente la «Dirección del sitio» y la «Dirección de WordPress» para incluir HTTPS en lugar de HTTP. Sin embargo, para facilitar aún más las cosas, WordPress 5.7 presenta el nuevo wp_update_urls_to_https() función.

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

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

Nuevas funciones relacionadas con los padres

WordPress 5.7 presenta dos nuevas funciones relacionadas con Post Parent. Son fáciles de usar y lo ayudan a reducir la lógica en complementos y temas.

has_parent_post ()

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

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

get_parent_post ()

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

<a href="https://kinsta.com/blog/wordpress-5-7/<?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, usaríamos estas funciones en conjunto. Puede ejecutar una prueba usted mismo agregando el siguiente código de la nota de desarrollo a la single.php archivo de plantilla de su tema:

<?php if ( has_parent_post( get_the_ID() ) ) : ?>
	<p><a href="https://kinsta.com/blog/wordpress-5-7/<?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 trae varias mejoras a la función de inicio de sesión y registro, con una interfaz de restablecimiento de contraseña mejorada, nuevos enlaces y otros cambios menores.

Pantalla de restablecimiento de contraseña

La Pantalla de restablecimiento de contraseña ahora proporciona dos botones: Generar contraseña y Guardar contraseña. El primer botón genera una nueva contraseña segura con cada clic, mientras que el segundo botón guarda su contraseña. Este cambio debería resultar en una experiencia mejorada de restablecimiento de 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:

Nuevos filtros

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

El nuevo login_site_html_link El gancho de filtro nos permite reemplazar completamente el HTML generando el enlace «Volver a {site_name}» con un código / enlace personalizado. Ahora los desarrolladores pueden configurar texto personalizado para el enlace, así como cambiar el enlace en sí. Puede 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 siguiente imagen muestra la salida en la pantalla:

Para cambios adicionales, verifique 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 se puede ver públicamente

WordPress 5.7 presenta dos nuevas funciones que permiten a los desarrolladores verificar si una publicación se puede ver públicamente.

is_post_status_viewable ()

El nuevo is_post_status_viewable() La función permite a los desarrolladores determinar si una publicación se puede ver públicamente según el estado de la publicación.

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

Para tipos de postes integrados, is_post_status_viewable() comprueba el public atributo. Para tipos de publicaciones personalizadas, verifica la publicly_queryable atributo en su lugar.

Probamos 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:

• $post_status (cadena | stdClass) El nombre u objeto del estado de la publicación.

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

En una publicación privada, el resultado sería el siguiente:

Jean-Baptiste Audras, el autor de la nota de desarrollo, advierte:

Tenga en cuenta que las publicaciones protegidas con contraseña se consideran visibles públicamente, mientras que las publicaciones privadas no.

is_post_publicly_viewable ()

El nuevo is_post_publicly_viewable() devuelve la función true si ambos is_post_status_viewable() y is_post_type_viewable() regreso true. También nos permite determinar si una publicación específica es visible públicamente (es decir, si es visible para los usuarios desconectados).

is_post_publicly_viewable() acepta un parámetro opcional:

• $post (cadena | stdClass) Un ID de publicación u objeto. Por defecto, el global $post se pasa el objeto.

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.

Esta fresca render_block_{$this->name} filtro es similar al existente render_block filtro, 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, debe proporcionar los siguientes parámetros:

• $block_content (cuerda): El contenido del bloque que se agregará.
• $block (formación): El bloque completo, incluidos el nombre y los atributos.

La devolución de llamada devuelve el contenido del bloque modificado.

El siguiente ejemplo muestra el uso de un caso para este filtro en un bloque de párrafo:

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 core/paragraph sufijo es la barra del tipo de bloque de párrafo principal. Para bloques personalizados, la babosa debería ser algo así como my-custom-plugin/my-custom-block.

Consulte la nota del desarrollador para obtener una descripción más detallada y ejemplos de uso adicionales.

Nueva API de robots

La robots La metaetiqueta permite a los propietarios de sitios controlar cómo se debe indexar y entregar una página web a los usuarios en los resultados del motor de búsqueda (por cierto, asegúrese de consultar nuestra guía sobre SEO de WordPress).

WordPress 5.7 presenta una nueva API de Robots que permite a los desarrolladores controlar esto robots metaetiqueta. La nueva API proporciona una wp_robots filtro para que los desarrolladores de temas agreguen sus directivas personalizadas al robots metaetiqueta.

Además, el max-image-preview:large La directiva ahora se agrega de forma predeterminada 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.

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

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

Personalizando el robots directivas es bastante sencillo. El siguiente ejemplo de la nota del desarrollador muestra cómo agregar una directiva personalizada a la metaetiqueta:

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

El código anterior produciría el siguiente resultado:

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

También es posible eliminar directivas existentes simplemente desarmando valores. El siguiente código deshabilita el max-image-preview directiva:

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á una descripción detallada de la robots metaetiqueta en el blog de Ahrefs y en la referencia de búsqueda de Google. Consulte la nota de desarrollo para obtener información adicional sobre la nueva API de robots de WordPress y las funciones obsoletas.

Restablecer enlaces de contraseña

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

Los administradores del sitio pueden enviar un enlace para restablecer la contraseña por correo electrónico desde diferentes áreas. Primero, encontrará una nueva sección que proporciona una Enviar enlace de reinicio en cualquier pantalla de perfil de usuario.

Si todo va bien, debería ver un aviso de administrador que confirme que el enlace de restablecimiento de contraseña se envió por correo electrónico al usuario.

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

Incluso puede seleccionar varios usuarios y enviar enlaces de restablecimiento de contraseña de forma masiva.

Como se mencionó 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 Bandeja de entrada de correo electrónico de DevKinsta.

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

Mejoras adicionales para desarrolladores

Nuevas funciones para pasar atributos a etiquetas de script

Varias funciones nuevas ahora permiten el paso de atributos a <script> etiquetas (es decir async o nonce).

wp_get_script_tag ()

wp_get_script_tag() carga un formato script etiqueta e inyecta automáticamente el type atributo si el tema no ha declarado compatibilidad con HTML5 script etiquetas. Acepta una matriz de pares clave-valor que representan los atributos que se agregan al <script> etiqueta.

Esta función se empareja con la nueva wp_script_attributes filter, que se puede utilizar para filtrar atributos.

wp_print_script_tag ()

wp_print_script_tag() imprime un formato script etiqueta.

wp_get_inline_script_tag ()

wp_get_inline_script_tag() envuelve JavaScript en línea en un script etiqueta.

Esta función tiene un correspondiente wp_inline_script_attributes gancho que filtra los atributos que se agregarán a una etiqueta de secuencia de comandos.

wp_print_inline_script_tag ()

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

wp_sanitize_script_attributes ()

El nuevo wp_sanitize_script_attributes() La función se utiliza para desinfectar una serie de atributos en una cadena de atributos. Luego se pueden agregar a un script etiqueta.

Consulte la nota de desarrollo para obtener información adicional y ejemplos de uso.

Colores estandarizados de WP-Admin

Como parte de un proyecto más grande con el objetivo de limpiar WP-Admin CSS, WordPress ahora usa una nueva paleta de colores WP-Admin estandarizada. La nueva paleta de colores incluye 12 tonos de azul, verde, rojo y amarillo. También agrega 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.

En palabras de Jean-Baptiste Audras:

Estandarizar en 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 complementos a utilizar esta nueva paleta de colores, para una mejor coherencia entre sus productos y WordPress Core.

Constante WP_MEMORY_LIMIT en el estado del sitio

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

No incluido en versiones anteriores de WordPress, el WP_MEMORY_LIMIT La constante se ha agregado a la pestaña Información en el estado del sitio.

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

Nuevas características, nuevas API, seguridad, accesibilidad y mejoras en la interfaz de usuario, funciones y enlaces para desarrolladores … Hay muchas cosas geniales en WordPress 5.7 🎁 Consulte nuestra descripción general detallada 🤓Haz clic para tuitear

Resumen

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

WordPress es utilizado por el 64,4% de todos los sitios web cuyo sistema de gestión de contenido conocemos. Este es el 40,3% de todos los sitios web.

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

WordPress 5.7 agrega toneladas de nuevas características y mejoras tanto para los usuarios como para los desarrolladores, pero eso es solo una muestra de lo que podemos esperar ver en 2021.

Depende de ti ahora. ¿Perdimos algo importante? ¿Cuáles son sus cambios y características favoritos de WordPress 5.7?