WordPress 5.4 «Adderley» fue lanzado el 31 de marzo de 2020, y está disponible para la descarga.

Así que es hora de que nos sumerjamos en las nuevas características y cambios más interesantes que vienen con WordPress 5.4.

En primer lugar, WordPress 5.4 aporta muchas características, mejoras y correcciones de errores al editor de bloques, con un número considerable de versiones del plugin de Gutenberg fusionadas en el núcleo. Estos cambios afectan tanto a las funcionalidades como a la interfaz de usuario, mejorando la accesibilidad/utilidad del editor y la experiencia de edición en general.

Además del editor, WordPress 5.4 introduce interesantes mejoras en la Herramienta de Salud del Sitio y en la API REST, mientras que un par de características esperadas con WordPress 5.4 han sido retrasadas y deberían ser incluidas en el Núcleo con la próxima versión de WordPress 5.5 (ver Native Lazy Loading en imágenes y bloque de navegación).

Puede que quiera guardar las siguientes fechas y enlaces del ciclo de desarrollo de WordPress 5.4:

Entonces, ¿qué hay de nuevo en WordPress con WordPress 5.4?

¿Qué hay de nuevo con el Editor de Bloques?

Un número considerable de las versiones del plugin de Gutenberg se han fusionado en el núcleo, de 6,6 a 7,5. Así que, si no está usando el plugin de Gutenberg, encontrará toneladas de nuevas características, mejoras y correcciones de errores en el editor de bloques al actualizar a WordPress 5.4.

Pero hay más que bloques y características en el editor con mejoras en el rendimiento general que se reportan:

El equipo de editores de bloques ha logrado una reducción del 14% en el tiempo de carga y del 51% en el tiempo de mecanografía, para un post particularmente grande (~ 36.000 palabras, ~1.000 bloques) desde WordPress 5.3.

Eso es un montón de cosas increíbles, así que vamos a sumergirnos.

¿Qué hay de nuevo en WordPress 5.4? Obtenga una visión en profundidad de todas las nuevas e interesantes características y cambios que vienen con esta última versión! 💪🚀Click to Tweet

Nuevas características y mejoras del Editor de bloques

Podemos estar de acuerdo en el hecho de que el editor de bloques todavía está en desarrollo, pero WordPress 5.4 trae toneladas de cambios que mejoran la usabilidad del editor tanto en el escritorio como en el móvil.

Algunos de estos cambios se refieren estrictamente a la interfaz, entre ellos el modo de pantalla completa activado por defecto, la mejora de la selección de bloques, la facilidad para cambiar entre el modo de edición y el modo de selección, la barra de herramientas móvil fija y las migas de pan para la navegación por bloques. Dos nuevos bloques y configuraciones de opciones adicionales añaden más funcionalidades al editor.

Aquí hay una lista rápida de las características y mejoras de nuestro editor de bloques favorito que viene con WordPress 5.4:

Los nuevos iconos sociales bloquean

Inicialmente llamado Social Links, el bloque de Social Icons permite a los autores añadir rápidamente iconos con enlaces a perfiles sociales y proporciona un buen número de bloques de iconos sociales infantiles para elegir. Este bloque ha sido experimental durante un tiempo y es estable desde Gutenberg 7.5.

Los Iconos Sociales bloquean

El bloque de los Iconos Sociales

El bloque de Iconos Sociales viene con tres estilos predefinidos para sus personalizaciones visuales: Predeterminado, Sólo logos y Forma de píldora.

Estilos de iconos sociales

Estilos de iconos sociales

Desde que se introdujeron por primera vez como una característica experimental en Gutenberg 6.5 (y se fusionaron en WordPress 5.3), los Iconos Sociales han sido añadidos a Gutenberg 7.5 y puede que no funcionen como se esperaba si se está ejecutando una versión anticuada del plugin de Gutenberg.

Según Jorge Costa, hay dos maneras de prevenir los problemas con los iconos sociales:

Bloque de nuevos botones

Añadido al editor de bloques en Gutenberg 7.2, el bloque de botones reemplaza al bloque de un solo botón, y permite a los usuarios de WordPress añadir más botones a su contenido dentro del mismo contenedor del bloque.

El nuevo bloque de Botones

El nuevo bloque de Botones

Los botones individuales vienen con dos estilos preestablecidos para elegir y varias opciones adicionales para afinar el aspecto de sus botones.

Configuración de los botones en WordPress 5.4

Configuración de los botones en WordPress 5.4

Con WordPress 5.4, los propietarios de sitios web adquieren un control más profundo sobre el aspecto y la sensación de su llamada a la acción gracias a la adición de fondos graduales, que también vienen con un puñado de ajustes de gradientes disponibles para que los administradores de los sitios web los utilicen como puntos de partida para futuras personalizaciones.

Características de color renovadas para los botones

Características de color renovadas para los botones

Una guía de bienvenida Modal

WordPress 5.4 añade una nueva presentación de diapositivas de bienvenida con información básica sobre el editor de bloques y un enlace a la documentación en línea (añadida con Gutenberg 7.1).

Bienvenido Guía Modal

Bienvenido Guía Modal

El modal sólo es visible justo después de actualizarse a 5.4. Si quiere activarlo de nuevo, sólo tiene que abrir el menú de Más herramientas y opciones del botón superior derecho y encontrar el enlace de la Guía de bienvenida.

Modo de pantalla completa activado por defecto

Modo de pantalla completa activado por defecto

Modo de pantalla completa activado por defecto

A partir de WordPress 5.4, el editor se abre en modo de pantalla completa por defecto en las nuevas instalaciones y dispositivos. Puede activar o desactivar el modo de pantalla completa haciendo clic en el menú Más herramientas y opciones, como se muestra en la siguiente imagen.

Modo de pantalla completa activado por defecto

Modo de pantalla completa activado por defecto

Por ahora, esta preferencia se almacena localmente, lo que significa que se sobrescribirá cada vez que cambien las preferencias, como sucede cuando se accede a la página web en modo de incógnito. En el futuro, esta preferencia debería almacenarse en la base de datos, haciendo que la elección del usuario sea persistente en cualquier contexto.

Obsérvese que la decisión de tener el editor en modo de pantalla completa por defecto no se aprecia unánimemente, ya que se considera que puede resultar confuso para los principiantes y los usuarios no avanzados. Revisa este post si quieres saber más sobre las preocupaciones de la gente en modo de pantalla completa.

Los desarrolladores del editor de bloques pueden controlar el modo de pantalla completa de forma programada con sólo unas pocas líneas de JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
	wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Soporte de color de texto en línea en bloques de texto enriquecido

Si normalmente escribe artículos de forma larga, debería apreciar el soporte de color del texto en línea. Antes de esta actualización, nos vimos obligados a codificar en modo HTML los bloques de texto enriquecido para cambiar el color de las palabras y las cadenas.

Opción de color de texto enriquecido

Opción de color de texto enriquecido

A partir de WordPress 5.4, podemos seleccionar palabras y subcadenas en bloques de RichText y cambiar rápidamente sus colores usando el selector de colores incorporado.

Selector de colores RichText

Selector de colores RichText

Opciones de color adicionales para varios bloques

WordPress 5.4 añade una larga lista de características y mejoras relacionadas con el color al editor de bloques. Como se ha visto anteriormente, ya no estamos limitados a los colores sólidos. Varios bloques ahora soportan fondos de degradado y conjuntos predefinidos de degradados.

Aquí hay una lista rápida de algunas mejoras relacionadas con el color:

Bloque de cubierta con fondo de gradiente preestablecido

Bloque de cubierta con fondo de gradiente preestablecido

Otra adición notable al editor del bloque es el soporte para imágenes destacadas en el bloque de Últimas Publicaciones (Gutenberg 7.5).

Esta es sólo la más reciente de varias mejoras añadidas al bloque de Últimos Mensajes a lo largo del tiempo y marca otro paso hacia «bloques dinámicos o globales más complejos».

Bloqueo de las últimas publicaciones

Bloqueo de las últimas publicaciones

Con WordPress 5.4, el bloque de Últimas Publicaciones le permite sacar publicaciones de una categoría específica pero no le permite construir consultas más avanzadas por categoría/etiqueta/tipo de publicación y/o incluir/excluir publicaciones individuales.

Esperamos ver más mejoras con este bloque en el futuro.

Una nueva barra de migas de pan para la navegación en bloque

Disponible para los usuarios de Gutenberg desde la versión 6.7, y ahora fusionada con el Núcleo, la nueva barra de migas de pan tiene como objetivo simplificar la navegación de los bloques anidados.

La imagen de abajo muestra varios bloques anidados y el nuevo menú de migas de pan en la parte inferior.

 El nuevo menú de migas de pan

El nuevo menú de migas de pan

Cambios en el editor de bloques para los desarrolladores de temas y bloques

Los desarrolladores de temas y bloques deben estar al tanto de muchos cambios introducidos en el editor de bloques con WordPress 5.4. Estos cambios incluyen:

Atajos de teclado del editor de bloques

Los desarrolladores de bloques y los usuarios avanzados pueden ahora añadir atajos personalizados al editor de bloques.

Se ha introducido un nuevo paquete llamado @wordpress/keyboard-shortcuts para centralizar el registro, la eliminación y la documentación de los atajos de edición.

Los desarrolladores pueden añadir sus atajos personalizados llamando a la acción registerShortcut de esta manera:

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

	// Shortcut identifier
	name: 'plugin/shortcut-test',

	// Shortcut category (possible values global, block, selection)
	category: 'global',

	// Shortcut description
	description: 'My first shortcut',

	// The key combination that triggers the shortcut
	keyCombination: {

		// Available modifiers:
		// primary, primaryShift, primaryAlt,
		// secondary, access, ctrl, alt,
		// ctrlShift, shift, shiftAlt
		modifier: 'alt',
		character: 'w',
	},

	// An alias for the key combination
	aliases: [
		{
			modifier: 'primary',
			character: 'q',
		},
	],
} );

Esto agregará automáticamente el atajo personalizado a los atajos modales disponibles en el botón Más herramientas y opciones en la esquina superior derecha del editor.

Se ha añadido un atajo personalizado del editor de bloques globales

Se ha añadido un atajo personalizado del editor de bloques globales

Entonces, podemos adjuntar un manejador de atajos de teclado usando la función useShortcut:

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
	useShortcut(

		'plugin/shortcut-test',

		useCallback(
			( event ) => {
				// Do something
			},
			[]
		)
	);
}

Puede leer más sobre los atajos de teclado en el blog Make WordPress Core.

APIs de temas graduales

WordPress 5.4 introduce fondos de gradiente con un puñado de preajustes para los botones y bloques de cobertura. Esto sucede gracias a las nuevas APIs de temas gradientes.

Las nuevas API ofrecen la opción de soporte de temas con de editor-gradient-presets, que permite a los desarrolladores de temas anular los preajustes predeterminados y definir los suyos propios:

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
		),
		array(
			'name'		=> __( 'Chocolate to Coral', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
			'slug'		=>  'chocolate-to-coral',
		),
		array(
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
		),
		array(
			'name'		=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
			'slug'		=> 'deepskyblue-to-dodgerblue',
		),
	)
);
Preajustes de gradientes personalizados en WordPress 5.4

Preajustes de gradientes personalizados en WordPress 5.4

Preajustes de gradiente personalizados

Preajustes de gradiente personalizados

Puede desactivar los degradados personalizados utilizando la opción de soporte de temas de disable-custom-gradients:

add_theme_support( 'disable-custom-gradients' );

La funcionalidad de los gradientes puede ser eliminada completamente usando tanto los disable-custom-gradients los editor-gradient-presets:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

Cambios de marca y estilo en el editor de bloques

WordPress 5.4 introduce varios cambios de estructura DOM que los desarrolladores de temas deben tener en cuenta.

Para una vista detallada sobre los cambios de DOM y CSS, ver Markup y cambios relacionados con el estilo en WordPress 5.4

Andamios de bloques

Con el nuevo paquete @wordpress/create-block Package for Block Scaffolding, los desarrolladores tienen una nueva forma de generar la estructura de directorios para un plugin de edición de bloques. Esta estructura incluye típicamente index.php, index.js y style.css.

Los desarrolladores de bloques pueden ahora simplemente ejecutar el siguiente comando:

$ npm init @wordpress/block block-name

Bloquear las colecciones

Las Colecciones de Bloques proveen una forma de agrupar visualmente las colecciones de bloques en el insertador del editor de bloques. Las colecciones son diferentes de las categorías y proporcionan una forma adicional de agrupar bloques.

El nuevo API proporciona una nueva función:

registerBlockCollection( namespace, { title, icon } );

Introducida con Gutenberg 7.3 y ahora fusionada en el núcleo, la nueva API permite a los desarrolladores de temas y bloques organizar mejor los bloques, facilitando a los usuarios el descubrimiento y la adición de bloques al contenido.

Variaciones de bloque

La API de variaciones de bloques proporciona un conjunto de funciones que permite a los desarrolladores de bloques añadir/administrar/eliminar variaciones de bloques que los usuarios pueden elegir al añadir bloques al contenido. Registrar una nueva variación es bastante sencillo (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' ] 
} );
Variaciones del bloqueo de la dirección

Variaciones del bloqueo de la dirección

Para una vista más cercana en el API de Variaciones de Bloques, ver PR #20068.

Características adicionales del Editor de Bloques que vienen con WordPress 5.4

Otras características notables que se incluyen en el núcleo de WordPress 5.4 son:

Cambiar entre el modo de selección de edición

Cambiar entre el modo de selección de edición

Una tabla con un pie de foto en WordPress 5.4

Una tabla con un pie de foto en WordPress 5.4

Arrastrar y soltar imagen destacada

Arrastrar y soltar imagen destacada

Bloquear la barra de herramientas en el móvil

Bloquear la barra de herramientas en el móvil

Configuración del bloque de la galería

Configuración del bloque de la galería

Agregar enlaces a imágenes en el bloque de Media & Text

Agregar enlaces a imágenes en el bloque de Media & Text

Características y mejoras para los desarrolladores de WordPress

Los desarrolladores deberían beneficiarse de varias nuevas adiciones que vienen con WordPress 5.4.

Nuestros cambios favoritos incluyen lo siguiente:

¿Cansado de los problemas de WordPress y un host lento? Proporcionamos soporte de clase mundial de expertos en WordPress disponibles las 24 horas del día, los 7 días de la semana y servidores muy rápidos. Consulte nuestros planes

Un Widget de calendario semánticamente correcto y nuevas clases de CSS

La especificación HTML 5.1 ha cambiado la forma en que los elementos de pie tienen que ser usados en las tablas. Antes de que los elementos tfoot de HTML 5.1 pudieran preceder al elemento tbody. La nueva especificación cambia las cosas y ahora tfoot debe seguir a tbody.

Viejo widget de calendario

Viejo widget de calendario

El widget de calendario de WordPress cambia en consecuencia. A partir de WordPress 5.4, los enlaces de navegación se mueven a un elemento de nav fuera de la tabla de calendario.

Fue un cambio muy esperado, considerando que el nav es el elemento HTML más apropiado para los enlaces de navegación en cualquier concurso, y también puede ayudar a mejorar la accesibilidad en los lectores de pantalla. De acuerdo con la documentación de Mozilla:

Un documento puede tener varios elementos < nav>, por ejemplo, uno para la navegación del sitio y otro para la navegación dentro de la página. aria-labelledby puede ser usado en tal caso para promover la accesibilidad…

Los agentes de usuario, como los lectores de pantalla dirigidos a usuarios discapacitados, pueden utilizar este elemento para determinar si se debe omitir la representación inicial del contenido de sólo navegación.

Además, las siguientes clases CSS han sido introducidas en get_calendar() para facilitar la orientación:

El siguiente fragmento muestra la estructura HTML del nuevo calendario:

<div class="widget widget_calendar">
	<div class="widget-content">
		<div id="calendar_wrap" class="calendar_wrap">
			<table id="wp-calendar" class="wp-calendar-table">
				<caption>February 2020</caption>
				<thead>
					<tr><!-- Day names --></tr>
				</thead>
				<tbody>
					<!-- Calendar cells -->
				</tbody>
			</table>
			<nav aria-label="Previous and next months" class="wp-calendar-nav">
				<span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">« Dec</a></span>
				<span class="pad"> </span>
				<span class="wp-calendar-nav-next"> </span>
			</nav>
		</div>
	</div>
</div>

Los desarrolladores de temas pueden querer cambiar sus hojas de estilo en consecuencia.

Nuevo widget de calendario

Nuevo widget de calendario

Códigos cortos en los scripts PHP

WordPress 5.4 introduce la función apply_shortcodes() como un alias para do_shortcode(), que nos permite usar un código corto en un archivo PHP.

Desde el punto de vista semántico, podemos esperar ver el resultado de las funciones do_* simplemente llamando a la función misma. Pero ese no es el caso de do_shortcode. Para imprimir la salida del código corto especificado, do_shortcode tiene que hacerse eco:

// Muestra el resultado del atajo
echo do_shortcode ( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4 cambia un poco las cosas con la introducción de apply_shortcodes(), que funciona de la misma manera que do_shortcode(), pero permite a los desarrolladores construir un código más legible y semánticamente correcto:

// Displays the result of the shortcode
echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

A partir de WordPress 5.4 RC 3, do_shortcode()no está previsto que se desapruebe porque se utiliza ampliamente en los plugins de terceros.

Mejoras en el manejo de Favicon en WordPress 5.4

Con WordPress 5.4, los desarrolladores de temas pueden manejar las solicitudes de faviconos con mucha más flexibilidad y varias nuevas funciones permiten manejar los faviconos de la misma manera que las funciones relacionadas con robots.txt. Sergey Biryukov explica:

Una petición a favicon.ico debe ser manejada de la misma manera que manejamos robots.txt con do_robots():

Así que, si no se proporciona un archivo físico favicon.ico, así es como WordPress lo maneja:

Un puñado de nuevas funciones y ganchos complementan las correspondientes funciones/ganchos relacionados con robots.txt:

Lea más sobre el manejo del favicon.

Nuevos ganchos para añadir campos personalizados a los elementos del menú

Con WordPress 5.4, los desarrolladores pueden usar dos nuevos ganchos de acción para añadir campos personalizados a los elementos del menú.

El wp_nav_menu_item_custom_fields se activa justo antes de que se añada un elemento del menú de navegación al editor del menú de administración. Vea el ejemplo a continuación:

function kinsta_add_menu_item_custom_field() {
	echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );
Campos personalizados en los elementos del menú de navegación

Campos personalizados en los elementos del menú de navegación

El nuevo gancho de acción soporta cinco parámetros que puede usar para ajustar el comportamiento del campo personalizado:

La plantilla wp_nav_menu_item_custom_fields_customize_template funciona de la misma manera que wp_nav_menu_item_custom_fields, pero se activa al final de la plantilla de campos de formulario para los elementos del menú de navegación en el Personalizador. La imagen de abajo muestra la sección de Menús del Personalizador en WordPress 5.4.

Campos personalizados en elementos del menú de navegación

Campos personalizados en elementos del menú de navegación

Cambios adicionales para los desarrolladores

Otros cambios para los desarrolladores y usuarios avanzados que vienen con WordPress 5.4 incluyen:

¿Cómo instalar una versión de desarrollador de WordPress?

Si quiere asegurarts de que sus temas y plugins son totalmente compatibles con WordPress 5.4 o simplemente tiene curiosidad por las nuevas características que vienen con la última versión de WordPress, puede instalar la versión de desarrollo actual con unos pocos clics.

Tiene dos maneras de instalar una versión Beta/RC de WordPress:

Si decide instalar el plugin Beta tester, necesitará instalar primero una instalación normal de WordPress, ya sea en su máquina local o en su entorno de ensayo.

Una vez que su sitio web de WordPress esté en funcionamiento, navegue a Plugins → Agregar nuevo y busque el plugin WordPress Beta Tester.

El plugin proporciona una manera rápida y fácil de probar la versión beta de WordPress, permitiendo instalar y/o actualizar la versión beta actual o el Release Candidate con el clic de un botón.

Instalar el plugin de WordPress Beta Tester

Instalar el plugin Beta Tester de WordPress

Así que, instale y active el plugin como de costumbre.

Navegue a Herramientas → Prueba Beta y marque la opción de «Bleeding edge nightlies» y guarde los cambios.

Después de eso, navega a la pantalla de actualizaciones de Dashboard → y hag clic en el botón Actualizar ahora.

Pantalla de actualizaciones de WordPress

Pantalla de actualizaciones de WordPress

WordPress descargará e instalará el siguiente paquete:

https://wordpress.org/nightly-builds/wordpress-latest.zip

Una vez que la instalación se haya completado, será redirigido a la página temporal de WordPress About.

WordPress update progress

WordPress update progress

Y eso es todo. Ahora están listos para hacer sus pruebas en las versiones Beta y RC de WordPress.

Revise la documentación oficial para más información sobre las pruebas de WordPress Beta.

Las versiones de desarrollo no están destinadas a ser utilizadas en la producción. Siéntase libre de instalarlas en su entorno de puesta en escena o en su máquina local, pero nunca las use en su sitio en vivo.

Resumen

Con diez versiones del plugin de Gutenberg fusionadas en el núcleo, WordPress 5.4 se centra principalmente en el Editor de Bloques. Tenemos dos nuevos bloques, atajos personalizados, mejor usabilidad y accesibilidad, y podemos esperar más desarrollos en un futuro próximo.

Pero hay aún más:

El nuevo widget del Estado de Salud del Sitio

El nuevo widget del Estado de Salud del Sitio

Ahora es su turno. ¿Qué opina de WordPress 5.4? ¿Qué cambios y características le gustan más? Háganoslo saber en los comentarios!


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 28 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.