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!
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.
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.
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.
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.
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.
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).
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.
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).
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).
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).
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).
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).
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.
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.
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).
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).
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).
Esta característica debería facilitar la identificación del bloque espaciador sobre cualquier color de fondo.
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:
- Activar automáticamente el modo oscuro cuando el fondo oscuro está activado (PR #28233)
- Iconos de Patreon, Telegram y TikTok añadidos a los iconos sociales (PR #26118)
- Todas las unidades son compatibles con la configuración del tamaño de la fuente (PR #26475)
- Las vistas previas de las transformaciones en bloque (PR #27861)
- Mejora de la vista previa del patrón de bloques en el insertador de bloques (PR #27204)
- Se ha mejorado la modalidad de Opciones y se ha cambiado el nombre a Preferencias
- Cambios en @wordpress/data API
- Cambios en la API de Inner Blocks
- Mejoras en la función de importación/exportación
- Cambios en los componentes y bloques del editor de bloques
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.
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:
- iframes en el contenido de las entradas (
the_content) - iframes en los extractos de las entradas (
the_excerpt) - iframes en widgets de texto (
widget_text_content)
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":
En palabras de Felix Arntz:
El marcado de esas etiquetas
iframeestá controlado por el servicio web respectivo, y solo algunos de esos servicios web siguen la mejor práctica de proporcionar el atributo dewidthyheight. Como WordPress no puede adivinar las dimensiones del recurso incrustado, el atributoloading="lazy"solo se añadirá si la etiquetaiframeoEmbed viene con ambos atributos de dimensión presentes.
La siguiente imagen muestra una etiqueta iframe sin el atributo loading="lazy":
Lazy Loading de iframes para Desarrolladores
Desde el punto de vista de los desarrolladores, la nueva función requería varios cambios, entre ellos:
- Se ha ampliado el comportamiento de la función
wp_filter_content_tags()para añadir el atributoloadinga las etiquetasiframe. Anteriormente, el atributo deloadingsolo se añadía a las etiquetasimg. - Por defecto, la función
wp_lazy_loading_enabled()ahora devuelvetruepara las etiquetasiframe(cuando están activadas). - La nueva función
wp_iframe_tag_add_loading_attr()permite añadir el atributo deloadinga las etiquetasiframe(similar awp_img_tag_add_loading_attr()-ver Referencia de Código). - El filtro
wp_iframe_tag_add_loading_attrpermite personalizar la lazy loading en iframes específicos. Devolverfalseo una cadena vacía no añadirá el atributo.
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.
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.
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 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:
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:
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:
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.
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:
$post_status(string|stdClass) ) El nombre u objeto del estado de la publicación.
En una entrada de blog pública, el código anterior produciría el siguiente resultado:
En una entrada privada, el resultado sería el siguiente:
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:
$post(string|stdClass) Un ID de puesto u objeto. Por defecto, se pasa el objeto global$post.
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:
$block_content(cadena): El contenido del bloque que se va a añadir.$block(array): El bloque completo, incluyendo el nombre y los atributos.
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.
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.
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.
También puedes enviar un enlace para restablecer la contraseña desde la pantalla de usuarios.
Incluso puedes seleccionar varios usuarios y enviar enlaces de restablecimiento de contraseña en bloque.
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.
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.
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.
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.
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?
Deja una respuesta