¿Qué hay de nuevo en WordPress 5.5? – Una profunda inmersión en una publicación (épica)

Con WordPress 5.5 a la vuelta de la esquina, es hora de que introduzcamos los cambios más notables y las características que se añaden a Core con el segundo lanzamiento de WordPress del año.

Hoy en día, estamos acostumbrados a ver muchas adiciones al editor de bloques en cada lanzamiento de WordPress. ¡WordPress 5.5 no es una excepción!

Esta versión también trae toneladas de cambios no relacionados con el editor que deberían tener un gran impacto en la forma en que usamos el CMS.

Si bien WordPress 5.5 aporta muchos cambios al núcleo de WordPress, varias características esperadas con 5.5 han sido retrasadas y eliminadas de esta versión debido a varios problemas no resueltos. Así que, la edición completa del sitio, el bloque de navegación, la pantalla de navegación y la pantalla de widgets no son parte de WordPress 5.5.

Si quieres leer más sobre el ciclo de desarrollo de WordPress 5.5, consulta los siguientes enlaces:

• 7 de julio de 2020: Beta 1
• 14 de julio de 2020: Beta 2
• 21 de julio de 2020: Beta 3
• 27 de julio de 2020: Beta 4
• 28 de julio de 2020: RC 1
• 4 de agosto de 2020: RC 2
• 10 de agosto de 2020: Prueba de simulación para el lanzamiento de WordPress 5.5
• 11 de agosto de 2020: Fecha límite para WordPress 5.5 «Eckstine«

Entonces, ¿qué hay de nuevo en WordPress 5.5?

¿Qué hay de nuevo con el editor de bloques?

Con el lanzamiento final de WordPress 5.5, se añadirán diez versiones del plugin de Gutenberg al núcleo, aportando un gran número de mejoras en la interfaz de usuario, características, mejoras y correcciones de errores que afectan a todas las expectativas de la experiencia de edición, desde la usabilidad a la funcionalidad y el rendimiento.

Sería casi imposible mencionar todos estos cambios aquí, así que en este post, sólo encontrarás una selección de nuestras nuevas características y mejoras favoritas.

Para una lista más completa de las mejoras y características añadidas al editor de bloques con WordPress 5.5, ve los anuncios oficiales de los lanzamientos de los plugins: 7.5, 7.6, 7.7, 7.8, 7.9, 8.0, 8.1, 8.2, 8.3, 8.4, 8.5.

Dicho esto, aquí cubriremos las siguientes adiciones traídas al editor del bloques con WordPress 5.5:

1. Nuevo diseño de la interfaz de usuario
2. Herramientas de diseño de bloques
3. Edición de imágenes en línea
4. Categorías de bloques y nuevo panel de inserción de bloques
5. El Directorio de Bloqueo y los Plugins de Bloqueo
6. Patrones de bloqueo

Nuevo diseño de la interfaz de usuario

Cada versión del plugin de Gutenberg trae pequeñas y no tan pequeñas mejoras que están cambiando silenciosamente la experiencia de edición en general. Muchos de estos cambios se van a fusionar ahora en el núcleo de WordPress. Así que, cuando inicie el editor de bloques en WordPress 5.5, una interfaz ligeramente diferente debería llamar tu atención. Encontrarás:

• Una barra de herramientas de bloqueo simplificada
• Contraste de color más fuerte
• Nuevos iconos
• Movedores de bloques
• Los elementos circundantes
• Avances del dispositivo
• Mejorado en arrastrar y soltar
• Estilos de enfoque de bloque mejorados y unificados en toda la interfaz de usuario
• Capacidad de formatear varios bloques a la vez
• Mejor rendimiento

Añadidos al editor de bloques con Gutenberg 7.7, los mencionados anteriormente son sólo algunos de los muchos cambios que afectan a la experiencia de edición.

Otros cambios adicionales también incluyen:

Opciones de subíndice y superíndice

Las opciones de formato para el texto de subíndice y superíndice están ahora disponibles a través de los controles de Rich Text (Gutenberg 8.0).

Selección del bloque de secundario

Un nuevo botón de la barra de herramientas ahora aparece al pasar el cursor sobre el lado izquierdo de la barra de herramientas del bloque. El nuevo botón permite seleccionar bloques secundarios en contextos anidados (Gutenberg 8.3).

Herramientas de diseño de bloques

Varias herramientas de diseño han sido añadidas al plugin de Gutenberg en los últimos meses y ahora van a ser incluidas en el núcleo con WordPress 5.5.

Control de altura y gradientes de fondo

Un primer conjunto de herramientas proporciona el control sobre las dimensiones y el color de fondo de varios bloques (Gutenberg 7.9).

Controles de color de los paddings y enlaces

Dos características adicionales están aterrizando en el núcleo (Gutenberg 8.3) pero en el momento de escribir este artículo todavía están marcadas como experimentales:

• Control de padding para el bloque de cobertura.
• Control de color de los enlaces para los bloques de Párrafo, Encabezado, Grupo, Columnas y Medios y Texto.

El control de padding y el control de color de los enlaces están desactivados por defecto y los desarrolladores tienen que declarar explícitamente su apoyo, como se explica en el Manual del Editor de Bloques.

Si quieres añadir controles de padding para el bloque de la portada a tus temas, simplemente añade la siguiente línea a las funciones de tu tema.php:

add_theme_support( 'experimental-custom-spacing' );

Si quieres habilitar el control de color de los enlaces para los bloques de Párrafo, Encabezado, Grupo, Columnas y Medios y Texto, sólo tienes que añadir la siguiente línea al archivo de funciones del tema:

add_theme_support( 'experimental-link-color' );

Unidades personalizadas y alturas de línea personalizadas

Esta nueva característica permite establecer los valores de altura px, em, rem, vw y vh para el bloque de cobertura (Gutenberg 7.9). El % también está soportado pero se omite debido a la impredecible representación de las alturas porcentuales.

Con el control de altura mejorado, puedes saltar los valores en 10 manteniendo pulsada la tecla Shift mientras pulsas up o down.

Los desarrolladores pueden añadir soporte para las Unidades Personalizadas definiendo la bandera de soporte de custom-units personalizadas:

add_theme_support( 'custom-units' );

También puede establecer unidades específicas personalizadas:

add_theme_support( 'custom-units', 'rem', 'em' );

Los desarrolladores también pueden añadir alturas de línea personalizadas para el encabezamiento y los párrafos definiendo la bandera de soporte de altura de custom-line-height personalizada:

add_theme_support( 'custom-line-height' );

Edición de imágenes en línea

Se ha añadido una nueva función de edición al editor de bloques con Gutenberg 8.4 que permite a los usuarios editar imágenes directamente desde el bloque de imágenes.

Ahora se ha fusionado con el núcleo y, a partir de WordPress 5.5, puedes recortar, rotar, ampliar y ajustar las posiciones de las imágenes sin necesidad de iniciar la Biblioteca Multimedia, lo que resulta en una experiencia de edición más rápida.

Si publicas toneladas de fotos, sin duda disfrutarás de esta función.

Sólo tienes que hacer clic en el botón Recortar en la barra de herramientas de la imagen y tendrás acceso a las nuevas funciones de edición. Cuando estés satisfecho con tus personalizaciones, aplica tus cambios y listo.

WordPress guardará una nueva imagen como archivo adjunto en la Biblioteca Multimedia y copiará los detalles de la imagen original (título, descripción, pie de foto, texto alternativo y datos EXIF). Esto te da un control completo sobre las nuevas versiones de la imagen.

Categorías de bloques y nuevo panel de inserción de bloques

Un panel de inserción de bloques rediseñado muestra los bloques y patrones por categorías, mejorando significativamente la experiencia de edición y haciendo que los bloques y patrones sean más fáciles de encontrar (Gutenberg 8.3).

El Directorio de Bloqueo y los Plugins de Bloqueo

Con la implementación del directorio de bloques, puedes encontrar, instalar y añadir bloques de terceros directamente desde el insertador de bloques.

Cuando busques un bloque, si no lo has instalado ya, se te pedirá una lista de plugins disponibles en el directorio de plugins. Esos plugins se denominan «plugins de bloque» y puedes agregarlos a tu editor con un solo clic.

Gracias a esta nueva e impresionante característica, ahora puedes construir tus propios bloques y publicarlos en el directorio de plugins, haciendo que tus creaciones estén disponibles para toda la comunidad de WordPress.

La buena noticia es que, para crear tus bloques personalizados, no necesitas ser un gurú del PHP. Sólo necesitas tener algún conocimiento práctico de JavaScript.

¿No estás seguro de cómo empezar a desarrollar tus propios bloques? La impresionante comunidad de WordPress te cubre con un fácil tutorial paso a paso.

La primera versión del tutorial de bloques ya está disponible en el manual oficial del editor de bloques para ayudarte a aprender los fundamentos del desarrollo de bloques. Puedes leer más sobre el directorio de bloques y el desarrollo de plugins de bloque en el blog Make WordPress Plugins.

Patrones de bloque

En marzo de 2020, Gutenberg 7.7 y Gutenberg 7.8 introdujeron los patrones de bloque y el API de patrones de bloque para temas y plugins.

Los patrones de bloques son diseños de bloques predefinidos que permiten a los usuarios añadir rápidamente estructuras complejas de bloques anidados a sus páginas. Su intención es ayudar a los escritores de contenido y administradores de sitios a superar el «síndrome de la página en blanco» y construir diseños profesionales y vistas avanzadas con facilidad.

Deberíamos ver los patrones de bloque en su mejor momento con la edición completa del sitio.

Una clara explicación de para qué sirven los patrones de bloques viene de Mathias Ventura, arquitecto principal del proyecto Gutenberg:

Una aclaración: la configuración de los «patrones de bloques» se refiere menos a las partes de la plantilla (que son estructuralmente significativas) y más a los elementos de diseño general hechos de bloques más pequeños. Una vez insertados, no se almacenan por separado. Por ejemplo, una imagen de «Portada» que combina unos pocos bloques para lograr un aspecto específico que de otra manera le llevaría al usuario algún trabajo. Piense más bien en una colección de diseños que pueden añadirse en cualquier lugar sin que representen necesariamente una parte reutilizable de una plantilla temática.

A diferencia de las partes de las plantillas, los patrones de bloque son elementos de diseño que deberían ayudar a los administradores de los sitios y a los creadores de contenido a acelerar y mejorar la experiencia de edición.

Lanzado con Gutenberg 7.7, al principio Block Patterns apareció en un plugin de barra lateral. Más tarde, con el lanzamiento de Gutenberg 8.0, pasaron a un insertador de bloques renovado que ahora aparece como un panel colocado en el lado izquierdo del editor, como se muestra en la imagen de abajo:

En su etapa inicial, los patrones de bloque vienen con un conjunto muy limitado de patrones. De todas formas, aportarán una enorme mejora a la experiencia de edición, y con suerte, se añadirán más en un futuro próximo.

Al igual que los bloques regulares, los patrones se pueden buscar y vienen organizados en las siguientes categorías:

• Texto
• Héroe
• Columnas
• Botones
• Galería
• Características
• Testimonios
• Sin categoría

Además de los patrones de bloques incorporados, los desarrolladores de WordPress pueden proporcionar sus temas y plugins con patrones personalizados aprovechando una nueva API.

Puedes registrar tus patrones personalizados utilizando la función register_block_pattern y register_block_pattern_category para las categorías.

register_block_pattern toma dos argumentos:

1. El nombre del patrón.
2. Una serie de propiedades de los patrones.

Las propiedades incluyen lo siguiente:

• title
• content
• description
• categories
• keywords
• viewportWidth

La categoría register_block_pattern_category toma dos argumentos, también:

1. El nombre de la categoría del patrón.
2. Una serie de propiedades.

La API también proporciona dos funciones para desregistrar patrones y categorías: unregister_block_pattern y unregister_block_pattern_category.

La forma en que puedes construir tus propios patrones de bloques es bastante sencilla. Por ejemplo, copia y pega el siguiente código en un plugin personalizado o en un archivo de funciones de un tema secundario, y luego cambia el nombre del patrón según tus preferencias.

add_action( 'init', function(){

	register_block_pattern_category( 
		'kinsta', 
		array( 'label' => __( 'Kinsta stuff', 'kinsta-pattern' ) ) );

	register_block_pattern(
	'kinsta-pattern/my-custom-pattern',
	array(
		'title'			=> __( 'Two Kinsta buttons', 'kinsta-pattern' ),
		'description'	=> _x( 'Two nice buttons.', 'Kinsta Buttons', 'kinsta-pattern' ),
		'content'		=> "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'kinsta-pattern' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'kinsta-pattern' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
		'categories'	=> array( 'kinsta' ),
	)
	);
});

El código anterior es una simple personalización del fragmento original de la Referencia de la API del bloque. Como puedes ver, no se requiere ningún JavaScript.

Véase también Block Patterns en WordPress 5.5.

Lazy loading de la imagen nativa en el núcleo de WordPress

Lazy loading es una técnica de optimización que difiere la carga de recursos no críticos. Esto significa que el navegador recibe instrucciones de cargar el contenido visible en la página de carga y aplazar la descarga y la representación de las imágenes colocadas debajo del pliegue hasta que sean realmente necesarias.

Antes de lazy loading nativa, los desarrolladores web podían cargar con lazy loading los activos a través de JavaScript, utilizando la API de IntersectionObserver o usando manejadores de eventos de scroll, resize y cambio orientationchange.

Pero desde que lazy loading se convirtió en un estándar, ya no necesitamos escribir código personalizado o usar librerías JavaScript y las imágenes de lazy loading pueden ser implementadas usando el nuevo atributo de loading en las etiquetas img e iframe.

El atributo loading determina si el navegador debe cargar un recurso inmediatamente o esperar hasta que se cumplan algunas condiciones. Actualmente soporta los siguientes valores:

• lazy: espera hasta que se cumplan algunas condiciones
• eager: cargar el recurso inmediatamente

En el momento de escribir este artículo, lazy loading nativa es soportada por Microsoft Edge, Firefox, Google Chrome, el navegador Opera, el navegador Android y Chrome para Android.

Antes de WordPress 5.5, lazy loading sólo era posible en WordPress con un plugin de optimización como Autoptimize, BJ Lazy Load, u otros. Ahora es parte del núcleo de WordPress y no requiere que se instalen plugins adicionales.

Lazy loading nativo en WordPress

Como Félix Arntz informó en una vieja entrada de blog en el blog Make WordPress Core una implementación de JavaScript de lazy loading en WordPress fue propuesta inicialmente hace un par de años, pero nunca se convirtió en parte del Core. La nueva implementación de carga de lazy loading de imágenes elimina cualquier preocupación de compatibilidad y ahora la nueva característica puede ser fusionada con seguridad en el núcleo con WordPress 5.5.

Según Felix, la carga nativa de imágenes de WordPress tendría un impacto beneficioso en el rendimiento del sitio y la experiencia del usuario para un gran número de sitios web de WordPress que no utilizan plugins de lazy loading

…sin requerir ningún conocimiento técnico o incluso conciencia de la pereza como concepto. Adoptar el nuevo atributo de carga es una gran oportunidad para que WordPress marque el camino para una web más rápida en general.

Para evitar el cambio de diseño, loading="lazy" se añadirá automáticamente a las etiquetas img con atributos de width y height y eso sólo es posible si la imagen está disponible para WordPress como archivo adjunto e incluye una clase wp-image-$id.

Lazy loading es una optimización imprescindible para cada instalación de WordPress y sitio web con una cantidad considerable de imágenes. Felix Notes:

Esto ahorrará drásticamente ancho de banda tanto en los servidores como en los agentes de usuario en los sitios en los que antes se cargaban inmediatamente imágenes más abajo en la página, incluso en el caso de que el usuario nunca se desplazara hacia ellas.

La carga nativa de lazy loading en WordPress funciona con las siguientes imágenes:

• Imágenes en el contenido del post (the_content).
• Imágenes en los extractos del post (the_expert).
• Imágenes en widgets de texto (widget_text_content).
• Imágenes de avatares renderizadas a través de get_avatar().
• Plantilla de imágenes usando wp_get_attachment_image

Con la primera implementación, lazy loading sólo admite imágenes, pero podemos esperar una futura mejora en las etiquetas del iframe.

Lazy loading para los desarrolladores de WordPress

Los desarrolladores pueden anular el comportamiento predeterminado utilizando varios filtros nuevos. Entre esos filtros, wp_lazy_loading_enabled y wp_img_tag_add_loading_attr son los más útiles para los desarrolladores:

• wp_lazy_loading_enabled activa y desactiva el atributo de loading. Este filtro puede ser aplicado globalmente o por etiqueta.
• wp_img_tag_add_loading_attr filtra el valor del atributo de loading y proporciona una forma de controlar lazy loading por imagen.

El siguiente ejemplo muestra cómo desactivar globalmente lazy loading:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

También podemos deshabilitar lazy loading para una etiqueta específica. En el siguiente ejemplo, la carga lenta está desactivada en las imágenes del the_content (leer más en Make WordPress Core):

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

• $default: El valor booleano por defecto (true).
• $tag_name: El nombre de la etiqueta de los elementos a ser cargados por lazy loading.
• $context: Un parámetro opcional que especifica el contexto de la imagen (ver la lista anterior).

Tened en cuenta que, en el momento de escribir esto, el parámetro $tag_name sólo soporta la etiqueta img. De todos modos, como se mencionó anteriormente, se deberían añadir más etiquetas en futuras implementaciones.

Si quieres un control más granular sobre lazy loading de imágenes en WordPress, puedes seguir dos enfoques diferentes dependiendo del contexto.

Si estás trabajando en el contenido (es decir, the_content, the_excerpt, widget_text_content), podrías usar el filtro wp_img_tag_add_loading_attr. El siguiente ejemplo muestra cómo desactivar lazy loading en una imagen específica:

add_filter(
	'wp_img_tag_add_loading_attr',
	function( $value, $image, $context ){
		if ( 'the_content' === $context ){
			$image_url = wp_get_attachment_image_url( 67, 'medium' );
			if ( false !== strpos( $image, ' src="' . $image_url . '"' ) ) {
				return false;
			}
		}
		return $value;
	},
	10,
	3
);

Los desarrolladores de temas también pueden controlar las imágenes a través de wp_get_attachment_image. En este escenario, puedes simplemente establecer el valor del atributo de loading de la imagen a false:

echo wp_get_attachment_image(
	67,
	'medium',
	false,
	array( 'loading' => false ),
);

Si quieres probar lazy loading de imágenes antes del lanzamiento final de WordPress 5.5, puedes instalar el plugin oficial de lazy loading, o comprobar el código fuente en Github.

Native lazy-loading images is coming to #WordPress 5.5, for faster sites and less waste of network resources! And it's accompanied by further image improvements which reduce those annoying layout shifts that make you accidentally click on the wrong things. https://t.co/e7g2s9uSPk

— Felix Arntz (@felixarntz) July 14, 2020

Encontrarás más información sobre la carga de imágenes en WordPress 5.5 en el blog Make WordPress Core.

Auto-actualización de plugins y temas

Una de las mayores preocupaciones de los propietarios de los sitios es la seguridad del sitio y mantener su software actualizado es una recomendación común que todo propietario de un sitio debe tener en cuenta.

Las actualizaciones automáticas de WordPress han estado disponibles como una característica desde WordPress 3.7. Ahora, el problema aquí es que mientras las actualizaciones automáticas están habilitadas por defecto para el mantenimiento del núcleo y las versiones de seguridad, antes de WordPress 5.5, muchos propietarios de sitios no aprovechaban las actualizaciones automáticas para los plugins y temas.

La razón es que esta característica requería un conocimiento básico del desarrollo de WordPress. De hecho, los desarrolladores podían afinar sus preferencias de actualización definiendo una o más constantes en wp-config.php o usando un filtro en un plugin.

Ahora con WordPress 5.5, los administradores de sitios pueden activar y desactivar las actualizaciones automáticas de plugins y temas con un solo clic directamente en su panel de control de WordPress.

Las actualizaciones automáticas de los plugins pueden ser activadas y desactivadas haciendo clic en el enlace que aparece en la columna de actualizaciones automáticas ahora disponible en la pantalla de plugins.

Si quieres habilitar las actualizaciones automáticas para tu tema, navega a Apariencia > Temas, luego pasa el cursor sobre tu tema y haz clic en Detalles del tema. Luego, haz clic en el nuevo enlace Habilitar actualizaciones automáticas y listo.

La nueva interfaz de usuario de auto-actualización para plugins y temas se combina con varias funciones y ganchos disponibles para que los desarrolladores puedan personalizar la experiencia de auto-actualización.

Funciones de auto-actualización y filtros para desarrolladores de plugins y temas

Una nueva función y varios filtros permiten a los desarrolladores de WordPress personalizar muchos aspectos de las actualizaciones automáticas de plugins y temas.

Comprobar la actualización automática de la interfaz de usuario

La nueva función wp_is_auto_update_enabled_for_type() de WordPress comprueba si la auto-actualización de la interfaz de usuario está habilitada para un tipo determinado. La nueva función mantiene un único argumento ($type) que determina el tipo de actualización a comprobar ('theme' o 'plugin') y devuelve true o false en consecuencia.

La nueva interfaz de auto-actualización puede ser desactivada para los plugins o temas gracias a dos nuevos filtros: plugins_auto_update_enabled y themes_auto_update_enabled. Mira el ejemplo de abajo:

// Disable plugins auto-update UI elements.
add_filter( 'plugins_auto_update_enabled', '__return_false' );

// Disable themes auto-update UI elements.
add_filter( 'themes_auto_update_enabled', '__return_false' );

Los filtros anteriores están documentados en wp-admin/includes/update.php.

Personalizar los enlaces de actualización automática

Los desarrolladores de plugins y temas pueden personalizar la salida HTML de los enlaces de actualización automática.

El filtro plugin_auto_update_setting_html permite personalizar los enlaces de conmutación y el tiempo transcurrido entre dos intentos de actualización.

La función de devolución de llamada mantiene los argumentos de los árboles:

• $html: El HTML del contenido de la columna de auto-actualización del plugin, incluyendo los enlaces de acción de auto-actualización y el tiempo para la próxima actualización.
• $plugin_file: Ruta al archivo de plugin relativo al directorio de plugins.
• $plugin_data: Un conjunto de datos de plugin.

Ahora, si deseas personalizar la etiqueta del texto del enlace de actualización automática, puedes usar el filtro como se muestra en el siguiente recorte.

add_filter( 'plugin_auto_update_setting_html', function( $html, $plugin_file, $plugin_data ){
	if ( 'kinsta-plugin/kinsta-plugin.php' === $plugin_file ) {
		$html = __( 'Custom HTML', 'kinsta-plugin' );
	}
	return $html;	
	}, 
	10, 
	3 
);

La imagen de abajo muestra el resultado en la pantalla.

Este filtro está documentado en wp-admin/includes/class-wp-plugins-list-table.php.

En sitios individuales, puedes personalizar la plantilla JS del enlace de auto-actualización a través del filtro theme_auto_update_setting_template. La entrada del blog que introduce las actualizaciones automáticas de plugins y temas proporciona el siguiente ejemplo para este filtro:

function myplugin_auto_update_setting_template( $template ) {
    $text = __( 'Auto-updates are not available for this theme.', 'my-plugin' );
 
    return "<# if ( [ 'my-theme', 'twentytwenty' ].includes( data.id ) ) { #>
        <p>$text</p>
        <# } else { #>
        $template
        <# } #>";
}
add_filter( 'theme_auto_update_setting_template', 'myplugin_auto_update_setting_template' );

Se recomienda comprobar el tema del objetivo usando el parámetro data.id.

Si estás trabajando en una instalación multisitio de WordPress, entonces necesitas el filtro theme_auto_update_setting_html, que te permite personalizar los enlaces de Actualizaciones Automáticas de la pantalla de Temas de la misma manera que la pantalla de Plugins.

Finalmente, dos filtros adicionales controlan todas las actualizaciones automáticas de cada tema y plugin, incluyendo los temas y plugins que deben ser instalados en el futuro.

Estos filtros, disponibles desde WordPress 3.7, anulan todos los ajustes de auto-actualización en el panel de control de WordPress. Puedes leer más sobre eso en nuestras Actualizaciones Automáticas de Deep Dive Into WordPress. Para una visión más profunda de las Actualizaciones Automáticas para plugins y temas, lee más en esta entrada de blog.

Notificaciones por correo electrónico de actualización automática e información sobre la salud del sitio

Desde WordPress 5.5, se envía una notificación por correo electrónico después de cualquier intento de actualización automática.

El gancho del filtro de correo electrónico auto_plugin_theme_update_email filtra los correos electrónicos enviados después de una actualización automática de fondo. Mira la entrada del blog de dev-notes para ver un ejemplo de uso.

Las notificaciones de correo electrónico de actualización automática también pueden ser desactivadas usando dos nuevos filtros:

// Disable auto-update email notifications for plugins.
add_filter( 'auto_plugin_update_send_email', '__return_false' );

// Disable auto-update email notifications for themes.
add_filter( 'auto_theme_update_send_email', '__return_false' );

La información de actualización automática de plugins y temas también se muestra en la pestaña Información de salud del sitio.

Los desarrolladores pueden personalizar el texto que aparece en esta pantalla usando los filtros plugin_auto_update_debug_string y theme_auto_update_debug_string. Más información y varios ejemplos están disponibles aquí.

Mapas de sitio del núcleo extensible

Un mapa del sitio es simplemente una lista de URL que permite a los motores de búsqueda rastrear rápidamente tu sitio web.

Los mapas de sitios son bastante similares a robots.txt, con la diferencia de que un archivo robots.txt excluye el contenido de ser indexado, mientras que un mapa de sitio proporciona una lista de URL para ser indexado por los motores de búsqueda.

Antes de WordPress 5.5, los mapas de sitio sólo se podían añadir a los sitios web de WordPress mediante un plugin u otras herramientas.

Ahora, WordPress 5.5 trae una nueva característica de mapas de sitio XML al núcleo de WordPress.

La nueva característica añade una funcionalidad básica, pero viene con un buen número de ganchos y filtros que permiten a los desarrolladores de plugins ampliar aún más las funcionalidades incorporadas.

Los mapas de sitio XML están habilitados por defecto (a menos que se desaconseje a los motores de búsqueda que indexen su sitio web) y proporcionan los siguientes tipos de objetos:

• Página web
• Página de mensajes
• Tipos de puestos centrales (Páginas y Puestos)
• Tipos de puestos personalizados
• Taxonomías básicas (Etiquetas y Categorías)
• Taxonomías personalizadas
• Archivos del autor

El índice del mapa del sitio está disponible en /wp-sitemap.xml, que contiene un máximo de 2.000 URLs. Cuando se alcanza el límite máximo, se añade un nuevo archivo de mapa del sitio.

Como se mencionó anteriormente, los desarrolladores de plugins pueden personalizar sus mapas de sitio utilizando una o más de las muchas acciones y filtros disponibles. Para obtener una lista completa de los ganchos relacionados con los mapas de sitio, consulta la documentación de los plugins de características y la entrada introductoria del blog.

Como ejemplo, puedes deshabilitar programáticamente los sitemaps principales utilizando el filtro wp_sitemaps_enabled, que filtra si los XML Sitemaps están habilitados o no:

add_filter( 'wp_sitemaps_enabled', '__return_false' );

Los mapas de sitio principales no deben entrar en conflicto con ningún plugin de mapa de sitio que pueda tener instalado en su sitio web. Según Pascal Birchler en Make WordPress Core:

La característica principal de los mapas de sitio se construyó de una manera robusta y fácilmente extensible. Si por alguna razón se exponen dos sitemaps en un sitio web (uno por el núcleo y otro por un plugin), ello no tiene consecuencias negativas para la capacidad de descubrimiento del sitio.

Como parte de la función XML Sitemaps, una nueva función esc_xml() escapa de las cadenas de bloques XML. La función y el filtro correspondiente están documentados en wp-includes/formatting.php.

En el momento de escribir este artículo, la nueva función de mapa de sitio no soporta mapas de sitio de imágenes/vídeos/noticias y probablemente esto no cambiará en el futuro. De todos modos, los nuevos filtros y ganchos que permiten a los desarrolladores añadir esta característica podrían ser añadidos en futuras versiones.

Para obtener más información sobre los mapas de sitio extensibles, consulta la introducción del desarrollador a los mapas de sitio que cubre nuevas clases, funciones, ganchos y filtros.

Pasar argumentos a los archivos de plantillas

Antes de WordPress 5.5, la transmisión de datos a los archivos de plantilla sólo era posible a través de vars globales, vars de consulta y algunas otras opciones no óptimas. Ahora, a partir de WordPress 5.5, se ha añadido un parámetro $args a las funciones de carga de plantillas (los ganchos correspondientes se han actualizado en consecuencia):

• get_header()
• get_footer()
• get_sidebar()
• get_template_part()
• locate_template()
• load_template()

Los desarrolladores de temas pueden ahora establecer una variable en un archivo de plantilla y hacerla accesible en cualquier parte de la plantilla incluida, simplemente pasando una serie de argumentos.

Ahora, mientras esta característica abre nuevas y amplias oportunidades para los desarrolladores de temas, Justin Tadlock de WP Tavern hace una buena pregunta:

Una pregunta sigue siendo: ¿es la llegada de esta característica demasiado tarde? Con WordPress en camino de renovar todo el sistema de temas para integrarlo con la próxima característica de edición de sitio completo, ¿será esta característica útil sólo durante los próximos meses?

Un buen punto viene de John Blackbourne:

Incluso en un futuro con la edición completa del sitio, todavía hay mucha necesidad de partes de la plantilla. Los tipos de bloques renderizados dinámicamente pueden y hacen buen uso de las partes de plantillas estructuradas, por ejemplo. No son mutuamente excluyentes, y siempre habrá temas de opinión que no hagan un uso extensivo de los bloques para el diseño.

Finalmente llegamos a Enrico Sorcinelli, colaborador principal de WP, quien compartió sus pensamientos con nosotros:

Si me preguntas si llegamos demasiado tarde, desde mi punto de vista nunca es demasiado tarde.

Creo que en el futuro los desarrolladores de temas pueden beneficiarse de esta oportunidad, lo que no excluye que pueda ser utilizada en simbiosis con el emergente enfoque de edición de sitio completo (por ejemplo, para bloques con renderización dinámica).

Tal vez sea demasiado pronto para decir cómo exactamente esta característica se emparejaría con la edición completa del sitio, pero una cosa parece segura: el desarrollo futuro traerá grandes oportunidades para construir mejores sitios web tanto para los usuarios como para los desarrolladores.

Actualizando Plugins y Temas desde un archivo .zip

Sé lo que estás pensando: puede parecer bastante «inesperado» ver esta característica aparecer junto con las actualizaciones automáticas. Sin embargo, tiene sentido.

Antes de WordPress 5.5, cuando no había una función de actualización con un solo clic, los administradores del sitio sólo podían subir actualizaciones de plugins/temas a través de FTP/SFTP (aprender la diferencia entre FTP y SFTP) o del administrador de archivos. Eso era mayormente cierto con plugins/temas personalizados o con extensiones alojadas en mercados de terceros.

A partir de WordPress 5.5, puedes actualizar los plugins y temas subiendo un paquete . zip desde tu ordenador dentro del panel de control de WordPress.

Si deseas actualizar un plugin, ve a Plugins > Add New screen y haz clic en el botón Upload Plugin. Luego, si tienes el plugin instalado en tu sitio web, una nueva pantalla te indica que «Este plugin ya está instalado» y muestra la versión actual y los detalles de la versión cargada.

El proceso es bastante similar con las actualizaciones de los temas.

Navega a la pantalla Apariencia > Temas, luego haz clic en Agregar Nuevo, luego en Subir Tema. Si tienes el tema ya instalado en tu sitio web de WordPress, una nueva pantalla te hace saber que «Este tema ya está instalado» y muestra la versión actual y los detalles de la versión cargada.

Mejoras adicionales para los desarrolladores que vienen con WordPress 5.5

Además de lo que hemos cubierto hasta ahora, un par de adiciones merecen la atención de un desarrollador.

Nueva función wp_get_environment_type()

Una nueva función wp_get_environment_type() permite detectar el tipo de entorno actual de un sitio web, permitiendo a los desarrolladores adaptar las funcionalidades de los plugins y los temas al entorno actual.

Por defecto, wp_get_environment_type() devuelve production. Otros valores soportados son development y staging. De todos modos, los desarrolladores pueden definir tipos de entorno adicionales si es necesario.

Hay tres métodos disponibles para establecer un tipo de entorno de sitio web. A partir de un orden de prioridad, se puede utilizar:

• WP_ENVIRONMENT_TYPE Variable de entorno PHP.
• WP_ENVIRONMENT_TYPE constante.
• wp_get_environment_type filter.

A modo de ejemplo, si desea establecer el entorno como staging, puede definir la constante WP_ENVIRONMENT_TYPE en el archivo wp-config.php como se muestra a continuación:

define( 'WP_ENVIRONMENT_TYPE', 'staging' );

Si el tipo de entorno está development, WP_DEBUG se pondrá automáticamente a true aunque no lo hayas definido explícitamente.

Cambios en la API de REST en WordPress 5.5

WordPress 5.5 también trae muchos cambios a la API de REST. Veremos varios nuevos puntos finales, nuevos parámetros y cambios en el esquema JSON, nuevas funciones y más mejoras.

Aquí hay una lista rápida de nuevos puntos finales:

Tipos de bloque

Un nuevo punto final permite obtener todos los tipos de bloque registrados:

• GET /wp/v2/block-types devolverá todos los tipos de bloque registrados.
• GET /wp/v2/block-types/core devolverá todos los bloques dentro del espacio de nombres del core.
• GET /wp/v2/block-types/core/quote devolverá la definición del bloque de la quote central.

Plugins

Un nuevo punto final permite gestionar los plugins:

• GET /wp/v2/plugins devolverá una lista de todos los plugins instalados.
• GET /wp/v2/plugins/plugin-name/plugin-name devolverá la información sobre el plugin especificado.
• POST /wp/v2/plugins { slug: "plugin-name" } instala el plugin especificado del Directorio de Plugins
• PUT /wp/v2/plugins/plugin-name/plugin-name { status: "active" } activa el plugin especificado
• DELETE /wp/v2/plugins/plugin-name/plugin-name borra un plugin inactivo.

Directorio de bloques

Un nuevo punto final permite buscar en el directorio de bloques:

• GET /wp/v2/block-directory/search?term=block-name busca el block-name en el directorio del bloque

Edición de imágenes

Junto con la nueva función de edición de imágenes en línea, un nuevo punto final permite editar los archivos adjuntos de imágenes en la Biblioteca Multimedia:

POST /wp/v2/media/5/edit edita la imagen con ID 5

Ve las notas de desarrollo del núcleo de WordPress para ver más de cerca todos los cambios en la API de REST que vienen con WordPress 5.5.

Resumen

Estamos encantados con todas estas nuevas características y mejoras que WordPress 5.5 trae en un solo lanzamiento.

Muestra la enorme cantidad de trabajo que se realiza entre bastidores y apreciamos profundamente todos los esfuerzos y el compromiso de cada uno de los contribuyentes principales.

Si los cambios listados arriba no son suficientes para ti, aquí hay más que deberías revisar para las mejoras adicionales que vienen con WordPress 5.5:

• 65 nuevos iconos añadidos a la fuente de iconos Dashicons en WordPress Core
• Listas de enlaces en los widgets para mejorar la accesibilidad
• Nuevos estilos CSS para los botones desactivados
• Invalidación de la caché de Opcode
• Mejor control de redirect_guess_404_permalink()
• Mejoras relacionadas con PHP
• Cambios en la base del código
• Cambios en las funciones del logotipo y el filtro personalizados
• Bloquear las actualizaciones de la API
• Filtros de encabezamientos de páginas de archivo
• Añadiendo iconos en el Twenty Twenty
• Y muchos más

¡Asegúrate de unirte a nuestro webinar gratuito totalmente dedicado a WordPress 5.5!

Ahora es tu turno. ¿Cuáles son las características y/o mejoras que más te gustan de WordPress 5.5? ¿Y qué características te gustaría que se añadieran a WordPress 5.6? Comparte tus ideas en la sección de comentarios de abajo!

Si te gustó este artículo, entonces te encantará la plataforma de alojamiento WordPress de Kinsta. Carga tu sitio web y recibe soporte 24/7 de nuestro veterano equipo de WordPress. Nuestra infraestructura impulsada por Google Cloud Platform se enfoca en la auto-escalada, el rendimiento y la seguridad. ¡Déjanos mostrarte la diferencia de Kinsta! Echa un vistazo a nuestros planes