Novedades de WordPress 5.8 (edición de sitio completo, imágenes de WebP, estilos y configuraciones globales y mucho más)

WordPress 5.8 «Tatum» está aquí y es un lanzamiento trascendental. Además de la increíble cantidad de funciones, mejoras y correcciones de errores, WP 5.8 presenta una nueva forma de crear sitios web al incorporar las primeras funciones que se incluyen en el proyecto más amplio conocido como Edición del sitio completo.

Además de la edición completa del sitio, WordPress 5.8 trae toneladas de cambios y mejoras a varias áreas del CMS.

Los usuarios de WordPress que no utilicen el complemento de Gutenberg encontrarán características y mejoras provenientes de nueve lanzamientos de Gutenberg en total (para profundizar en cada lanzamiento, consulte Gutenberg 9.9, 10.0, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7).

Una característica nueva importante para los usuarios que se toman en serio el rendimiento de sus sitios es la compatibilidad con el formato WebP.

A los desarrolladores seguramente les encantará la eliminación de IE11 de la lista de navegadores compatibles, la nueva configuración de bloques y el mecanismo de estilo basado en theme.json, el sistema de registro de bloques mejorado basado en block.jsony las muchas mejoras de API que vienen con la segunda versión de WordPress de 2021.

Por lo tanto, espere porque será un extenso resumen de características y mejoras que allanarán el camino para las nuevas y poderosas herramientas de creación de sitios que se espera lanzar en los próximos meses.

¡WordPress 5.8 ‘Tatum’ ya está aquí! 🥳 Eche un vistazo a las nuevas funciones y disfrute de la primera implementación de la edición completa del sitio 🎁Haz clic para tuitear

Funciones completas de edición de sitios en WordPress 5.8

La visión detrás de Full Site Editing es proporcionar una colección de herramientas y características que permitan a los usuarios de WordPress crear un sitio web completo utilizando bloques. Con la edición completa del sitio, veremos muchos bloques disponibles para crear cualquier elemento en la página, desde los menús de navegación hasta la marca del sitio, los widgets de la barra lateral, las plantillas y mucho más.

Incluso si WordPress 5.8 presenta varias características que caen dentro del alcance de la edición completa del sitio (FSE), no espere ver un entorno de creación de sitios visual con todas las funciones. FSE todavía es un trabajo en progreso, y el lanzamiento de WordPress 5.8 abre una especie de fase beta pública. Según Josepha Haden Chomphosy:

La edición completa del sitio es una colección de proyectos y juntos representan un gran cambio, posiblemente demasiado para una sola versión. El contexto más importante para compartir es que no se envía como la experiencia completa y predeterminada para los usuarios. Uno de los comentarios más claros del proceso de fusión de la Fase Uno fue que no hubo tiempo suficiente para que nuestros extensores (agencias, autores de temas, desarrolladores de complementos, creadores de sitios, etc.) se prepararan para los próximos cambios.

Con eso en mente, este proceso de fusión no será un interruptor de encendido / apagado. El enfoque ahora no está en una experiencia de usuario completa y matizada, sino más bien en una versión beta pública abierta dentro de WordPress 5.8.

Entonces WordPress 5.8 no presenta una experiencia FSE perfecta y completa en este momento. En su lugar, veremos que se agregan y mejoran nuevas funciones con el tiempo, comenzando desde la versión 5.8. Por la misma razón, podemos suponer que WordPress 5.8 no tendrá un impacto dramático en la forma en que estamos acostumbrados a crear sitios web.

En el momento de escribir este artículo, los propietarios y administradores del sitio todavía tienen que optar conscientemente por FSE instalando un tema de bloque, como Twenty-Twenty One Blocks (la versión basada en bloques de Twenty-Twenty One) y activando el complemento Gutenberg.

La edición completa del sitio abarca una variedad de subproyectos separados, incluido el editor del sitio, estilos globales, bloque de consulta, bloque de navegación, plantillas, temas de bloque y mucho más. Pero lo más parecido a la edición de sitios en WordPress 5.8 es la Modo de edición de plantillas y los bloques temáticos correspondientes disponibles para usar en ese modo, como veremos más adelante en este artículo.

A continuación, profundicemos en algunos Funciones de FSE fusionadas en Core con WordPress 5.8.

Modo de edición de plantillas

El modo de edición de plantillas proporciona una forma de crear plantillas de publicaciones / páginas utilizando bloques. Es una excelente manera de reducir la complejidad de la creación de sitios, lo que permite a los usuarios aprovechar varias funciones de edición de sitios desde fuera de la interfaz del editor de sitios mientras se acostumbran a trabajar con bloques. Esto también es excelente para los usuarios que no usan temas basados ​​en bloques pero que aún buscan una manera fácil de crear y editar plantillas desde la interfaz de usuario del editor de bloques.

Personalizar temas nunca antes había sido tan fácil en WordPress. Ahora ya no necesita crear un tema hijo para crear sus plantillas personalizadas. Con WordPress 5.8, la edición de plantillas no se limita a bloquear temas, sino que también está disponible para su uso con temas clásicos, aunque debe optar por habilitarla para temas clásicos.

Para crear una nueva plantilla, solo necesita habilitar el Modo de edición de plantillas en el Ajustes barra lateral. Un nuevo Plantilla El panel ahora está disponible para que los usuarios cambien el modo de edición (consulte la nota de la versión de Gutenberg 10.5).

Desde el Plantilla panel, puede crear una nueva plantilla o editar una existente.

Para crear una nueva plantilla, haga clic en Nuevo. Luego ingrese un nombre de plantilla en el modal y haga clic en Creary ya está listo para comenzar.

En el modo de edición de plantillas, puede crear sus plantillas utilizando todos los bloques disponibles, incluidos los bloques FSE como título del sitio, lema del sitio, inicio de sesión / salida y muchos más.

Una vez que esté satisfecho con sus ediciones, puede volver al modo de edición de publicaciones y guardar la plantilla por separado del contenido de la publicación / página, como se muestra en la imagen a continuación:

Las plantillas se almacenan en su base de datos de WordPress como tipos de publicaciones personalizadas con el nombre wp_template. Esto no solo le permite editar una plantilla desde la interfaz del editor, sino que también facilita su importación o exportación a voluntad. También puede usar una plantilla en diferentes sitios web (en el momento de escribir este artículo, esta función solo está disponible si activa el complemento Gutenberg).

El modo de edición de plantillas todavía tiene algunos errores en el momento de escribir este artículo, como se informa en esta convocatoria de pruebas y en este experimento de Justin Tadlock.

Pero todo lo que se necesita es un poco de paciencia y esperar a que se solucionen los problemas principales para comprender completamente cómo el Modo de edición de plantillas cambiará la forma en que personaliza la apariencia de sus sitios web.

Los usuarios ya no necesitarán habilidades de desarrollador para obtener un control completo sobre el diseño y la apariencia general del sitio web.

El modo de edición de plantillas estaba disponible al principio tanto para temas de bloques como para temas clásicos. Después de una cuidadosa discusión en el canal 5.8 de clientes potenciales, se decidió hacer que el editor de plantillas optara por los temas clásicos y optara por no participar en los temas de bloque (ver también pull # 32858).

Según Carolina Nymark:

Inicialmente, la edición de plantillas estaba habilitada para todos los temas. Los desarrolladores de temas expresaron su preocupación de que no podrían actualizar todos sus temas clásicos existentes para admitir esta nueva función. Con un cambio tardío, el equipo de lanzamiento y el equipo editor eligen cambiar la edición de la plantilla para optar por los temas clásicos.

Para optar por los temas clásicos, ahora los desarrolladores deben agregar compatibilidad con temas:

add_theme_support( 'block-templates' );

Temas clásicos usando theme.json puede optar por no participar eliminando la compatibilidad con el tema:

remove_theme_support(  'block-templates' );

Para obtener una descripción general más detallada de cómo funciona el modo de edición de plantillas en WordPress 5.8 y algunos ejemplos útiles de uso, asegúrese de ver este video de Anne McCarty:

Bloques temáticos

Como se mencionó anteriormente, FSE no es una característica única, sino un conjunto completo de características de creación de sitios que no están únicamente relacionadas con el editor del sitio. El modo de edición de plantillas es solo un ejemplo de eso. Pero junto con la edición de plantillas, WordPress 5.8 también trae muchos bloques temáticos que pueden mostrar información recuperada dinámicamente de la base de datos. Algunos de estos bloques también se pueden utilizar en contextos que no son de FSE (consulte el número 28744).

Los bloques temáticos llevan las funcionalidades de las etiquetas de plantilla a los temas clásicos, y puede usarlos de la misma manera que los bloques normales. Por ejemplo, puede agregar etiquetas de publicación o la imagen destacada de la publicación en cualquier parte del contenido o plantilla de la publicación. Para tener una idea de la cantidad de bloques de temas agregados al núcleo con WordPress 5.8, simplemente escriba /correo en el marcador de posición del bloque:

Un bloque de tema útil disponible con WordPress 5.8 es el Cerrar sesión block, que proporciona enlaces de inicio y cierre de sesión. Opcionalmente, puede mostrar el formulario de inicio de sesión en lugar de un enlace. Los administradores del sitio también pueden personalizar el objetivo de redireccionamiento (consulte el PR # 29766).

Para obtener una vista más cercana de los bloques FSE, consulte el problema «Habilitación de bloques del editor de sitio completo en temas clásicos» en Github.

El bloque de bucle de consulta

¿Cuántas veces se ha encontrado en una situación en la que necesita mostrar una lista personalizada de publicaciones de blog o tipos de publicaciones personalizadas? Piense en productos, eventos, bienes raíces … Por supuesto, tiene toneladas de complementos para elegir, pero la capacidad de crear consultas altamente personalizadas a menudo requiere habilidades de desarrollador para lidiar con el bucle de WordPress.

Con la introducción del bloque Query Loop en WordPress Core, los propietarios y administradores del sitio pueden crear listas de publicaciones y CPT sin escribir un código complejo o contratar a un desarrollador, al menos en los casos de uso más comunes.

Entonces, ¿qué hace el bloque de bucle de consulta?

En resumen, hace el mismo trabajo que WordPress Loop, pero en el contexto visual del editor de bloques.

El bloque Query Loop realiza una consulta basada en la configuración del usuario en la base de datos de WordPress, recorre cada publicación recuperada y muestra datos en la página.

Después de un desarrollo intensivo, este bloque ha alcanzado su estructura actual y ahora consta de dos bloques anidados: el Consulta y Plantilla de publicación bloques.

Al ser una función avanzada, el bloque Query Loop requiere algunas configuraciones.

Primero, puede elegir entre diferentes patrones de bloques enumerados en la vista Carrusel y Cuadrícula. Una vez que haya elegido su patrón, simplemente haga clic en Escoger, y el bloque Query Loop generará su lista personalizada de publicaciones.

Si hace clic en Empiece en blanco, verá una lista de cuatro variaciones de bloques Core: Título y fecha; Título y extracto; Título, fecha y extracto; y Imagen, fecha y título (consulte Patrones de oferta en la configuración del bloque).

Una vez en su lugar, al seleccionar el bloque Query Loop se mostrará la barra lateral de configuración del bloque, donde puede construir su consulta. Puede heredar la consulta de la URL o personalizar los argumentos de la consulta: el tipo de publicaciones que se incluirán en la lista, el orden de visualización y si desea o no tener publicaciones fijas.

También puede configurar varios filtros, eligiendo entre categorías, autores y palabras clave.

Además, un Configuraciones de pantalla El botón en la barra de herramientas del bloque proporciona más configuraciones para controlar el número de elementos por página, el desplazamiento y el número máximo de páginas para mostrar.

Sí, el bloque Query Loop es una herramienta poderosa que permite a los propietarios del sitio crear listas altamente personalizadas de publicaciones y tipos de publicaciones personalizadas.

Pero si recorre los parámetros de la clase WP_Query, está claro que el nivel de personalización posible usando el código es mucho más granular que lo que es posible usando el bloque Query Loop.

Sin embargo, es una herramienta valiosa y flexible que se presta a muchos casos de uso y es muy probable que veamos más mejoras en el futuro.

Vista de lista persistente en el editor de publicaciones

Otra característica de FSE extendida al editor de publicaciones es la Vista de lista persistente. Antes de WordPress 5.8 (y Gutenberg 10.7), la Vista de lista se mostraba en una ventana emergente. Al mover el foco fuera de la ventana emergente, la lista desaparecería.

Por el contrario, el Editor del sitio mostró la Vista de lista en una barra lateral que contiene todo el árbol de bloques.

Con WordPress 5.8, la Vista de lista ahora se muestra en una barra lateral en el Editor de publicaciones, lo que permite a los usuarios navegar por el árbol de bloques de manera más rápida y precisa.

Al hacer clic en un elemento en la Vista de lista, se resalta el elemento de la lista y se mueve el foco al bloque correspondiente en el lienzo del Editor de publicaciones. Además, si coloca el cursor sobre los elementos en la Vista de lista, tanto el elemento como el bloque correspondiente en el Editor de publicaciones se resaltan.

Por último, agregar un ancla a un bloque también aparecerá junto al elemento correspondiente en la vista de lista.

Con todas estas mejoras en la Vista de lista, navegar por documentos complejos debería ser mucho más fácil.

Editor de widgets basados ​​en bloques y widgets de bloque en el personalizador

los editor de widgets basado en bloques es un proyecto amplio que tiene como objetivo llevar la interfaz del editor de bloques a los widgets de temas clásicos.

El nuevo editor de widgets ofrece muchas ventajas a la gran mayoría que todavía usa temas clásicos. Al mismo tiempo, les permite familiarizarse con la interfaz del bloque antes de que se convierta en estándar para todos los usuarios de WordPress.

Como señala Anne McCarty, los widgets basados ​​en bloques ofrecen varias ventajas, incluidas las siguientes:

• Ahora puedes crear diseños en barras laterales, encabezados y pies de página con columnas, separadores, espaciadores y otros bloques de diseño.
• Los widgets ahora son compatibles edición de texto enriquecido de forma predeterminada, sin la necesidad de que los usuarios agreguen código personalizado o incrusten un editor HTML de terceros con un complemento.
• Muchos widgets basados ​​en shortcode ahora son disponible como bloques, optimizando la experiencia de edición.

Andrei Draganescu también enfatiza las ventajas que podemos obtener al poder editar widgets desde una interfaz basada en bloques:

El principal beneficio de actualizar la funcionalidad de los widgets a bloques proviene de la capacidad de editar directamente los widgets utilizando la interacción de bloque familiar que usa al editar una página o publicar en su sitio. Poder usar bloques abre toneladas de nuevas posibilidades creativas, desde mini diseños sin código hasta acceder a la vasta biblioteca de bloques centrales y de terceros para crear contenido.

No tiene que preocuparse de que sus widgets dejen de funcionar con WordPress 5.8 porque la comunidad ha trabajado arduamente para garantizar la compatibilidad con versiones anteriores, de modo que «los widgets existentes y los widgets de terceros sigan funcionando y se puedan usar junto con los bloques» (consulte Bloquear editor de widgets basado en WordPress 5.8).

Pero nuevamente, para evitar problemas de compatibilidad en su instalación existente de WordPress, no olvide probar la nueva versión en un entorno de prueba antes de actualizar su sitio en vivo.

Para aquellos de ustedes que opten por no usar el editor de widgets basados ​​en bloques en este momento, aún es posible restaurar la pantalla de widgets clásicos de tres maneras diferentes:

1. Puede instalar el complemento oficial Classic Widgets, que restaura la interfaz anterior de la pantalla de widgets. El complemento «se admitirá y se mantendrá hasta al menos 2022, o durante el tiempo que sea necesario».
2. Los desarrolladores de temas pueden deshabilitar el editor de widgets basados ​​en bloques eliminando el soporte de temas como de costumbre:

   remove_theme_support( 'widgets-block-editor' );

3. Un nuevo use_widgets_block_editor El filtro también se puede utilizar:

   add_filter( 'use_widgets_block_editor', '__return_false' );

Consulte también Restaurar el editor de widgets clásico en el Editor de bloques de widgets. Visión general.

Bloquear widgets en el personalizador

Como parte del mismo proyecto, WordPress 5.8 también trae bloquear widgets al personalizador.

Agregar un widget basado en bloques en el personalizador es bastante sencillo. Puede iniciar el personalizar insertador de widgets haciendo clic en el icono más en la esquina superior derecha del panel de widgets.

También puede iniciar el insertador rápido desde la parte inferior del panel de widgets, como se muestra en la siguiente imagen.

En el momento de escribir este artículo, la nueva interfaz de edición de widgets aún requiere mejoras y correcciones de errores, pero las posibilidades de personalización son prácticamente ilimitadas.

Básicamente, a partir de WordPress 5.8, tendrá el poder del editor de bloques en el personalizador y podrá crear barras laterales altamente personalizadas sin problemas.

El editor de widgets basado en bloques dev-note proporciona una descripción más detallada del editor de widgets basado en bloques, con ejemplos y recursos para desarrolladores.

Funciones y mejoras del editor de bloques

Además de la primera implementación de FSE, WordPress 5.8 también trae nuevas características y mejoras a varios elementos del editor de bloques, que mejoran significativamente la experiencia de edición general.

Estos cambios incluyen:

Mejoras en bloques de texto y medios

Transformar un bloque en un columnas El bloqueo ha sido posible desde hace un tiempo. Sin embargo, todos los bloques se transforman en bloques de columnas con una sola columna. Esto podría conducir a resultados subóptimos para el medios y texto bloque, para el que una sola columna no suele ser adecuada.

Comenzando con WordPress 5.8 (y Gutenberg 10.2), transformando el medios y texto bloquear en un columnas El bloque agrega automáticamente dos columnas: una para la imagen y otra para el texto.

Mejoras en bloques reutilizables

Los bloques reutilizables permiten al usuario guardar un bloque o un grupo de bloques para reutilizarlos más tarde en cualquier publicación o página de un sitio web. Esto es útil principalmente para usuarios que incluyen repetidamente el mismo bloque o grupo de bloques en diferentes publicaciones / páginas.

Con WordPress 5.8, los bloques reutilizables son visualmente más claros, lo que los hace más fáciles de administrar para los usuarios de WordPress.

Aquí hay una lista rápida de mejoras de bloques reutilizables que los usuarios encontrarán después de actualizar sus sitios web a WordPress 5.8:

• Al crear un bloque reutilizable, un modal ahora permite a los usuarios asignar un nombre al bloque.
• El nombre del bloque reutilizable ahora se muestra en la barra de herramientas del bloque, la lista de navegación y las rutas de navegación.
• Cuando se selecciona un bloque secundario, ahora se describen los bloques reutilizables. Esto marca una mejora significativa en la usabilidad, ya que le permite identificar fácilmente el bloque principal y su contenido.
• Ahora es posible modificar el nombre del bloque en el inspector de la barra lateral.

Barras de herramientas de bloque normalizadas

Se han reorganizado varias barras de herramientas de bloques para proporcionar una interfaz de usuario coherente en todos los bloques y mejorar la experiencia del usuario. Ahora, los controles de la barra de herramientas se agrupan siguiendo el orden semántico «meta, nivel de bloque, en línea».

Desde Gutenberg 10.1 y Gutenberg 10.3, se ha normalizado un conjunto completo de barras de herramientas de bloques. Estos incluyen una imagen, botón, botones, lista, encabezado, párrafo, cita, audio, archivo, contenido multimedia y texto, video y más.

Según Matias Ventura:

Las agrupaciones semánticas que tenemos en la barra de herramientas (meta, nivel de bloque, en línea) también deben tener una representación visual con los bordes. En este momento, los controles de nivel de bloque separados tienen diferentes representaciones, incluidos casos como Navegación, donde cada uno tiene bordes.

Entonces, desde WordPress 5.8, la barra de herramientas de bloques agrupa los controles en segmentos rodeados por bordes. Además:

• los Meta El segmento contiene controles de tipo bloque, como el conmutador de bloques, el controlador de arrastre y el control de movimiento.
• los Nivel de bloque El segmento contiene herramientas de bloque específicas que afectan a todo el contenido, como la alineación en un bloque de párrafo o la vinculación en un bloque de imagen.
• los Nivel en línea / Otro segmento contiene herramientas de transformación en línea, como formateo en línea en un bloque de texto.
• los Más El menú incluye herramientas adicionales.

La siguiente imagen compara la barra de herramientas del bloque de imágenes en WordPress 5.7 y 5.8:

Mejoras en la barra de herramientas superior

Con el modo de barra de herramientas superior habilitado en versiones anteriores de WordPress, la barra de herramientas superior y la barra de herramientas de bloque se mostraban una al lado de la otra, como se muestra en la siguiente imagen:

Con WordPress 5.8, habilitar la vista de la barra de herramientas superior fijará la barra de herramientas de bloque en la parte superior del editor, justo debajo de la barra de herramientas superior. Esto ocurre independientemente del ancho del navegador y debería mejorar significativamente la experiencia del usuario.

Esta mejora también trae cambios para los desarrolladores, ya que unifica las API de la barra de herramientas bajo la <BlockTools /> componente (ver PR # 31134).

PDF incrustados

Cuando se agrega un archivo PDF al documento a través del bloque de archivos, una nueva barra lateral le permite habilitar / deshabilitar una versión PDF incrustada (consulte PR # 30857).

Puede arrastrar el archivo directamente al lienzo del editor o simplemente seleccionarlo de la biblioteca. También es posible ajustar manualmente la altura del visor de PDF o mediante el control de la barra lateral.

Todos los principales navegadores web admiten el visor de PDF, excepto los navegadores móviles.

Soporte de bloque de duotono

Una de las características más interesantes fusionadas en Core con WordPress 5.8 es el filtro duotono, introducido por primera vez con Gutenberg 10.6.

Disponible como una función de «soportes de bloque», el filtro de duotono está habilitado de forma predeterminada en la imagen del núcleo y los bloques de portada. Sin embargo, en el bloque de portada, no funciona con fondos fijos.

Las barras de herramientas de imagen y bloque de portada ahora muestran una Aplicar filtro de duotono control que muestra un selector de duotono con muchos ajustes preestablecidos para elegir.

Dos subcontroles permiten personalizar sombras e iluminaciones por separado. El efecto se aplica con un filtro SVG oculto con estilos en línea y se aplica con un nombre de clase específico.

La nueva herramienta viene en pareja con una nueva color.__experimentalDuotone propiedad, lo que permite a los desarrolladores agregar el filtro duotono a bloques o partes de bloques en su block.json archivo (más sobre esto en la referencia del objeto de color):

supports: {
	color: {
		__experimentalDuotone: '> .duotone-img, > .duotone-video',
		background: false,
		text: false
	}
}

Cuando un bloque declara su apoyo a color.__experimentalDuotone, a style El atributo se puede utilizar para establecer colores predeterminados personalizados:

attributes: {
	style: {
		type: 'object',
		default: {
			color: {
				duotone: [
					'#FFF',
					'#000
				]
			}
		}
	}
}

A continuación puede ver la misma imagen con dos efectos de duotono diferentes aplicados:

Los desarrolladores pueden definir ajustes preestablecidos de duotono en el theme.json archivo (consulte la siguiente sección), como se muestra en el siguiente fragmento:

{
"version": 1,
"settings": {
	"color": {
		"duotone": [
			{
				"colors": [ "#000", "#7f7f7f" ],
				"slug": "black-and-white",
				"name": "dark-grayscale"
			}
		],
	...

Puede leer más sobre los filtros de dos tonos en Colorear sus imágenes con filtros de dos tonos.

Colores y bordes de bloques de tabla

WordPress 5.8 también trae un par de mejoras al bloque Tabla, incluido un mejor control sobre el fondo de la tabla y los colores de primer plano.

Otra adición al bloque Table es el soporte de bloque de borde, que brinda a los usuarios la capacidad de controlar el color, el estilo y el ancho del borde.

Si el tema activo admite la nueva función, una nueva configuración de borde El panel proporciona tres nuevos controles para las personalizaciones del usuario.

Los desarrolladores pueden agregar compatibilidad con bloques de borde a sus temas agregando el siguiente código al theme.json expediente:

"border": {
	"customColor": true,
	"customStyle": true,
	"customWidth": true
}

Mejoras en el insertador de bloques

En WordPress 5.8, el insertador de bloques se ha mejorado con varias adiciones (PR # 26938 y # 21080):

1. Navegación de teclado bidimensional en el insertador de bloques. Ahora podemos navegar entre bloques de forma más precisa e intuitiva.

• Al presionar la flecha hacia arriba (↑) y la flecha hacia abajo (↓), el enfoque se mueve a la fila de arriba o de abajo.
• Prensado Pestaña o Mayús + Tabulador permite mover el foco entre el cuadro de búsqueda, la lista de pestañas y el primer elemento de cada categoría.

2. Una nueva categoría «Tema» para las partes y variaciones de la plantilla ahora aparece en el insertador en Edición de sitio completo (ver PR # 30020).

3. Varias palabras en el comparador de frases de autocompletar ahora están permitidos (ver PR # 29939).

Mejoras adicionales del editor de bloques

WordPress 5.8 trae toneladas de cambios pequeños y medianos adicionales que valen unas pocas líneas aquí. Entre estas mejoras, mencionaríamos las siguientes:

Soporte de arrastrar y soltar en bloques de cubierta

Ahora puede arrastrar y soltar imágenes desde su escritorio para reemplazar el fondo de un bloque de cubierta (consulte Gutenberg 10.3 y PR # 29813).

IU de publicación mejorada

Desde WordPress 5.8, la interfaz de usuario de publicación muestra el ícono y el título del sitio para que sea más claro dónde publicará sus publicaciones o páginas (Gutenberg 10.4).

Esta mejora es beneficiosa si está trabajando en modo de pantalla completa o en dispositivos móviles.

Bloquear configuraciones y estilos con theme.json

Con WordPress 5.8, el theme.json El archivo se convierte en «un punto central de configuración», proporcionando una nueva forma para que los desarrolladores de temas personalicen la configuración y los estilos del editor.

Usando un theme.json archivo, los temas pueden establecer ajustes preestablecidos personalizados y / o agregar soporte para nuevas funciones, como duotono y bordes de tabla (consulte Configuración y estilos globales).

Según André Maneiro:

Este nuevo mecanismo tiene como objetivo asumir y consolidar todos los diversos add_theme_support llamadas que antes eran necesarias para controlar el editor.

Por ejemplo, puede establecer globalmente un ajuste preestablecido de duotono personalizado con el siguiente código:

{
	"version": 1,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#000", "#0FF" ],
					"slug": "black-cyan",
					"name": "Black Cyan"
				}
			],

Esto sobrescribirá los ajustes preestablecidos predeterminados y verá solo una opción de duotono:

El nuevo mecanismo proporciona una forma de controlar la configuración de forma global o por bloque. Por ejemplo, puede agregar un tamaño de fuente personalizado de 12px globalmente agregando el siguiente ajuste preestablecido a su theme.json expediente:

{"version": 1, "settings": {"typography": {"customLineHeight": true, "fontSizes": [
				{
					"slug": "extra-extra-small",
					"size": "12px",
					"name": "Extra extra small"
				},
				{...}

This results in a new font size available for users to utilize with any text in their content.

If you only want to customize the paragraph block, your code will be slightly different:

{
	"version": 1,
	"settings": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"fontSizes": [
						{
							"slug": "extra-extra-small",
							"size": "12px",
							"name": "Extra extra small"
						},
						{
							"slug": "extra-small",
							"size": "16px",
							"name": "Extra small"
						},
						{
							"slug": "small",
							"size": "18px",
							"name": "Small"
						},
						{
							"slug": "normal",
							"size": "20px",
							"name": "Normal"
						},
						{
							"slug": "large",
							"size": "24px",
							"name": "Large"
						}
					]}}}}}

¡Eso es todo! Acaba de configurar sus ajustes preestablecidos de tamaño de fuente personalizados en el bloque de párrafo.

Los bloques centrales se han actualizado para seguir el nuevo mecanismo, mientras que los bloques de terceros pueden adaptarse al nuevo mecanismo utilizando React. useSetting hook (lea más sobre esta función en dev-note y documentación de API):

const isEnabled = useSetting( 'spacing.margin' );

El nuevo mecanismo basado en el theme.json El archivo no se aplica solo a la configuración de bloqueo. De hecho, a partir de WordPress 5.8, ya no será necesario crear estilos de editor y ponerlos en cola. Bastará con declarar presets dentro del theme.json expediente; el motor generará las clases y las pondrá en cola automáticamente tanto en el editor como en la interfaz.

El motor también generará las correspondientes propiedades personalizadas de CSS.

En el ejemplo anterior, establecemos cinco fontSizes preajustes para el bloque de párrafo. Para esos ajustes preestablecidos, se generarán las siguientes propiedades personalizadas de CSS:

p {
	--wp--preset--font-size--extra-extra-small: 12px;
	--wp--preset--font-size--extra-small: 16px;
	--wp--preset--font-size--small: 18px;
	--wp--preset--font-size--normal: 20px;
	--wp--preset--font-size--large: 24px;
}

Una vez que haya establecido el tamaño de fuente del párrafo en su theme.json archivo, el correspondiente p elemento toma el has-{preset-slug}-{preset-category} clase.

Esto significa que un párrafo con un extra-extra-small el tamaño de la fuente obtendrá el has-extra-extra-small-font-size clase:

<p class="has-extra-extra-small-font-size">Lorem ipsum dolor...</p>

Y aquí está el bloque de declaración CSS:

p.has-extra-extra-small-font-size {
	font-size: var(--wp--preset--font-size--extra-extra-small) !important;
}

Para una vista más cercana de la configuración y los estilos con theme.json, asegúrese de consultar la documentación de la API y la nota de desarrollo.

Además, consulte la convocatoria FSE de Anne McCarty para realizar pruebas para obtener una lectura más útil y un desafío emocionante para los desarrolladores que desean explorar la nueva theme.json características.

Mejoras en la API de bloques

Las mejoras de la API de bloques que vienen con WordPress 5.8 merecen una atención especial por parte de los desarrolladores de complementos.

Utilizando el block.json file ahora se recomienda como la forma canónica de registrar tipos de bloque y ofrece varias ventajas:

• En cuanto al rendimiento, si el tema admite la carga diferida de activos, el registro de tipos de bloques a través del block.json El archivo optimizará automáticamente la puesta en cola de recursos. Eso es porque los recursos especificados por el style y script las propiedades se pondrán en cola en la interfaz solo cuando se detecte el bloque. Esto permite el desarrollo de complementos más eficientes, reduciendo el tamaño de la página y previniendo varios de los problemas cubiertos en este artículo.
• los block.json file simplifica el registro de bloques del lado del servidor al permitir que el punto final de la API REST de tipos de bloques enumere el bloque.
• los block.json El archivo también es necesario si decide enviar su complemento de bloque al directorio de complementos de WordPress.

Cambios en la función register_block_type

Desde WordPress 5.8, el register_block_type La función se ha mejorado para leer metadatos de la block.json expediente. Ahora, el primer parámetro acepta la ruta a la carpeta donde el block.json se encuentra el archivo.

La función se puede utilizar como se muestra en el siguiente ejemplo:

function create_custom_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );

Devuelve el tipo de bloque registrado o false en caso de falla.

Como puede notar, la función register_block_type ahora se usa de la misma manera que el register_block_type_from_metadata función, que anteriormente era la única función disponible para registrar un tipo de bloque leyendo los metadatos del block.json expediente. Como lo explicó Greg Ziółkowski:

Decidimos consolidar la funcionalidad preexistente disponible con register_block_type_from_metadata método en register_block_type para evitar cierta confusión que creó. Todavía es posible usar ambas funciones, pero planeamos usar solo la versión más corta en los documentos y herramientas oficiales a partir de ahora.

Una vez que el bloque está registrado en el servidor, solo necesita registrar la configuración en el cliente usando el mismo nombre de bloque en su index.js expediente.

Para obtener una descripción más detallada de las mejoras de la API de bloques introducidas por WordPress 5.8, asegúrese de consultar la nota de desarrollo de Greg Ziółkowski.

Soporte WebP en WordPress 5.8

Aquí en Kinsta, estamos obsesionados con la velocidad del sitio y el rendimiento de WordPress. Es por eso que la compatibilidad con el formato WebP en WordPress 5.8 es una noticia tan emocionante para nosotros.

Considerado un formato de próxima generación, WebP es un formato de imagen desarrollado por Google que proporciona «mejor compresión que PNG o JPEG, lo que significa descargas más rápidas y menos consumo de datos».

Según Google:

WebP es un moderno formato de imagen que proporciona superior sin pérdidas y con pérdidas compresión de imágenes en la web. Con WebP, los webmasters y los desarrolladores web pueden crear imágenes más pequeñas y ricas que hacen que la web sea más rápida.

Las imágenes sin pérdida de WebP son un 26% más pequeñas en comparación con las PNG. Las imágenes con pérdida de WebP son un 25-34% más pequeñas que las imágenes JPEG comparables con un índice de calidad SSIM equivalente.

A partir de WordPress 5.8, puede utilizar el formato de imagen WebP de la misma forma que los formatos JPEG, PNG y GIF. Simplemente cargue sus imágenes en su Biblioteca de medios e inclúyalas en su contenido.

En un artículo anterior, analizamos en profundidad el formato WebP y las herramientas disponibles para usarlo en WordPress. Ahora, debido al soporte para imágenes WebP en WordPress 5.8, las cosas cambian un poco. Como el formato WebP es compatible de inmediato, no es necesario instalar complementos de terceros para cargar imágenes WebP en WordPress, al menos en los casos de uso más comunes.

Tenga en cuenta que, aunque ahora puede cargar sus imágenes WebP en WordPress utilizando la Biblioteca de medios, WordPress no admite la conversión automática de imágenes al formato WebP. Para habilitar esa función en su sitio web, necesitará un complemento de WordPress WebP de terceros.

Cómo usar imágenes WebP en WordPress

Puede convertir sus imágenes a WebP de muchas formas diferentes:

Si opta por una herramienta de línea de comandos, puede codificar y decodificar sus imágenes utilizando las utilidades cwebp y dwebp. Por ejemplo, el siguiente comando ejecuta una conversión básica de JPEG a WebP:

cwebp [options] original_image.jpg -o compressed_image.webp

También puede ejecutar una conversión masiva de sus imágenes usando Bash y cwebp (ejemplo de Jeremy Wagner):

find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} ;

El comando anterior convierte todo .png imágenes a .webp formato con un factor de compresión de 75.

Una vez que tenga sus imágenes de WebP, simplemente puede cargarlas usando la Biblioteca de medios de WordPress. A continuación, puede ver una imagen JPEG de 127 KB antes de la conversión en la Biblioteca de medios:

¡El tamaño de la imagen WebP comprimida es un 42% más pequeño que la imagen JPEG original!

Por último, las imágenes WebP tienen las mismas funciones de edición que las imágenes JPEG, PNG y GIF. Puede recortarlos, rotarlos, voltearlos y escalarlos, y aplicar cambios a los tamaños de imagen que elija.

Advertencias sobre WebP en WordPress 5.8

Según Adam Silverstein:

Las imágenes WebP admiten compresión con y sin pérdida, así como un formato animado y soporte para imágenes transparentes. En WordPress, el formato WebP sin pérdidas solo se admite cuando el servidor de alojamiento usa Imagick (la biblioteca PHP) hasta que LibGD agrega soporte. Además, los formatos animados y alfa aún no son compatibles con las imágenes redimensionadas (cuando carga imágenes en estos formatos, se crean imágenes con pérdida).

Si su proveedor de alojamiento web no admite imágenes WebP, verá un mensaje de error cuando intente cargarlas. Si no está seguro de si su proveedor de alojamiento web es compatible con la biblioteca Imagick, la pestaña Información de la herramienta Estado del sitio incluye un Biblioteca imagick campo que proporciona esa información.

Con el soporte de WebP, WordPress 5.8 también introduce dos campos adicionales en la sección Manejo de medios en el estado del sitio: Versión imagick y Formatos de archivo compatibles con ImageMagick.

Si WebP no figura entre los tipos de archivos admitidos, deberá comunicarse con su proveedor de alojamiento web para obtener ayuda.

La nota de desarrollo proporciona información adicional sobre la compatibilidad con WebP en WordPress 5.8, preguntas frecuentes útiles y más recursos.

Si está interesado en la optimización de imágenes, es posible que también le gusten los siguientes tutoriales:

Funciones adicionales para desarrolladores

Encontrarás docenas de funciones interesantes para desarrolladores en WordPress 5.8. En este artículo, hemos prestado más atención a los que deberían tener el impacto más significativo en su trabajo de desarrollo. Pero, de hecho, hay muchas características nuevas que merecen atención, incluidas las siguientes:

API de soportes de bloque

WordPress 5.8 agrega un nuevo bloque compatible con banderas que permiten a los desarrolladores personalizar los bloques registrados con las últimas funciones de bloque.

Además del soporte de bloque de duotono experimental mencionado anteriormente (color._experimentalDuotone), WordPress 5.8 también agrega soporte para el color de los enlaces. Para aprovechar esta función, simplemente agregue la siguiente marca a los metadatos de su bloque:

supports: {
	color: {
		link: true;
	}
}

Puede establecer valores predeterminados utilizando atributos, como se muestra en el siguiente ejemplo, o establecer sus valores predeterminados en theme.json:

attributes: {
	style: {
		type: 'object',
		default: {
			color: {
				link: '#FF0000',
			}
		}

Los cambios adicionales de la API de bloques incluyen:

• fontSize y lineHeight los soportes se estabilizan.
• spacing se ha ampliado el soporte y ahora puedes controlar margin y padding, así como control individual top, right, bottom y left Tamaños.

Puede leer más sobre Block Admite API en WordPress 5.8 en Block supports API updates dev-note.

Para obtener una visión más detallada de cómo usar la API de Block Supports, consulte la documentación oficial de la API de Block Supports.

Fichas personalizadas de salud del sitio

Dos nuevos ganchos ahora permiten a los desarrolladores agregar sus pestañas personalizadas a la interfaz de Salud del sitio y personalizar las pantallas disponibles.

los site_health_navigation_tabs filtrar es una matriz asociativa de ID de pestaña y etiquetas para registrar una nueva pestaña en la pantalla Estado del sitio. Puede usar el filtro agregando el siguiente código de ejemplo al archivo de funciones de su tema o al complemento personalizado:

function kinsta_site_health_navigation_tabs( $tabs ) {
	$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );

	return $tabs;
}
add_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );

La siguiente imagen muestra la nueva pestaña Estado del sitio:

Gracias a site_health_navigation_tabs filtro, también es posible reordenar pestañas o eliminar uno o más elementos.

los site_health_tab_content acción se activa cuando un usuario visita la pantalla de estado del sitio, excepto por el valor predeterminado Estado pantalla. Puede usar este gancho como se muestra en el siguiente fragmento (ejemplo de la nota de desarrollo):

function kinsta_site_health_tab_content( $tab ) {
	// Return if this is not your tab.
	if ( 'kinsta-site-health-tab' !== $tab ) {
		return;
	}

	// Include the interface, kept in a separate file just to differentiate code from views.
	include trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views/kinsta-site-health-tab.php';
}
add_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );

Primero, detecta si la pestaña actual es su pestaña personalizada, luego carga el contenido de la pantalla de salud del sitio desde una .php expediente. los site_health_tab_content La acción también permite a los desarrolladores extender el valor predeterminado Información pestaña agregando información específica a sus complementos o temas.

Cambios en la API del editor de bloques para admitir varias pantallas de administración

Con WordPress 5.8, el editor de publicaciones ya no es la única pantalla de administración que usa el editor de bloques (la pantalla de widgets es un ejemplo).

Los colaboradores principales encontraron varios ganchos definidos en el servidor según el $post objeto. Este objeto no está presente en las pantallas de edición, widgets y navegación del sitio. En el futuro, varios filtros han quedado obsoletos y se han reemplazado con sustituciones sensibles al contexto.

Además, un nuevo WP_Block_Editor_Context Se ha introducido una clase que representa el contexto actual del editor de bloques y se han introducido varios métodos.

Estos cambios mejoran estas pantallas con nuevas capacidades y permiten a los desarrolladores agregar sus personalizaciones.

Para obtener una lista completa de los cambios de la API del editor de bloques relacionados con las pantallas de administración, consulte la nota de desarrollo de Greg Ziółkowski.

Funciones y mejoras adicionales

Hay tantas características y cambios nuevos para los desarrolladores que trae WordPress 5.8 que sería imposible para nosotros mencionarlos todos en este artículo. Pero hemos recopilado una lista de notas de desarrollo que no se cubren aquí para su lectura adicional:

WordPress 5.8 presenta la primera implementación de la edición completa del sitio 🎁 ¿Tiene curiosidad por el futuro de WordPress? No se pierda nuestra descripción detallada de las principales características y cambios que vienen con WordPress 5.8 🚀Haz clic para tuitear

Resumen

WordPress 5.8 marca un hito en el camino hacia la edición completa del sitio. Pero el segundo lanzamiento de WordPress del año trae mucho más que FSE. Los usuarios y desarrolladores encontrarán toneladas de mejoras en el editor de bloques, un nuevo theme.json mecanismo, una API de bloques más potente, compatibilidad con el formato de imagen WebP y mucho más.

Nos han impresionado especialmente las mejoras, tanto pequeñas como grandes, en el editor de bloques y su interfaz de usuario. Nos encanta la navegabilidad mejorada entre bloques, la barra de herramientas de bloques renovada, la claridad enriquecida de la interfaz y las mejoras en varios bloques.

Estos pequeños cambios mejoran la La experiencia de edición poco a poco y, sin casi darnos cuenta, nos encontramos utilizando un software mejor y más robusto. ¡Eso es WordPress!

¡Ahora te toca a ti! ¿Qué opina sobre la edición completa del sitio? ¿Y cuáles son sus cambios favoritos que vienen con WordPress 5.8?