Nuevas funciones en WordPress 5.8 (edición de página completa, imágenes WebP, estilos y configuraciones generales, etcétera.)

WordPress 5.8 "Tatum" ya está aquí, este es un lanzamiento esencial. Aparte de una asombrosa cantidad de funciones, novedades y correcciones de fallos, WP 5.8 también presenta una nueva forma de crear websites y agrupar la primera función en un proyecto más grande. Editor de todo el lugar.

Aparte de ajustar totalmente el sitio, WordPress 5.8 también hizo varios cambios y novedades en muchas áreas del CMS.

Los usuarios de WordPress que no usen el complemento de Gutenberg hallarán funcionalidades y novedades en un total de nueve versiones de Gutenberg (para conseguir más información sobre cada versión, consulte Gutenberg 9.9, 10.0, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10,7).

Para los usuarios que se toman en serio el rendimiento del página web, una nueva característica esencial es la compatibilidad con el formato WebP.

A los programadores les agrada que IE11 se haya eliminado de la lista de navegadores compatibles. La nueva configuración de bloques y el mecanismo de estilo se basan Theme.json, Sistema de registro de bloques mejorado apoyado Block.jsonY muchas de las mejoras de API que traerá la segunda versión de WordPress en 2021.

Conque siéntese, puesto que esto se convierte en una característica larga y una descripción general de las mejoras que allanarán el camino para nuevas y capaces herramientas de creación de websites que se estima que aparezcan en los próximos meses.

¡WordPress 5.8 "Tatum" ya está aquí! 🥳 Consulte las novedosas funciones y disfrute de la primera implementación de la personalización completa del portal web🎁Haga click para twittear

Funciones terminadas de edición de sitios en WordPress 5.8

La visión para la edición en todo el ubicación es proveer un conjunto de herramientas y peculiaridades que los individuos de WordPress tienen la posibilidad de emplear para construir websites completos utilizando bloques. En el momento en que editamos completamente un ubicación, vemos que se tienen la posibilidad de usar varios bloques para hacer todos los elementos de la página, desde los menús de navegación hasta la marca del sitio, los widgets de la barra lateral, las plantillas y más.

Más allá de que WordPress 5.8 presenta ciertas características que caen en el alcance de la edición de lugar terminado (FSE), no espere un ambiente de construcción de sitios visual totalmente servible. El FSE aún está en curso y la etapa de prueba pública empezó con la publicación de WordPress 5.8. Según Joseph Haden Chomphossy:

Una edición completa de un sitio web es una colección de elementos que juntos hacen un gran cambio que puede ser demasiado para solo una versión. El contexto más importante para comunicar es que no se muestra al usuario como una experiencia estándar completa. Uno de los comentarios mucho más obvios en la primera etapa de la fusión fue que nuestro personal de complementos (agentes, articulistas de temas, programadores de complementos, desarolladores de websites, etc.) no tuvo suficiente tiempo para prepararse para cambios futuros.

Teniendo esto en cuenta, este proceso de emparejamiento no es un interruptor de encendido / apagado. Ahora el enfoque no está en una experiencia de usuario completa y matizada, sino más bien en más apuestas públicas en WordPress 5.8.

En consecuencia, WordPress 5.8 no da una experiencia FSE completa y completa. Por contra, desde la versión 5.8, se agregarán y mejorarán novedosas funciones transcurrido un tiempo. Por exactamente la misma razón, podríamos meditar que WordPress 5.8 no posee mucho encontronazo en de qué forma estamos familiarizados a crear sitios web.

En el instante de redactar este producto, los dueños y administradores del sitio todavía necesitan disponer responsablemente temas de bloques (por poner un ejemplo, Twenty Twenty One Block (versión basada en bloques de Twenty Twenty One)) y habilitar la extensión de Gutenberg FSE.

La edición completa del ubicación incluye múltiples subelementos independientes, como el editor del lugar, estilos en general, bloques de consulta, bloques de navegación, plantillas, plantillas de bloque, etcétera., pero lo que está más cerca de editar un sitio web en WordPress 5.8 Modo de edición de plantillas Y los bloques temáticos correspondientes que se tienen la posibilidad de usar en este modo, los veremos mucho más adelante en el presente artículo.

A continuación, nos sumergimos en algunos Funcionalidad FSE dentro en el kernel con WordPress 5.8.

Modo de edición de plantillas

El modo perfecto de edición de plantillas proporciona una forma de crear una plantilla de mensaje / página usando bloques. Esta es una excelente forma de reducir la complejidad de la construcción de un lugar a fin de que los usuarios logren explotar las múltiples funciones de edición del ubicación desde fuera de el diseño de edición del sitio cuando estén acostumbrados a utilizar bloques. Esto asimismo es muy útil para los usuarios que no utilizan temas basados ​​en bloques, pero que aún procuran una manera fácil de crear y modificar plantillas por medio de el diseño del editor de bloques.

Ajustar temas en WordPress nunca ha sido tan fácil. Ya no es requisito hacer subtemas para crear plantillas personalizadas. En WordPress 5.8, la edición de una plantilla no se restringe a un tema de bloque, también se puede aplicar a temas tradicionales, aun si precisa utilizar temas tradicionales.

Editor de plantillas.

Solo puedes crear una exclusiva plantilla activándola Disponer en ordenador Barra lateral. Nuevo modelo El panel en este momento está disponible para que los usuarios cambien el modo perfecto de edición (consulte las Notas de la versión de Gutenberg 10.5).

Campo de muestra en la barra del costado del editor de bloques.

Afuera modelo En el panel, puede crear una nueva plantilla o modificar una plantilla existente.

Constituya el nombre del modelo.

Lleve a cabo click para hacer una exclusiva plantilla NuevoLuego ingrese el nombre del modelo en el modal y lleve a cabo click en hacer, Tu puedes comenzar.

Modo de edición de plantillas en WordPress 5.8.

En el modo de edición de plantillas, puede utilizar todos los bloques libres para crear una plantilla, incluyendo los bloques FSE como el título del sitio, el eslogan del sitio, inicio de sesión / cierre de sesión, etcétera.

En el momento en que esté satisfecho con la edición, puede volver al modo de edición de correo y guardar la plantilla por separado del contenido del mensaje / página como se expone en la próxima imagen:

Guarde las opciones de la plantilla.

La plantilla aparecerá en su banco de información de WordPress como un tipo de correo personalizado llamado. salvado wp_templateDe esta manera, no solo puede modificar plantillas desde el diseño del editor, sino también puede importarlas o exportarlas fácilmente como quiera. Asimismo puede usar plantillas en diferentes sitios web (al momento de redactar este producto, esta función solo está libre si habilita el complemento Gutenberg).

Exportación de modelos y piezas de modelos.

En el instante de redactar este producto, todavía existen algunos problemas con el modo perfecto de edición del modelo, como comunica Justin Tadlock en esta llamada de prueba y ensayo.

Inconveniente de alineación de veintiún con el tema tradicional de ancho terminado.

Sin embargo, solo precisa un poco de paciencia y esperar hasta el momento en que se resuelva el inconveniente primordial para entender totalmente de qué manera el modo perfecto de edición de plantillas cambiará la forma en que personaliza el aspecto de su página web.

Los usuarios ya no precisan capacidades de creador para controlar completamente el aspecto del cibersitio.

Se corrigió el problema de alineación de ancho terminado.

El modo perfecto de edición de plantillas está libre inicialmente para temas de bloque y temas tradicionales. Después de una discusión consciente sobre el canal de notificación 5.8, decidí permitir que el editor de plantillas se uniera al tema clásico y descartara el tema de bloqueo (ver asimismo Pull # 32858).

Según Carolina Nimark:

En un inicio, la edición de plantillas se usó en todos los temas. Los programadores de temas se preocupan no poder actualizar todos y cada uno de los temas clásicos existentes para admitir esta novedosa función. Gracias a cambios posteriores, el equipo de publicación y el editor eligieron cambiar el editor de plantillas para unirse al tema clásico.

Si quiere seleccionar un tema tradicional, los programadores tienen que en este momento agregar apoyo temático:

add_theme_support( 'block-templates' );

Usando un tema tradicional Theme.json Para cerrar sesión, suprima la compatibilidad con temas:

remove_theme_support(  'block-templates' );

Para conseguir una descripción general mucho más descriptiva de de qué forma funciona el modo de edición de plantillas en WordPress 5.8 y ejemplos de uso útiles, vea este vídeo de Anne McCarty:

Bloque temático

Como se mencionó previamente, FSE no es una función única, sino más bien un conjunto completo de funciones para hacer websites que no solo están relacionados con el editor de sitios. El modo perfecto de edición de plantillas es solo un ejemplo. Pero además de editar la plantilla, WordPress 5.8 también incluye muchos bloques de temas que pueden enseñar datos que se recuperan dinámicamente de la base de datos. Ciertos de estos bloques también se tienen la posibilidad de usar para conexiones que no sean FSE (consulte el número 28744).

A partir de WordPress 5.8, el bloque de edición terminado del sitio está disponible para contextos que no son de FSE.

El bloque de temas trae la funcionalidad de las etiquetas de modelo al tema clásico., Puedes utilizarlos como bloques comunes. Por poner un ejemplo, puede añadir una etiqueta de mensaje o una imagen actual a cualquier contenido o plantilla de mensaje; para comprender la proporción de bloques de temas agregados al kernel de WordPress 5.8 escribiendo /Oficina de correos En el marcador de posición del bloque:

Bloque temático propuesto.

Un bloque de tema útil para WordPress 5.8 es Iniciar sesión Cerrar sesión Bloque que da links de suscripción y cancelación. El formulario de inscripción se puede enseñar en vez de un link. El administrador del sitio asimismo puede cambiar el destino de reenvío (ver PR # 29766).

Comenzar / cerrar sesión evita que se establezca en el editor de bloques.

Se puede conseguir una vista descriptiva de los bloques FSE en "Activar el bloqueo del editor en todo el lugar en temas tradicionales" de Github.

Bloque de bucle de consulta

¿Cuántas ocasiones ha sentido que necesita ver una lista de publicaciones de blog personalizadas o un género de publicación? Piense en artículos, eventos, bienes raíces ... naturalmente, tiene una gran cantidad de extensiones para seleccionar, pero la capacidad de crear consultas adaptadas por norma general requiere que los programadores utilicen bucles de WordPress.

Una vez que Query Loop se incorpora en un sitio principal de WordPress, los propietarios y administradores de sitios web pueden hacer mensajes y listas CPT sin escribir código complejo o contratar programadores, cuando menos en las situaciones más frecuentes.

¿Qué hace el bloque de bucle de solicitud?

En resumen, funciona de la misma forma que WordPress Loop, pero en el contexto visual de un editor de bloques.

El bloque de bucle de solicitud realiza la consulta según la configuración del usuario en la banco de información de WordPress, recorre cada mensaje recuperado y exhibe la información en la página.

Tras un riguroso avance, este bloque alcanzó su estructura de hoy y ahora consta de 2 bloques anidados: preguntar y Plantilla de donación Trozo.

Consulta desde la vista de lista del bloque de bucle.

Como función avanzada, el bloque del período de sondeo necesita alguna determinación.

Primero, puede seleccionar entre los distintos métodos de bloque enumerados en las vistas de carrusel y cuadrícula, y cuando haya seleccionado un patrón, realice click en escoger, El bloque de bucle de consulta crea una lista de asistencia adaptada.

Consulta el modo de bloqueo de bucle en la vista de cuadrícula.

En el momento en que haces click Comience en blanco, Va a ver una lista de cuatro ediciones de bloques principales: Título y fecha; Título y extracto; Título, fecha y extracto; y Imagen, fecha y título (Consulte Modo de oferta para saber la configuración del bloque).

Variantes de bloque de bucle de consulta.

Tan pronto como se escoja el bloque "Query loop", aparecerá una barra del costado con la configuración de bloqueo donde puede crear consultas. Puede heredar la consulta de la URL o ajustar los parámetros de la solicitud: los tipos de mensajes que se incluirán en la lista, el orden de visualización y si hay mensajes anclados.

También puede detallar varios filtros para elegir entre categorías, factores y keywords.

Bloque de solicitud con la configuración de la barra del costado.

Además Ajuste de pantalla Los botones de la barra de herramientas del bloque proporcionan configuraciones avanzadas para supervisar el número de elementos por página, el movimiento y el número máximo de páginas para mostrar.

Ver la configuración del bloque de bloque de consultas.

Sí, el bloque de bucle de consulta es una herramienta poderosa que permite a los dueños de websites hacer listas de correo altamente adaptadas y géneros de correo personalizados.

Sin embargo, si examina los factores en la clase WP_Query, es obvio que el nivel de personalización viable con el código es mucho más fino que el grado de personalización posible con el bloque Query Loop.

Aún así, es una herramienta verdaderamente importante y maleable para muchos usos, y probablemente mejoremos más adelante.

Vista de lista continua en el editor de mensajes

Otra función de FSE que se ha extendido al editor de correo es Vista de lista continuaAntes de WordPress 5.8 (y Gutenberg 10.7), se mostraba una vista de lista en una ventana emergente. Si mueve el foco de la ventana nuevo, la lista se ocultará.

En cambio, el editor del lugar muestra una vista de lista en la barra del costado que incluye todo el árbol de bloques.

En WordPress 5.8, la vista de lista en este momento aparece en la barra del costado del editor de mensajes, lo que permite a los individuos andar por el árbol de bloques de manera mucho más rápida y precisa.

Barra del costado de vista de lista de WordPress 5.8.

Al clickear en un elemento de la visión de lista, se resalta el elemento de la lista y se desplaza el foco al bloque correspondiente en la pantalla del editor de mensajes. Si mueve el mouse sobre la vista de lista, el elemento y el bloque pertinente también se destacan en el editor de mensajes.

Mueva el mouse sobre el elemento en la visión de lista.

Por último, agregar un ancla al bloque también aparece al lado del elemento pertinente en la visión de lista.

Agregue puntos de anclaje a los bloques en WordPress 5.8.

Con todas y cada una de las mejoras en las vistas de lista, sería mucho más simple encontrar documentos complejos.

Bloquear el editor de widgets de bloque y bloquear widgets en el adaptador

Esta Editor de widgets basado en bloques Es un emprendimiento extenso diseñado para llevar la interfaz del editor de bloques a los widgets de temas tradicionales.

El nuevo editor de widgets ofrece varios provecho a la mayoría de la gente que todavía usan temas tradicionales. Al mismo tiempo, pueden acostumbrarse a la interfaz de bloqueo antes de que se transforme en estándar para todos y cada uno de los usuarios de WordPress.

Denegar el modo perfecto de widget.

Como señaló Anne McCarty, los widgets basados ​​en bloques tienen varios provecho, que tienen dentro:

• Ahora puedes crear Diseño en la barra del costado, Las columnas, los separadores, los espaciadores y otros bloques de diseño se utilizan en encabezados y pies de página.
• El widget ahora acepta Edición de artículo enriquecido De manera ya establecida, los clientes no necesitan añadir código personalizado o incrustar un editor HTML de terceros con extensiones.
• Muchos widgets basados ​​en shortcode en este momento están libres Puede emplearse como bloquePara simplificar la experiencia de edición.

Andrei Draganescu también resaltó los beneficios de modificar widgets por medio de una plataforma de trabajo basada en bloques:

El primordial beneficio de actualizar un widget a bloques es que puede editar widgets directamente por medio de relaciones de bloqueo familiares que usa para modificar o divulgar páginas en un portal de internet. La utilización de bloques abre muchas novedosas opciones creativas, desde mini diseños sin código hasta el uso de una enorme biblioteca central y de tercer bloque para crear contenido.

No tiene que preocuparse de que sus widgets por el momento no existan trabajar con WordPress 5.8 pues la comunidad ha trabajado arduamente para asegurar la compatibilidad con ediciones anteriores para que "los widgets que ya están y de otros aún funcionen y se puedan utilizar con bloques" (consulte Editor de widgets apoyado en bloques en WordPress 5.8).

Pero una vez más, para evitar inconvenientes de compatibilidad con las instalaciones de WordPress existentes, no olvide probar la nueva versión en un entorno temporal antes de actualizar el sitio en vivo.

Para aquellos que no desean utilizar el editor de widgets apoyado en bloques ahora mismo, hay tres formas mucho más de restaurar la pantalla de widgets tradicional:

1. Puede instalar la extensión del widget tradicional oficial para restaurar la interfaz del widget previo. La expansión se va a apoyar y mantendrá al menos en 2022 o según sea necesario.
2. Los programadores de temas pueden deshabilitar el editor de widgets apoyado en bloques deshabilitando el soporte de temas como de costumbre:

   remove_theme_support( 'widgets-block-editor' );

3. nuevo use_widgets_block_editor También puede emplear filtros:

   add_filter( 'use_widgets_block_editor', '__return_false' );

Consulte también Descripción general del Editor de bloques de widgets.

Un widget que inhabilita un personalizador

Como parte del mismo emprendimiento, WordPress 5.8 también lo trae Widgets del editor de bloques.

Bloquear widgets en el personalizador.

Añadir widgets basados ​​en bloques al personalizador es muy fácil Complemento de widget personalizado Haga click en el icono más en la esquina superior derecha del panel de widgets.

Complemento de widget personalizado.

También puedes empezar Colocador veloz Desde la parte inferior del panel de widgets como se muestra a continuación.

Un complemento veloz para widgets personalizados.

En este punto, la nueva plataforma de trabajo de edición de widgets aún no se ha mejorado ni solucionado, pero las posibilidades de edición son casi sin límites.

Desde WordPress 5.8, las poderosos funcionalidades del editor de bloques están esencialmente libres en el adaptador y puede crear fácilmente barras laterales altamente adaptadas.

Enseñar más configuraciones.

La nota de avance en el editor de widgets apoyado en bloques da una descripción detallada del editor de widgets apoyado en bloques y proporciona ejemplos y recursos para los desarrolladores.

Funciones y actualizaciones del editor de bloques

Además de la primera implementación de FSE, WordPress 5.8 también presenta novedosas especificaciones y mejoras en múltiples partes del editor de bloques, progresando de manera significativa la experiencia de edición general.

Estos cambios tienen dentro:

Mejora de los bloques de texto y medios

Transforme el bloque a Lista Ha estado bloqueado por un tiempo. Sin embargo, todos y cada uno de los bloques se convierten en bloques de columna con solo una columna, lo que puede ocasionar resultados subóptimos. Medios y textos Bloque, una columna generalmente no es correcta.

Transforme y aplique estilo a bloques de artículo y medios.

Cambio de WordPress 5.8 (y Gutenberg 10.2) Medios y contenidos escritos Bloqueados juntos Lista El bloque inserta automáticamente 2 columnas: una para las imágenes y otra para el artículo.

2 columnas para conversión de texto y medios.

Novedades en bloques reutilizables.

Los bloques reutilizables dejan a los usuarios guardar un bloque o grupo de bloques para reutilizarlos en cualquier mensaje o página de un portal de internet. O sea realmente útil para los clientes que agregan repetidamente el mismo bloque o conjunto de bloques a distintas publicaciones / páginas.

Modelo de proceso para la creación de un bloque reutilizable.

Con WordPress 5.8, los bloques reutilizables son visualmente mucho más claros, lo que posibilita la administración de los usuarios de WordPress.

Bloques reutilizables en WordPress 5.8.

Ahora se muestra una corto lista de actualizaciones de bloques reutilizables que los usuarios hallarán al actualizar su portal web a WordPress 5.8:

• Cuando crea un bloque reutilizable, el modo en este momento deja al usuario nombrar el bloque.
• El nombre del bloque reutilizable ahora aparece en la barra de herramientas del bloque, la lista de navegación y las sendas de navegación.
• En el momento en que se eligen sub-bloques, ahora se detallan los bloques reutilizables. Esta es una mejora importante en la experiencia del usuario por el hecho de que puede identificar de manera fácil el bloque primordial y su contenido.
• El nombre del bloque ahora se puede cambiar en el inspector de la barra lateral.

Forma de bloque reutilizable.

Barra de herramientas de bloque estandarizada

Múltiples barras de herramientas en los bloques se han reorganizado para tener una plataforma de trabajo de usuario unificada y mejorar la experiencia del usuario. Los controles de la barra de herramientas en este momento están agrupados en el orden semántico "misión, nivel de bloque, online".

Barra de herramientas del bloque de título.

Desde Gutenberg 10.1 y Gutenberg 10.3, se han estandarizado múltiples barras de herramientas de bloques. Esto incluye imágenes, botones, botones, listas, títulos, canciones, citas, audio, ficheros, medios y artículo, vídeos, etcétera.

Según Matthias Ventura:

La agrupación semántica de la barra de herramientas (misión, nivel de bloque, en línea) asimismo debe tener una representación visual con un marco. En este momento, los controles individuales a nivel de bloque tienen una fachada diferente, dentro ocasiones como la navegación, donde cada control tiene un límite.

Estandarice la barra de herramientas para bloques de imágenes.

Por lo tanto, desde WordPress 5.8, la barra de herramientas de bloques asocia los controladores de grupo en segmentos rodeados de marcos. Incluso:

• Esta yuan El segmento incluye controles de tipo bloque como: B. Interruptores de bloque, tiradores y controles deslizantes.
• Esta Denegar el nivel Los párrafos contienen herramientas especiales de bloqueo que afectan a todo el contenido, como: B. Alineación en bloques de parágrafos o enlaces en bloques de imágenes.
• Esta Nivel interno / múltiples Los parágrafos incluyen herramientas de conversión incorporadas, como la incrustación de bloques de artículo.
• Esta más El menú tiene dentro otras herramientas.

La próxima imagen equipara la barra de herramientas 5.8 en WordPress 5.7 y los bloques de imágenes:

Barra de herramientas Image Block en WordPress 5.7 y WordPress 5.8.

Las mejores novedades de la barra de herramientas

En el momento en que el modo de barra de herramientas superior está habilitado en una versión previo de WordPress, la barra de herramientas superior y la barra de herramientas de bloque se muestran una a la vera de la otra, como se muestra en la siguiente figura:

Barra de herramientas en la parte superior de la pantalla ancha de WordPress 5.7.

En WordPress 5.8, la activación de la visión superior de la barra de herramientas arregla la barra de herramientas en el bloque en la parte superior del editor, justo bajo la barra de herramientas superior. Esto no tiene nada que ver con el ancho del navegador y está diseñado para progresar relevantemente la experiencia del usuario.

La barra de herramientas en la parte superior de la pantalla ancha de WordPress 5.8.

Esta optimización asimismo trae cambios a los desarrolladores en tanto que se integra con la API de la barra de herramientas. Elementos (ver PR # 31134).

PDF engastado

Cuando agrega un archivo PDF a un documento a través de un bloque de ficheros, puede activar / inhabilitar la versión PDF engastada con el nuevo interruptor de barra del costado (consulte PR # 30857).

PDF incrustado en WordPress 5.8.

Puede arrastrar el archivo directamente al cuadro del editor o seleccionarlo de forma directa desde la biblioteca. Asimismo puede ajustar la altura del visor de PDF manualmente o usar los controles de la barra del costado.

Con la excepción de los navegadores móviles, todos y cada uno de los navegadores primordiales aceptan visores de PDF.

Soporte de doble bloque

Entre las características mucho más atrayentes incluidas en WordPress 5.8 Core es el filtro Duotone, que se ingresó por primera vez en Gutenberg 10.6.

Nueva herramienta de diseño de 2 tonos en el bloque de imágenes.

Los filtros de duotono están libres como una función de "soporte de bloque" y se utilizan de manera ya establecida en las imágenes primordiales y las superposiciones. En la parte de la portada, sin embargo, no se aplica en el fondo sólido.

Nuevo selector de dos tonos en WordPress 5.8.

Ahora aparecen las barras de herramientas de la imagen y el bloque de portada. Usa un filtro doble El controlador exhibe un dial de dos tonos desde el que puede seleccionar múltiples preajustes.

Puede usar los 2 controles inferiores para cambiar las sombras y las luces. El efecto se aplica a través de un filtro SVG que usa estilos on-line para el desvanecimiento y se usa bajo un nombre de clase concreto.

Consulte el filtro Duotone SVG en Google chrome DevTools.

Utilice novedosas herramientas con novedosas herramientas color.__experimentalDuotone Una función que permite a los desarrolladores añadir filtros dobles a bloques o unas partes de bloques. Block.json Archivo (aprenda más sobre este objeto de color):

supports: 
	color: 
		__experimentalDuotone: '> .duotone-img, > .duotone-vídeo',
		background: false,
		text: false
	

Si un mensaje de bloqueo. apoyos color.__experimentalDuotone, Tipo style Las funciones le dejan detallar colores predeterminados personalizados:

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

Ahora se muestra la misma imagen con dos efectos de dos tonos distintas:

La imagen exhibe un filtro de color de dos colores.

Varios filtros de color de 2 colores utilizados en la imagen.

Los desarrolladores tienen la posibilidad de Theme.json Archivo (consulte la siguiente sección) según el próximo fragmento de código:

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

Para obtener mucho más información sobre los filtros de 2 tonos, consulte Colorear imágenes con filtros de 2 tonos.

Color y marco del bloque de mesa

WordPress 5.8 también tiene algunas actualizaciones en el bloque de la tabla, incluyendo un mejor control sobre el fondo de la tabla y el color de primer chato.

Configuración de color mejorada para bloques de mesa.

Otra adición al bloque de la mesa es Soporte de bloque de restricción, Deja al usuario supervisar el color, estilo y ancho del borde.

Si el tema activo admite la novedosa función, la nueva Configuración del marco El panel tiene tres nuevos cambios de personalización.

Control de bloques de borde en bloques WordPress 5.8 y TT1.

Los desarrolladores tienen la posibilidad de añadir compatibilidad con bloques de borde a su tema agregando el siguiente código a su tema Theme.json archivo:

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

Mejoras en la adición de bloques

En WordPress 5.8, la adición de bloques se ha ampliado con varias sumes (PR # 26938 y # 21080):

Presione las flechas hacia arriba y hacia abajo para desplazar el foco de la línea.

1. Navegación de teclado bidimensional en adición de bloquesAhora podemos andar entre bloques de forma más precisa y también deducible.

• Presione la flecha hacia arriba (↑) y la flecha hacia abajo (↓) para desplazar el enfoque a la línea superior o inferior.
• urgentemente etiqueta Cualquiera Mayús + Tabulador Puede mover el foco entre el cuadro de búsqueda, la lista de pestañitas y el primer elemento de cada categoría.

2. Novedosa categoría "Tema" para partes de modelos y variaciones En este momento hace aparición en el complemento para la edición completa del sitio (ver PR # 30020).

3. Completa de forma automática varias palabras en la búsqueda de frases. En este momento permitido (ver PR # 29939).

Mucho más mejoras en el editor de bloques

WordPress 5.8 trae varios cambios auxiliares pequeños y medianos que valen unas escasas líneas. De estas actualizaciones, comentamos las siguientes:

Tirar y dejar caer el soporte en la cubierta.

Ahora puede arrastrar y soltar la imagen desde el escritorio para reemplazar el fondo de la placa de cubierta (consulte Gutenberg 10.3 y PR # 29813).

Arrastre y suelte el papel tapiz en la placa de cubierta.

Interfaz de usuario mejorada para difundir

A partir de WordPress 5.8, la interfaz de publicación muestra un ícono de ubicación y un título para contribuir a difundir publicaciones o páginas con mayor claridad (Gutenberg 10.4).

Anunciado en WordPress 5.7.

Publique la interfaz en WordPress 5.8.

Esta mejora es muy útil cuando se trabaja en modo de pantalla completa o en un dispositivo móvil.

Use la opción theme.json para bloquear configuraciones y estilos

WordPress 5.8, Theme.json El fichero se transforma en el "punto de definición central" y proporciona una exclusiva forma para que los desarrolladores de temas personalicen la configuración y los estilos del editor.

Emplear uno Theme.json Los archivos y las plantillas pueden configurar ajustes preestablecidos customizados y / o agregar soporte para novedosas especificaciones como marcos de dos tonos y de tabla (ver configuraciones y estilos generales).

Según André Manero:

El propósito de este nuevo mecanismo es admitir y también integrar todo add_theme_support Llamadas requeridas arriba para dirigir el editor.

Por ejemplo, puede emplear el siguiente código para detallar un ajuste preestablecido de tono dual personalizado globalmente:

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

Esto anula la configuración ya establecida y solo va a ver una de 2 opciones:

Cambios preestablecidos de sonido dual personalizados en el archivo theme.json.

El nuevo mecanismo brinda la aptitud de dirigir la configuración de manera global o bloque por bloque. Por servirnos de un ejemplo, puede agregar el siguiente ajuste preestablecido Theme.json archivo:

{"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.

A globally defined custom font size in theme.json.

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! Solo especifica un tamaño de fuente personalizado como el bloque de párrafo ya establecido.

Bloques de parágrafos preestablecidos con tamaños de fuente personalizados.

El bloque central se ha actualizado para continuar el nuevo mecanismo, al tiempo que el bloque de otros puede utilizar React para amoldarse al nuevo mecanismo. useSetting Hook (lea más sobre esta función en las normas de desarrollo y la documentación de la API):

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

El nuevo mecanismo se apoya en Theme.json El fichero no solo es adecuado para la configuración de bloques. De hecho, desde WordPress 5.8, por el momento no es necesario crear estilos de editor y ponerlos en cola; todo cuanto tienes que realizar es declarar el preset desde adentro Theme.json Archivo; el motor crea categorías y las pone de forma automática en el editor y la interfaz.

El motor también crea atributos CSS personalizados apropiados.

En el ejemplo previo, colocamos cinco fontSizes Preajustes de bloque de parágrafo. Las siguientes características CSS adaptadas se crean para esta configuración:

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

Tras modificar el tamaño de fuente del parágrafo de la página Theme.json Archivo, respectivamente p Buscar elementos has-preset-slug-preset-category Clase.

Eso quiere decir que estas contigo extra-plus-small Se mantiene el tamaño de fuente has-extra-plus-small-font-size Clase:

Lorem ipsum mal...

Este es el bloque de notificaciones CSS:

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

Para ver la configuración y los estilos con más detalle, utilice Theme.json, Lea las instrucciones de avance y la documentación de la Interfaz de programación de aplicaciones.

Consulte también la prueba del teléfono FSE de Anne McCarty para conseguir lecturas más útiles y desafíos emocionantes para los desarrolladores que procuran estudiar sobre nuevas funcionalidades. Theme.json representar.

Evitar la mejora de la Interfaz de programación de aplicaciones

Las actualizaciones de la API de bloques de WordPress 5.8 merecen una atención especial por la parte de los programadores de complementos.

utilizar Block.json En este momento fomenta la utilización del fichero como método principal para registrar géneros de bloque y tiene los siguientes provecho:

• En términos de desempeño, si el tema acepta la carga diferida de elementos, pase Block.json el archivo optima de manera automática los recursos del grupo, esto hay que al recurso especificado style y script Los atributos no se agregan a el diseño hasta que se reconoce el bloque. Esto le permite desarrollar complementos mucho más potentes, reducir el tamaño de la página y denegar múltiples de los temas tratados en este artículo.
• Esta Block.json El fichero simplifica el registro de bloques del lado del servidor al dejar que un punto final de la API REST de tipo bloque cuente los bloques.
• Esta Block.json Si decide cargar el complemento de bloqueo en el directorio de complementos de WordPress, también precisará este archivo.

Cambios en register_block_type

WordPress 5.8 register_block_type La función se ha ampliado, puede Block.json El primer factor en este momento admite la ruta de la carpeta Block.json El archivo está situado.

Puede utilizar esta función como en el próximo ejemplo:

function create_custom_block_init() 
	register_block_type( __DIR__ );

add_action( 'init', 'create_custom_block_init' );

Devuelve el género de bloque registrado o false Fallar.

Encontrarás que la función register_block_type Ahora se emplea de la misma manera. register_block_type_from_metadata Función, anteriormente la única función que puede registrar tipos de bloques leyendo metadatos Block.json documento. Como explicó Greg Ziółkowski:

Decidimos conjuntar las funcionalidades existentes register_block_type_from_metadata Entrada de procedimiento register_block_type Para evitar confusiones, provocó. Estas dos funcionalidades todavía están libres, pero a partir de ahora solo usaremos una versión más corta de la documentación y las herramientas oficiales.

En el momento en que un bloque está registrado en el servidor, todo cuanto necesita llevar a cabo es registrar la configuración del cliente usando el mismo nombre de bloque en la aplicación cliente. Index.js archivo.

Para obtener una comprensión mucho más profunda de las mejoras de Block API de WordPress 5.8, lea las pautas de desarrollo de Greg Ziółkowski.

Soporte WebP en WordPress 5.8

En Kinsta, estamos obsesionados con la velocidad del portal web y el desempeño de WordPress. Es por eso que la compatibilidad con el formato WebP en WordPress 5.8 es una novedad tan enternecedora para nosotros.

WebP es considerado el formato de archivo de próxima generación y es un formato de imagen creado por Google plus que "ofrece una mejor agilidad de compresión que PNG o JPEG, lo que significa velocidades de descarga más rápidas y menor consumo de datos".

Google plus Lighthouse recomienda emplear el formato de imagen de próxima generación.

Según Google+:

WebP es moderno Formato de imagen Esto ofrece superior Sin pérdidas y sin pérdidas Comprime imágenes online. WebP deja a los webmasters y desarrolladores web hacer imágenes más pequeñas y ricas, lo que hace más rápido la utilización de la red.

En comparación con PNG, las imágenes WebP sin pérdida son un 26% mucho más pequeñas. Las imágenes con pérdida de WebP son un 25-34% más pequeñas que las imágenes JPEG similares con el mismo índice de calidad SSIM.

Desde WordPress 5.8, puede utilizar formatos de imagen WebP como JPEG, PNG y GIF. Sube imágenes a tu biblioteca de medios e intégralas en tu contenido.

En el artículo previo, analizamos el formato WebP y las herramientas que tienen la posibilidad de usarlo en WordPress. En este momento, con el soporte de imágenes WebP de WordP 5.8, las cosas cambiaron un tanto. Debido a que el formato WebP funciona de forma predeterminada, puede cargar imágenes WebP en WordPress sin disponer un complemento de terceros, por lo menos en las situaciones más comunes.

Tenga presente que ahora puede cargar imágenes WebP en WordPress mediante su biblioteca de medios, pero WordPress no admite la conversión automática de imágenes al formato WebP. Precisa un complemento de WordPress WebP de otros para encender esta función en su sitio web.

Utilizando imágenes WebP en WordPress

Hay múltiples formas de convertir imágenes a WebP:

Exporta imágenes como WebP en GIMP.

Si selecciona la herramienta de línea de comandos, puede codificar y descomprimir imágenes utilizando las utilidades cwebp y dwebp. Por ejemplo, el próximo comando realiza una conversión JPEG básica a formato WebP:

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

Asimismo puede usar ficheros bash y cwebp (ejemplo de Jeremy Wagner) para transformar imágenes por lotes:

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

El comando anterior los convierte a todos .png imagen .webp Forma con un factor de empaquetamiento de 75.

Comparación de factor de compresión y tamaño del archivo.

Una vez que tenga las imágenes de WebP, puede cargarlas fácilmente usando la biblioteca de medios de WordPress. A continuación se muestra una imagen JPEG de 127 kb en la biblioteca de medios antes de la conversión:

El tamaño del fichero JPEG comprimido es 127 kb.

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

La misma imagen en formato WebP tiene 74 kb.

Por último, las imágenes WebP tienen exactamente las mismas habilidades de edición que las imágenes JPEG, PNG y GIF. Puede recortarlos, rotarlos, reflejarlos y escalarlos, y aplicar cambios al tamaño de la imagen que quiera.

Advertencia de WebP en WordPress 5.8

Según Adam Silverstein:

Las imágenes WebP aceptan compresión sin pérdida y sin pérdida, formatos de animación y compatibilidad con imágenes con transparencia. WordPress utiliza el formato WebP sin pérdidas aceptado solo si el servidor host utiliza Imagick (biblioteca PHP) hasta que LibGD añada soporte. Además de esto, las imágenes cambiadas aún no son compatibles con los formatos alfa y de animación (cargar imágenes en estos formatos crea imágenes con pérdida).

Si su proveedor de hospedaje web no admite imágenes WebP, verá un mensaje de error en el momento en que intente cargarlas. Si no está seguro de si su distribuidor de alojamiento web funciona con la biblioteca de Imagick, la pestañita Información de la herramienta de salud del cibersitio contiene Biblioteca de fantasía Ingrese esta información en el campo.

Kinsta funciona con la biblioteca Imagick.

Con el soporte de WebP, WordPress 5.8 asimismo trae 2 campos adicionales a la sección de manejo de medios del estado del lugar: Edición mágica y ImageMagick admite formatos del archivo.

Campo de versión de ImageMagick en Site Heath.

Si WebP no se encuentra en un tipo del archivo admitido, debe comunicarse con el distribuidor de hosting web.

La información de desarrollo incluye más información sobre la compatibilidad con WordP 5.8 WebP, cuestiones usuales útiles y otros recursos.

Si está entusiasmado en la optimización de imágenes, posiblemente asimismo le gusten los próximos tutoriales:

Funciones adicionales para programadores

WordPress 5.8 incluye muchas características atrayentes para desarrolladores. En el artículo, prestamos mucho más atención a aquellos que tienen el mayor encontronazo en el trabajo de desarrollo. Pero en realidad existen muchas características nuevas a tomar en consideración, dentro las siguientes:

Bloquear la API de soporte

WordPress 5.8 añade una nueva bandera de soporte de bloques que permite a los desarrolladores emplear las últimas funciones de bloques para personalizar los bloques registrados.

Además de la ayuda de bloqueo de duotono experimental mencionada anteriormente (color._experimentalDuotone), WordPress 5.8 también tiene un link de Soporte de color. Puede utilizar esta función agregando las siguientes marcas a los metadatos del bloque:

supports: 
	color: 
		backlink: true;
	

Puede usar atributos para establecer valores predeterminados, como en el próximo ejemplo o Theme.json:

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

Otros cambios de API en el bloque tienen dentro:

• fontSize y lineHeight El soporte se estabilizará.
• spacing El soporte se ha ampliado, ahora puede administrarlo margin y padding, Y control individual top, right, bottom y left Tamaño.

Para conseguir más información sobre los soportes de bloques de WordPress 5.8, consulte la Guía de avance de actualizaciones de API de soporte de bloques.

Para conseguir mucho más información sobre el uso de la API de Block Supports, consulte las instrucciones oficiales de la API de Block Supports.

Pestañita adaptada para el estado del portal web

2 nuevos ganchos ahora permiten a los programadores agregar pestañitas personalizadas a el diseño de estado de un sitio web y ajustar las pantallas disponibles.

Esta site_health_navigation_tabs filtrar Es un conjunto mezclado de ID de pestañas y etiquetas que se utilizan para registrar nuevas pestañitas en la pantalla Estado del sitio. Para utilizar un filtro, añada el próximo código de muestra a un fichero de función de tema o extensión adaptada:

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 exhibe la novedosa pestañita Estado del ubicación:

Una pestaña personalizada agregada al menú de navegación de estado de un portal de internet.

muchas gracias site_health_navigation_tabs Los filtros asimismo se pueden emplear para ordenar pestañas o eliminar uno o más elementos.

Esta site_health_tab_content ocupaciones Se manda en el momento en que un usuario visita la ventana de estado del lugar, salvo de forma predeterminada Estado Mostrar. Puede usar este gancho de acuerdo con el próximo fragmento de código (ejemplo de la guía 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 una pestañita personalizada y luego .php Documenta esto site_health_tab_content La función asimismo deja a los desarrolladores ampliar el estándar información Agrega pestañitas con información sobre su extensión o tema.

Evite los cambios de la Interfaz de programación de aplicaciones del editor para aceptar múltiples pantallas de administración

A partir de WordPress 5.8, el editor de publicaciones por el momento no es la única pantalla de administrador que emplea el editor de bloques (la pantalla de widgets es un ejemplo).

El agente principal halló múltiples ganchos según el servidor. $articulo Propósito. Este elemento no está en las ediciones del sitio, los widgets y las pantallas de navegación. En el futuro, muchos filtros van a quedar obsoletos y serán reemplazados por compensación contextual.

También nuevo WP_Block_Editor_Context Introducción a las clases que representan el contexto y varios métodos del editor de bloques actual.

Estos cambios mejorarán estas pantallas con nuevas funcionalidades y permitirán a los desarrolladores añadir personalizaciones.

Para conseguir una lista completa de los cambios en la API del editor de bloques relacionados con la pantalla de administración, consulte el Memo de desarrollo de Greg Ziółkowski.

Funciones y novedades auxiliares

WordPress 5.8 trae tantas peculiaridades nuevas y cambios a los programadores que es imposible para nosotros mencionarlos todos en el presente artículo. No obstante, reunimos una lista de pautas de desarrollo que no se tratan aquí para que logre leer:

WordPress 5.8 muestra el primer método terminado de edición de sitios web 🎁 ¿Tiene curiosidad sobre el futuro de WordPress? No se pierda nuestra revisión en profundidad de las especificaciones clave y los cambios en WordPress 5.8🚀Lleve a cabo clic para twittear

Generalizar

WordPress 5.8 es un hito en el camino hacia la personalización de todo su lugar. Pero la segunda versión de WordPress de este año trae más que solo FSE, los clientes y desarrolladores hallarán muchas mejoras en el editor de bloques, o sea nuevo Theme.json Mecanismo, API de bloque más potente, soporte para formatos de imagen WebP, etcétera.

Nos encontramos especialmente impresionados con las actualizaciones mayores y inferiores del editor de bloques y su plataforma de trabajo. Nos gusta la navegación avanzada entre bloques, una barra de herramientas de bloques avanzada, una interfaz más limpia y novedades en múltiples bloques.

Estos pequeños cambios han mejorado gradualmente la experiencia de edición y, con un poco de conocimiento, descubrimos que estamos empleando un software mejor y más potente. ¡Esto es WordPress!

¡Déjalo a ti en este momento! ¿Qué opinas del editor de todo el sitio? ¿Cuáles son sus favoritos para WordPress 5.8?