Novedades de WordPress 6.2: modo de exploración, libro de estilo, menús de navegación mejorados, nuevas API y mucho más

El lanzamiento de WordPress 6.2 está programado para el 28 de marzo de 2023 , y es hora de que exploremos lo que viene con el primer lanzamiento de 2023.

Con WordPress 6.2, entramos en la etapa final de la Fase 2 de la hoja de ruta de desarrollo a largo plazo de Gutenberg, y el editor de bloques abandona oficialmente la fase beta.

Esta versión se centra principalmente en mejorar la interfaz y optimizar la experiencia de edición.

Se ha introducido un nuevo enfoque para navegar entre plantillas y partes de plantillas, así como la capacidad de importar widgets en temas de bloques, un nuevo modo de escritura sin distracciones, una experiencia de configuración de bloques escalada y toneladas de mejoras grandes y pequeñas en bloques existentes. , rendimiento y usabilidad.

Pero si hay algo que da un salto adelante en cuanto a funcionalidad y usabilidad es el bloque de Navegación. Desde que se lanzó por primera vez, el menú de navegación ha pasado por varias iteraciones que han simplificado significativamente el proceso de edición con el tiempo. Con WordPress 6.2, el desarrollo continúa y, en este artículo, le mostraremos con qué facilidad ahora puede administrar un menú de navegación.

Experiencia de edición mejorada

WordPress 6.2 brinda una experiencia de edición mejorada, con toda la estructura del sitio ubicada en el centro. Ahora puede administrar los menús de navegación más fácilmente, enviar cambios de estilo de un solo bloque a estilos globales y navegar sin esfuerzo entre plantillas y partes de plantillas con partes de plantillas coloreadas y bloques reutilizables.

Pero hay mucho más. Exploremos en detalle las principales adiciones y cambios en la interfaz del editor.

Una interfaz de editor de sitios renovada y un modo de navegación

Con WordPress 6.2, varias mejoras en la interfaz del editor llegan al núcleo. La primera y más interesante actualización afecta a la interfaz de Site Editor. Gracias a un nuevo modo de exploración, ahora es más fácil navegar a través de plantillas y partes de plantillas.

La nueva interfaz también le permite agregar una nueva plantilla o parte de la plantilla directamente desde la barra lateral del editor simplemente haciendo clic en el ícono más (+) ubicado a la derecha del título del menú.

Según Ryan Welcher, colaborador de Wp Core and Documentation, "[E]l trabajo en esta función está en curso y seguirá mejorando a medida que se publiquen nuevas versiones de Gutenberg".

El flujo de trabajo ahora es más fluido y fluido. Para comenzar a editar la plantilla/parte de la plantilla actual, simplemente haga clic en el botón Editar en el menú de la izquierda o en la vista previa de la plantilla en el medio de la página.

Modo libre de distracciones

WordPress 6.2 presenta un nuevo modo de edición sin distracciones, que elimina el desorden del lienzo y le permite concentrarse en el contenido de la página.

Puede activar esta función en el panel de opciones que aparece haciendo clic en el icono de puntos suspensivos (tres puntos) en la esquina superior derecha.

Una vez que se activa el modo Distraction Free, las barras laterales y las barras de herramientas superfluas desaparecen, dejando en la pantalla solo el contenido en el que está trabajando.

Inspector de bloques con pestañas

WordPress 6.2 presenta un nuevo Block Inspector destinado a poner orden en la barra lateral al dividir los controles de configuración en paneles separados.

La configuración de bloque ahora se divide en pestañas para separar la configuración de estilo de otras configuraciones de bloque.

Si están disponibles, las pestañas del inspector de bloques se mostrarán en el siguiente orden:

• Vista de lista: incluye controles para administrar los elementos secundarios de un bloque, como submenús y enlaces en el bloque de navegación
• Ajustes: incluye ajustes de configuración no relacionados con la apariencia del bloque
• Apariencia: incluye configuraciones que están específicamente relacionadas con el estilo del bloque actual, como la tipografía y los colores.

Esta es una mejora notable en la usabilidad de la interfaz, especialmente para bloques avanzados con muchas opciones de configuración como el Bloque de grupo o el Bloque de navegación.

Tenga en cuenta que:

• El nuevo Inspector solo muestra una pestaña cuando contiene elementos para mostrar.
• Si la pestaña Configuración solo contiene el panel Avanzado, se mueve a la pestaña Apariencia.
• Si el inspector de bloques solo tiene una pestaña, se muestra como antes de WordPress 6.2.

Consulte la nota del desarrollador para obtener una vista más detallada del nuevo inspector de bloques.

Piezas de plantilla coloreadas y bloques reutilizables

Para diferenciarlos más fácilmente de grupos y bloques, las partes de la plantilla y los bloques reutilizables ahora se resaltan en un color diferente en la vista de lista, el insertador de bloques, la barra de herramientas de bloques y en el lienzo del editor.

Esto sucede tanto en el Editor del sitio como en el editor de publicaciones, como se muestra en la imagen a continuación.

Un insertador de bloques renovado

El Block Inserter se ve afectado por varios cambios que mejoran significativamente la experiencia de edición general.

En primer lugar, un nuevo diseño de interfaz mejora la navegación entre categorías de patrones y medios y proporciona vistas previas más grandes para patrones y elementos de medios.

Cuando existen medios en el sitio, aparece una pestaña Medios en el insertador de bloques para simplificar la inserción de medios dentro del contenido. Puede arrastrar y soltar imágenes/medios o simplemente hacer clic en sus medios para agregarlos al contenido.

Pestaña de medios en el insertador de bloques” width=”1296″ height=”1420″ class=”size-full wp-image-148375″> La nueva pestaña de medios en el insertador de bloques

Dentro de la pestaña, un botón Abrir biblioteca de medios lo lleva a la Biblioteca de medios de WordPress.

Integración de Openverse en el insertador de bloques

Openverse es una herramienta que tiene como objetivo compartir obras con licencia abierta o de dominio público para que las use cualquier persona. Ahora, con WordPress 6.2, Openverse está integrado en Block Inserter.

Para acceder a esta nueva función, haga clic en la pestaña Medios del insertador de bloques. Esto muestra un panel con un campo de búsqueda y vistas previas de imágenes tomadas directamente del repositorio de Openverse.

Para conocer los detalles técnicos, consulte la solicitud de extracción de integración de Openverse.

Migrar widgets a temas de bloques

A partir de WordPress 6.2, los usuarios que ejecutan un sitio con un tema clásico y deciden cambiar a un tema de bloque pueden migrar sus áreas de widgets existentes al nuevo tema, convirtiéndolas en partes de plantilla.

Averigüemos cómo funciona.

Primero, cree un área de widgets en un tema clásico. Por ejemplo, puede activar Twenty-Eleven y agregar un calendario al área de pie de página uno.

Ahora cambie el tema a veinte veintitrés. Abra el Editor del sitio, elija una plantilla para editar y agregue una parte de la plantilla.

En la barra lateral del bloque, seleccione el área de widgets para importar desde el menú desplegable Importar área de widgets .

Y eso es. Ahora puede administrar su área de widgets anterior como cualquier otra parte de la plantilla.

Detalles del documento y vista de lista combinados

Antes de WordPress 6.2, había dos botones separados en la barra de herramientas del Editor para Detalles y Vista de lista . En la siguiente imagen, puede ver la ventana emergente de detalles del documento en WordPress 6.1, incluida la cantidad de palabras, la cantidad de caracteres, el tiempo de lectura y la cantidad de encabezados, párrafos y bloques, así como el esquema del documento.

A partir de WordPress 6.2, la Vista de lista y los Detalles se han movido a un solo panel de Descripción general del documento dividido en dos pestañas: Vista de lista y Esquema .

Este cambio debería proporcionar una manera más fácil de administrar el documento.

Capacidades de bloque extendidas

Con WordPress 6.2, se han ampliado las capacidades de varios tipos de bloques principales. Esto es particularmente cierto para el bloque de navegación, que se ve afectado por varios cambios y mejoras en la experiencia de edición.

Echemos un vistazo a los principales cambios en detalle.

Edición basada en listas para el bloque de navegación

Con el lanzamiento de WordPress 6.2, es posible cambiar la disposición de los elementos del bloque de navegación desde una vista de lista en la barra lateral de configuración del bloque.

Al hacer clic en el elemento del menú, accederá a la barra lateral de configuración del enlace de página seleccionado, donde podrá editar los detalles del enlace, incluida la etiqueta, la URL, la descripción, el título del enlace y el rel del enlace.

Este cambio simplifica enormemente la experiencia de edición de los menús de navegación, lo que le permite agregar, organizar y eliminar elementos en su menú, o incluso crear nuevos menús de navegación.

Bloquear navegación

Otra mejora del bloque de navegación es la capacidad de bloquear la edición del menú de una forma más granular. Ahora puede Restringir la edición , Deshabilitar el movimiento y Evitar la eliminación , mientras que con WordPress 6.1, solo estaban disponibles las opciones Restringir la edición y Deshabilitar el movimiento .

Además, las opciones seleccionadas también se pueden aplicar a los bloques internos (enlaces y submenús).

Agregar o quitar subtítulos de la barra de herramientas del bloque

Un nuevo botón Agregar/Eliminar subtítulos permite a los usuarios controlar los subtítulos desde la barra de herramientas de bloque para varios bloques (audio, video, imagen).

Si ya ha establecido un título, se incluirá automáticamente cuando agregue la imagen a su contenido.

Mejoras en el bloque de lista de páginas

Dos mejoras involucran el bloque Lista de páginas.

Primero, el bloque Lista de páginas ahora se puede expandir para mostrar la lista de páginas en el panel Vista de lista.

Además, una nueva opción en la barra lateral del bloque ahora le permite configurar una página de inicio y mostrar solo las páginas que descienden de ella en el bloque.

Nuevo marcador de posición de bloque de grupo

Ahora, el marcador de posición del Bloque de grupo muestra un selector de variación cuando el bloque se agrega al contenido de la página.

Soporte de bloque de posicionamiento adhesivo

WordPress 6.2 presenta una nueva función de soporte de bloque de posición, comenzando con el posicionamiento fijo.

Esta nueva característica se aplica actualmente solo a los bloques de grupo, a los que está habilitada de forma predeterminada.

Los desarrolladores de temas pueden habilitar el posicionamiento fijo en sus temas mediante la función appearanceTools en theme.json . Si desea un control más granular sobre las herramientas de apariencia, también puede establecer la propiedad settings.position.sticky en true .

Puede habilitar el posicionamiento fijo en el panel Posición de la barra lateral de control del Inspector.

Con el posicionamiento fijo activado, la etiqueta HTML obtiene una clase is-position-sticky y algunas reglas de CSS se aplican al elemento correspondiente:

 .wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }

El posicionamiento fijo solo funciona para bloques de grupo en la raíz del documento . Si bien esto puede evitar confusiones y errores para los usuarios, es posible que el posicionamiento fijo incorporado sea un poco complicado en este momento (y es posible que desee verificar diferentes métodos para agregar un encabezado fijo a su sitio web de WordPress). Sin embargo, según la nota del desarrollador,

… en las pruebas manuales, los comentarios indicaron que sin trabajo adicional de UI o UX, podría ser confuso para los usuarios que intentan crear encabezados fijos si accidentalmente configuran un bloque no raíz como fijo, o por ejemplo, un bloque dentro de una parte de plantilla de encabezado para pegajoso. La decisión fue reducir la función a solo los bloques raíz para 6.2 para permitir más tiempo para explorar una solución adecuada para bloques anidados.

La función de posicionamiento solo está disponible para bloques individuales, por lo que no la encontrará en Estilos globales.

Mejoras adicionales a la experiencia de edición de bloques

Algunas otras actualizaciones notables para la edición de bloques incluyen las siguientes:

• Ahora puede arrastrar y soltar imágenes en un párrafo vacío para reemplazarlo con un bloque de imagen.
• Los controles tipográficos se han agrupado en paneles. Esto hace que la interfaz de Estilos sea más coherente con la interfaz de Configuración y mejora su usabilidad, ya que ahora puede mostrar y ocultar controles como en la interfaz de configuración de bloques.

  

• Ahora es posible modificar el espaciado entre letras de los bloques de títulos directamente en la interfaz de estilos globales.
• Ahora puede configurar el fondo, el enlace y el color del texto del bloque Calendario.
• Se han introducido dos nuevas categorías de patrones de bloques de Banners y Pies de página para reflejar mejor la estructura de las páginas web.
• Ahora es posible autocompletar enlaces en cualquier bloque usando el atajo [[ . Antes de este cambio, los bloques tenían que declarar explícitamente la compatibilidad con el autocompletado de enlaces mediante __experimentalSlashInserter .
• Un nuevo método abreviado de teclado control + option + 1 – 6 le permite transformar un párrafo en un encabezado.
• El bloque Lista de páginas ahora es compatible con todas las opciones tipográficas, incluida la familia de fuentes, el tamaño de fuente, la apariencia, la altura de línea, el espaciado entre letras, la decoración y las mayúsculas y minúsculas.

  

  

Herramientas de diseño mejoradas

Muchas de las nuevas características y mejoras introducidas con WordPress 6.2 mejoran las capacidades de estilo y diseño del CMS. A continuación se muestra una lista de las funciones más interesantes relacionadas con el diseño que vienen con 6.2; detallaremos cada uno más abajo.

Libro de estilo

WordPress 6.2 presenta una nueva función de libro de estilo que permite a los usuarios obtener una vista previa de cualquier bloque que se pueda usar en sus sitios web sin tener que agregar esos bloques a una plantilla/parte de plantilla. Puede iniciar el Libro de estilos haciendo clic en el botón Abrir libro de estilos (el ícono del ojo) que ahora aparece en el encabezado Estilos dentro de los estilos globales.

Esto abre una interfaz que muestra una vista previa de cada bloque central y de terceros por categoría.

La nueva interfaz Style Book simplifica el proceso de diseño al hacer que las vistas previas de cada estilo de bloque estén disponibles en una única ubicación centralizada.

Desde un punto de vista técnico, la nueva interfaz es generada por un nuevo componente StyleBook agregado a @wordpress/edit-site para mostrar una vista previa de cada bloque registrado en un iframe (ver también PR #45960).

La misma interfaz también proporciona vistas previas de bloques individuales. Como ejemplo, la siguiente imagen muestra la vista previa de un widget de calendario personalizado.

Los desarrolladores pueden ocultar un bloque para que no se inserte ni se previsualice de dos maneras. Primero, puede establecer supports.inserter en false en block.json :

 { "supports": { "inserter": false } }

Otra forma de ocultar la vista previa del bloque es evitar la propiedad example , que se utiliza para crear una vista previa del bloque en el Panel de ayuda del Inspector (más información aquí).

Sombras en estilos globales

Con WordPress 6.2, ahora es posible agregar y personalizar sombras en algunos bloques usando Global Styles o theme.json (a partir de este escrito, la función de sombra solo está disponible para el bloque Botón).

En primer lugar, en los temas que admiten esta función, puede agregar sombras desde la interfaz de Estilos globales.

Para verlo en acción, active el tema Twenty Twenty-Three, vaya a Estilos > Bloques > Botón y haga clic en el botón Sombra .

Una ventana emergente Sombra le permite seleccionar una sombra de los ajustes preestablecidos del tema.

Los desarrolladores de temas y los usuarios avanzados también pueden agregar una sombra a los bloques usando theme.json . La siguiente definición agrega una sombra negra de 4px a los bloques de botón:

 "styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },

También puede definir ajustes preestablecidos para dar a los usuarios de temas la capacidad de seleccionar uno desde la interfaz de Estilos:

 "settings": { "shadow": { "presets": [ { "shadow": "4px 4px #FF0000", "name": "Red", "slug": "red" }, { "shadow": "4px 4px #00FF00", "name": "Green", "slug": "green" }, { "shadow": "4px 4px #0000FF", "name": "Blue", "slug": "blue" } ] }, }

Una vez definidos, sus ajustes preestablecidos aparecen en el panel Sombra en el bloque Estilos.

También puede elegir el valor de un ajuste preestablecido y usarlo como valores predeterminados de bloque:

 "styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }

Nuevo control de dimensión de altura mínima

A partir de WordPress 6.2, el panel Dimensiones de la barra lateral de configuración de bloque para los bloques Grupo y Publicar contenido ahora proporciona un nuevo control de altura mínima habilitado de forma predeterminada en los temas que utilizan la función de appearanceTools .

Este nuevo control permite a los usuarios establecer una altura mínima para los bloques de contenido de grupo y publicación y se puede usar para representar el pie de página en la parte inferior de la página, incluso con poco contenido.

En combinación con las nuevas herramientas de alineación vertical, también permite alinear verticalmente los elementos internos en la parte superior/central/inferior de la página.

Los desarrolladores pueden agregar soporte para la altura mínima de los temas agregando la configuración minHeight a theme.json :

 { "settings": { dimensions: "minHeight": true } }

También puede usar la propiedad appearanceTools :

 { "settings": { "appearanceTools": true } }

La nueva propiedad minHeight también se puede usar para establecer un valor específico directamente en theme.json :

 { "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }

Los desarrolladores de bloques pueden agregar la propiedad supports.dimensions.minHeight a su archivo block.json y establecer su valor en true . Para bloques estáticos, la regla min-height de CSS se almacenará como un estilo en línea, mientras que para bloques dinámicos se incluirá en el atributo de estilo devuelto por get_block_wrapper_attributes .

CSS personalizado en el panel de estilos

Una de las características que faltaban en el Editor del sitio en comparación con el Personalizador de temas era la capacidad de agregar estilos CSS personalizados. WordPress 6.2 llena el vacío y ahora la interfaz de Estilos globales incluye un campo de texto para agregar reglas CSS personalizadas que no se sobrescribirán cuando actualice su tema.

Puede agregar estilos personalizados por bloque, desde el panel de estilo de bloque o haciendo clic en el botón de acciones Más estilos en la barra de herramientas Estilos. Esto muestra un menú emergente que muestra un elemento CSS adicional .

Para admitir CSS personalizado, se agregó una nueva propiedad styles.css a theme.json .

Las reglas de CSS personalizadas pueden anular por completo cualquier estilo personalizado establecido en theme.json . Si no desea que esto suceda, puede considerar incluir la hoja de estilo utilizando los métodos de puesta en cola existentes.

También puede agregar CSS personalizado por bloque en theme.json usando la propiedad styles.blocks.block.css :

 "styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }

También puede usar & para elementos anidados y pseudo-selectores.

Para ver más de cerca la nueva función de CSS personalizado, consulte también CSS personalizado para estilos globales y por bloque.

Copiar y pegar estilos entre bloques

Un nuevo grupo en el menú Opciones de la barra de herramientas del bloque ahora muestra dos botones para Copiar estilos y Pegar estilos . Antes de esta adición, solo era posible copiar estilos, pero no estaba claro cómo pegarlos.

Para probar esta nueva función, agregue un nuevo bloque, como un encabezado. Cambie el estilo y elija Copiar estilos en el menú Opciones del bloque.

Luego seleccione otro bloque y elija Pegar estilo . Los estilos copiados se aplicarán automáticamente al segundo bloque.

Tenga en cuenta que esta función solo está disponible en sitios seguros (https) en navegadores compatibles. Para obtener detalles adicionales, consulte la solicitud de extracción.

Aplicar cambios de bloque globalmente

WordPress 6.2 también presenta un botón Aplicar globalmente en el panel Avanzado para bloques individuales que le permite enviar sus cambios de estilo de bloque a Estilos globales y aplicar esos cambios en todo el sitio web.

Gracias a esta nueva función, aplicar tipografía de bloque, espaciado, dimensiones y estilo de color a todos los bloques de ese tipo ahora es tan fácil como presionar un botón (consulte también esta solicitud de extracción).

Experiencia de diseño mejorada con visualizadores de espaciado

Los visualizadores de espaciado le permiten obtener una vista previa de la cantidad de margen o relleno que se aplica a un bloque. Con WordPress 6.2, esta característica se mejora con un par de adiciones que mejoran la experiencia de edición.

En primer lugar, los visualizadores de espaciado ahora aparecen tan pronto como pasa el cursor sobre el margen o el control de relleno.

En segundo lugar, el visualizador de espaciado ahora oculta automáticamente la barra de herramientas de bloque tan pronto como pase el mouse sobre la configuración de espaciado para que pueda obtener una vista previa de la nueva configuración de margen y relleno sin el desorden de la barra de herramientas de bloque.

Estos son cambios pequeños pero significativos que afectan a un buen número de bloques centrales.

Cambios para desarrolladores

WordPress 6.2 también trae muchas funciones nuevas para los desarrolladores: nuevas API, correcciones de errores, mejoras de rendimiento y mucho más. Vamos a sumergirnos en las adiciones más atractivas.

Una nueva API HTML

WordPress 6.2 presenta el Procesador de etiquetas HTML, un analizador compatible con las especificaciones de HTML5 que proporciona una forma segura de encontrar etiquetas HTML específicas y agregar, eliminar o actualizar atributos a través de PHP. El procesador de etiquetas HTML es el primer componente de una nueva API de procesamiento de HTML.

La nueva API facilita la realización de tareas anteriormente complejas que a menudo requerían el uso de expresiones regulares.

En el siguiente ejemplo, simplemente agregamos el atributo alt a una etiqueta img :

 $html = '<img src="/my-image.jpg" />'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag() ) { $p->set_attribute( 'alt', 'Hello WordPress 6.2' ); } echo $p->get_updated_html();

Este código produciría la siguiente etiqueta img :

 <img alt="Hello WordPress 6.2" src="/my-image.jpg">

El método $p->next_tag() pasa a la siguiente etiqueta disponible en el HTML. También acepta un nombre de etiqueta, una clase CSS o ambos para encontrar etiquetas específicas, como se muestra en el ejemplo anterior.

Para editar etiquetas HTML, primero debe seleccionar la etiqueta de destino:

 $p->next_tag();

Una vez que haya seleccionado la etiqueta de destino, puede utilizar los métodos de la API para realizar varias operaciones:

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

Puede establecer un atributo de estilo:

 $html = '<a href="https://example.com">example.com</a>'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag( 'a' ) ) { $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' ); } echo $p->get_updated_html();

También puede agregar o eliminar una clase o un atributo. En el siguiente código, agregamos una clase personalizada a una etiqueta h1 :

 $html = '<div><h1>Page Title</h1></div>'; $p = new WP_HTML_Tag_Processor( $html ); if( $p->next_tag( 'h1' ) ) { $p->add_class( 'title' ); } echo $p->get_updated_html();

Luego puede hacer eco o devolver la etiqueta actualizada usando el método $p->get_updated_html() .

Para ver más de cerca la nueva API de HTML, consulte este tutorial interactivo de PHP de Adam Zielinski, responsable de WordPress Core.

API de patrones y una nueva propiedad template_types

La API de patrones permite a los desarrolladores de WordPress "crear bloques de contenido prediseñados que se pueden insertar fácilmente en publicaciones, páginas, tipos de publicaciones personalizadas y plantillas".

Con WordPress 6.2, la API de patrones ahora incluye una nueva propiedad template_types que le permite especificar en qué plantillas se puede usar un determinado patrón de bloque.

Jorge Costa destaca que esta es una actualización solo de back-end y actualmente no hay una funcionalidad UX correspondiente. Sin embargo, podemos esperar ver implementaciones evolucionadas de esta función con WordPress 6.3:

El primer uso, al pensar en WordPress 6.3, es mostrarle al usuario algunos patrones que tienen sentido en una plantilla cuando el usuario comienza a crear una plantilla. Los usuarios pueden comenzar desde un patrón en lugar de "en blanco" o la plantilla de respaldo.

En el aspecto técnico, la función register_block_pattern() se ha modificado para incluir un nuevo parámetro template_types , que es una matriz de cadenas que contienen los nombres de las plantillas para las que está destinado el patrón de bloque.

La API REST también se modificó para devolver los tipos de plantilla de un patrón de bloque si se ha definido al menos uno.

React v18.0 y modo de concurrencia

WordPress 6.2 también incluye una nueva versión de la biblioteca React, ahora actualizada a la versión 18.0. La nueva versión viene con nuevas API, funciones, mejoras y correcciones de errores. Una de las características principales de React v18.0 es la introducción del modo de concurrencia, "un nuevo mecanismo detrás de escena que permite a React preparar múltiples versiones de su interfaz de usuario al mismo tiempo".

Una de las principales características del Modo Concurrente en React es que es interrumpible:

React garantiza que la interfaz de usuario aparecerá consistente incluso si se interrumpe un procesamiento. Para ello, espera a realizar mutaciones del DOM hasta el final, una vez evaluado todo el árbol. Con esta capacidad, React puede preparar nuevas pantallas en segundo plano sin bloquear el hilo principal. Esto significa que la interfaz de usuario puede responder de inmediato a la entrada del usuario, incluso si se encuentra en medio de una gran tarea de representación, creando una experiencia de usuario fluida.

El principal beneficio es que la interfaz de usuario responde a la entrada del usuario de inmediato, en concurrencia con el trabajo que aún se está ejecutando en segundo plano.

Sin embargo, la concurrencia también presenta peligros potenciales que los desarrolladores deben tener en cuenta. Para obtener una descripción general más detallada del modo concurrente en React en WordPress 6.2, consulte los ejemplos proporcionados en la nota para desarrolladores.

Cambios adicionales para desarrolladores

Otros cambios notables que los desarrolladores deben tener en cuenta incluyen los siguientes:

• WordPress 6.2 presenta un nuevo filtro de JavaScript que se puede usar para filtrar la configuración del bloque antes de que el editor se muestre en la pantalla. El nuevo filtro blockEditor.useSetting.before también permite a los desarrolladores modificar la configuración en función de la ubicación del bloque, la función del usuario actual, los bloques vecinos y más. Para obtener información adicional y ejemplos de uso, consulte Personalizar la configuración de cualquier bloque en WordPress 6.2.
• Se ha introducido una nueva propiedad skipBlockSupportAttributes para excluir atributos y estilos relacionados con los soportes de bloque en el componente ServerSideRender .
• Una nueva API de theme.json ahora permite aplicar estilo a las variaciones de bloques principales existentes de theme.json .
• Las fuentes de Google ahora se incluyen localmente y no se obtienen de las direcciones de Google en los temas agrupados de Twenty Twelve a Twenty Seventeen.

Pero eso no es todo. WordPress 6.2 presenta muchas funciones, mejoras y correcciones de errores que no mencionamos aquí por razones de brevedad. Para obtener una descripción general más completa, consulte la Guía de campo de WordPress 6.2.

Resumen

WordPress 6.2 nos acerca al final de la Fase 2 del proyecto Gutenberg llamado Personalización. Pero, como señala Matias Ventura, esto no significa que el trabajo de personalización esté completo y en futuras versiones. Como siempre, podemos esperar mejoras adicionales en el editor según los comentarios de la comunidad.

En esta publicación, exploramos algunas de las principales características, mejoras y correcciones de errores que vienen con WordPress 6.2. Pero hay mucho más en 6.2. Con diez versiones del complemento de Gutenberg en el núcleo, de la 14.2 a la 15.1, veremos un nuevo modo de exploración, un inspector de bloques con pestañas, widgets para la migración de temas de bloques, nuevas API y toneladas de mejoras y correcciones de errores. Y también habrá mejoras en accesibilidad e internacionalización.

Y si le encanta WordPress y desea adquirir nuevas habilidades de desarrollo de WordPress o probar y hacer contribuciones al CMS, asegúrese de tomar DevKinsta, el paquete de desarrollo de WordPress local completamente gratuito de Kinsta, para una prueba de manejo.

Ahora, a usted: ¿Ya probó la nueva versión en su entorno de desarrollo? ¿Qué características te gustan más en WordPress 6.2? Comparta sus pensamientos en la sección de comentarios a continuación.