WordPress 6.2 «Dolphy» fue lanzado y es hora de que exploremos las novedades de la primera versión de 2023.
Con WordPress 6.2, entramos en la fase 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 agilizar la experiencia de edición.
Se ha introducido un nuevo enfoque para navegar entre plantillas y partes de plantillas, así como la posibilidad de importar widgets en los temas de bloques, un nuevo modo de escritura sin distracciones, una experiencia de configuración de bloques a escala y montones de grandes y pequeñas mejoras en los bloques existentes, el rendimiento y la 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 agilizado significativamente el proceso de edición a lo largo del tiempo. Con WordPress 6.2, el desarrollo continúa y, en este artículo, te mostraremos la facilidad con la que ahora puedes gestionar un menú de navegación.
Echa un vistazo a nuestra guía en vídeo para descubrir las novedades de WordPress 6.2
Experiencia de Edición Mejorada
WordPress 6.2 ofrece una experiencia de edición mejorada, con toda la estructura del sitio en el centro. Ahora puedes gestionar los menús de navegación más fácilmente, pasar los 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 del editor de sitios y un modo de navegación renovados
Con WordPress 6.2, llegan varias mejoras a la interfaz del editor. La primera y más interesante actualización afecta a la interfaz del Editor de Sitios. Gracias al nuevo Modo de Navegación, ahora es más fácil navegar por las plantillas y las partes de las plantillas.
La nueva interfaz también te permite añadir una nueva plantilla o parte de plantilla directamente desde la barra lateral del editor, simplemente haciendo clic en el icono más (+) situado a la derecha del título del menú.
Según Ryan Welcher, colaborador de Wp Core y Documentación, «El 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 sin problemas. Para empezar a editar la plantilla/parte de plantilla actual, sólo tienes que hacer clic en el botón Editar del menú de la izquierda, o en la vista previa de la plantilla en el centro de la página.
Modo Sin Distracciones
WordPress 6.2 introduce un nuevo modo de edición Sin Distracciones, que elimina el desorden del canvas y te permite centrarte en el contenido de la página.
Puedes activar esta función en el panel de opciones que aparece al hacer clic en el icono de la elipsis (tres puntos) en la esquina superior derecha.
Una vez activado el modo Sin Distracciones, desaparecen las barras laterales y las barras de herramientas extrañas, dejando en la pantalla sólo el contenido en el que estás trabajando.
Inspector de bloques con pestañas
WordPress 6.2 introduce un nuevo Inspector de Bloques destinado a poner orden en la barra lateral, dividiendo los controles de configuración en paneles separados.
Los ajustes de bloque se dividen ahora en pestañas para separar los ajustes de estilo de otros ajustes 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 gestionar los hijos de un bloque, como submenús y enlaces en el bloque Navegación
- Configuración: Incluye ajustes de configuración no relacionados con la apariencia del bloque
- Aspecto: Incluye ajustes relacionados específicamente con el estilo del bloque actual, como la tipografía y los colores
Esto supone una notable mejora 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.
Tenlo en cuenta:
- El nuevo Inspector sólo muestra una pestaña cuando contiene elementos para mostrar.
- Si la pestaña Configuración sólo contiene el panel Avanzado, se traslada a la pestaña Apariencia.
- Si el Inspector de Bloques sólo tiene una pestaña, se muestra como antes de WordPress 6.2.
Echa un vistazo a la nota del desarrollador para ver más de cerca el nuevo Inspector de Bloques.
Partes de plantillas y bloques reutilizables coloreados
Para diferenciarlas más fácilmente de los grupos y bloques, las Partes de 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 canvas del editor.
Esto ocurre tanto en el Editor de Sitios como en el editor de entradas, como se muestra en la siguiente imagen.
Un insertador de bloques renovado
El Insertador de bloques se ve afectado por varios cambios que mejoran significativamente la experiencia general de edición.
En primer lugar, un nuevo diseño de la interfaz mejora la navegación entre las categorías de patrones y medios, y proporciona previsualizaciones más grandes para los patrones y los elementos de medios.
Cuando existen elementos multimedia en el sitio, aparece una pestaña Medios en el Insertador de bloques para simplificar la inserción de elementos multimedia dentro del contenido. Puedes arrastrar y soltar imágenes/medios o simplemente hacer clic en tus medios para añadirlos al contenido.
Dentro de la pestaña, un botón Abrir biblioteca de medios te lleva a la biblioteca de Medios de WordPress.
Integración de Openverse en el Insertador de Bloques
Openverse es una herramienta que pretende compartir obras con licencia abierta o de dominio público para que cualquiera pueda utilizarlas. Ahora, con WordPress 6.2, Openverse está integrado en el Insertador de Bloques.
Para acceder a esta nueva función, haz clic en la pestaña Medios del Insertador de Bloques. Esto muestra un panel con un campo de búsqueda y previsualizaciones de imágenes tomadas directamente del repositorio de Openverse.
Para los detalles técnicos, consulta el pull request de integración de Openverse.
Migrar widgets a temas de bloques
En WordPress 6.2, los usuarios que tengan un sitio con un tema clásico y decidan cambiar a un tema de bloques pueden migrar sus áreas de widgets existentes al nuevo tema, convirtiéndolas en partes de plantilla.
Veamos cómo funciona.
En primer lugar, crea un área de widgets en un tema clásico. Por ejemplo, podrías activar Twenty-Eleven y añadir un calendario al Área de pie de página uno.
Ahora cambia el tema a Twenty Twenty-Three. Abre el Editor de Sitios, elige una plantilla para editarla y añade una parte de plantilla.
En la barra lateral de bloques, selecciona el área de widgets que quieras importar en el menú desplegable Importar área de widgets.
Y ya está. Ahora puedes gestionar tu á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, puedes ver la ventana emergente de detalles del documento en WordPress 6.1, que incluye el número de palabras, el número de caracteres, el tiempo de lectura y el número 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 trasladado a un único panel de Vista General del Documento dividido en dos pestañas: Vista de Lista y Esquema.
Este cambio debería facilitar la gestión del documento.
Capacidades de Bloque Ampliadas
Con WordPress 6.2, se han ampliado las capacidades de varios tipos de bloques principales. Esto es especialmente cierto en el caso del bloque Navegación, al que afectan varios cambios y mejoras en la experiencia de edición.
Veamos 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.
Si haces clic en el elemento del menú, accederás a la barra lateral de configuración del Enlace de Página seleccionado, donde podrás editar los detalles del enlace, incluyendo la etiqueta, la URL, la descripción, el título del enlace y la rel. del enlace.
Este cambio simplifica enormemente la experiencia de edición de los menús de navegación, permitiéndote añadir, organizar y eliminar elementos de tu menú, o incluso crear nuevos menús de navegación.
Bloquear la Navegación
Otra mejora del bloque Navegación es la posibilidad de bloquear la edición del menú de forma más granular. Ahora puedes Restringir la edición, Inhabilitar el movimiento e Impedir la eliminación, mientras que con WordPress 6.1 sólo estaban disponibles las opciones Restringir la edición e Inhabilitar el movimiento.
Además, las opciones seleccionadas también se pueden aplicar a los bloques interiores (enlaces y submenús).
Añadir/Eliminar subtítulos de la barra de herramientas de bloques
Un nuevo botón Añadir/Eliminar subtítulos permite a los usuarios controlar los subtítulos desde la barra de herramientas de bloques para varios bloques (Audio, Vídeo, Imagen).
Si ya has establecido un pie de foto, se incluirá automáticamente cuando añadas la imagen a tu contenido.
Mejoras en el bloque Lista de páginas
Dos mejoras afectan al bloque Lista de páginas.
En primer lugar, el bloque Lista de páginas ahora puede expandirse para mostrar la lista de páginas en el panel Vista Lista.
Además, una nueva opción en la barra lateral del bloque te permite ahora establecer una página inicial y mostrar en el bloque sólo las páginas que descienden de ella.
Nuevo marcador de posición de bloque de grupo
Ahora el marcador de posición Bloque de grupo muestra un selector de variaciones cuando el bloque se añade al contenido de la página.
Soporte de bloque de cabeceras adhesivas
WordPress 6.2 introduce una nueva función de soporte de bloque de posición, empezando por las cabeceras adhesivas
Actualmente, esta nueva función sólo se aplica a los bloques de Grupo, a los que se opta por defecto.
Los desarrolladores de temas pueden activar la cabecera «sticky» en sus temas utilizando la función appearanceTools en theme.json. Si quieres un control más granular sobre las herramientas de apariencia, también puedes establecer la prop settings.position.sticky en true.
Puedes activar la cabeceras adhesivas en el panel Posición de la barra lateral de control del Inspector.
Con las cabeceras adhesivas activado, la etiqueta HTML obtiene una clase is-position-sticky, y algunas reglas 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;
}
La cabeceras adhesiva sólo funciona para bloques de Grupo en la raíz del documento. Aunque esto puede evitar confusiones y errores a los usuarios, puede que la cabecera «sticky» integrado te resulte un poco complicado por el momento (y puede que quieras consultar distintos métodos para añadir una cabeceras adhesivas a tu sitio web WordPress). Sin embargo, según la nota del desarrollador
… en las pruebas manuales, los comentarios indicaron que sin un trabajo adicional de UI o UX, podría ser confuso para los usuarios que intentan crear cabeceras adhesivas si accidentalmente establecen un bloque no raíz como adhesivo, o por ejemplo, un bloque dentro de una parte de plantilla de cabecera como adhesivo. La decisión fue reducir la función a sólo los bloques raíz en la 6.2 para disponer de más tiempo para explorar una solución adecuada para los bloques anidados.
La función de posicionamiento sólo está disponible para bloques individuales, por lo que no la encontrarás en Estilos Globales.
Mejoras adicionales en la experiencia de edición de bloques
Otras mejoras notables en la edición de bloques son las siguientes:
- Ahora puedes arrastrar y soltar imágenes en un párrafo vacío para sustituirlo por un bloque Imagen.
- Los controles de tipografía 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 puedes mostrar y ocultar controles como en la interfaz de configuración de bloques.
Controles de tipografía en WordPress 6.1 frente a WordPress 6.2 - Ahora es posible modificar el espaciado entre letras de los bloques de encabezado directamente en la interfaz de Estilos Globales.
- Ahora es posible establecer el fondo, el enlace y el color del texto del bloque Calendario.
- Se han introducido dos nuevas categorías de patrones de bloques Banner y Footer para reflejar mejor la estructura de las páginas web.
- Ahora es posible autocompletar enlaces en cualquier bloque utilizando el acceso directo
[[. Antes de este cambio, los bloques tenían que declarar explícitamente la compatibilidad con el autocompletado de enlaces mediante__experimentalSlashInserter. - Un nuevo atajo de teclado
control+option+1–6te permite transformar un párrafo en un encabezado. - El Bloque Lista de Páginas admite ahora todas las opciones tipográficas, incluidas 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.
Ajustes de tipografía del bloque Lista de páginas en WordPress 6.2
Herramientas de Diseño Mejoradas
Muchas de las nuevas funciones y mejoras introducidas con WordPress 6.2 mejoran las capacidades de estilo y diseño del CMS. A continuación encontrarás una lista de las funciones más interesantes relacionadas con el diseño que llegan con la versión 6.2;
Libro de Estilos
WordPress 6.2 introduce una nueva función de Libro de Estilo que permite a los usuarios previsualizar cualquier bloque que se pueda utilizar en sus sitios web sin tener que añadir esos bloques a una plantilla/parte de plantilla. Puedes iniciar el Libro de Estilo haciendo clic en el botón Abrir Libro de Estilos (el icono del ojo) que ahora aparece en la cabecera Estilos dentro de los estilos globales.
Esto abre una interfaz que muestra una vista previa de cada bloque principal y de terceros por categoría.
La nueva interfaz del Libro de Estilos simplifica el proceso de diseño haciendo 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 se genera mediante un nuevo componente StyleBook añadido a @wordpress/edit-site para mostrar una vista previa de cada bloque registrado en un iframe (véase 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 pueda insertar ni previsualizar de dos formas. En primer lugar, puedes 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 los estilos globales
Con WordPress 6.2, ahora es posible añadir y personalizar sombras a algunos bloques mediante Estilos Globales o theme.json (en el momento de escribir este artículo, la función de sombras sólo está disponible para el bloque Botón).
En primer lugar, en los temas que admiten esta función, puedes añadir sombras desde la interfaz de Estilos Globales.
Para verlo en acción, activa el tema Twenty Twenty-Three, ve a Estilos > Bloques > Botón y haz clic en el botón Sombra.
Una ventana emergente denominado Sombra te permitirá seleccionar el tipo de sombra de entre las preestablecidas en el tema.
Los desarrolladores de temas y los usuarios avanzados también pueden añadir una sombra a los bloques utilizando theme.json. La siguiente definición añade una sombra negra de 4px a los bloques Botón:
"styles": {
"blocks": {
"core/button": {
"shadow": "4px 4px #000000"
}
}
},También puedes definir preajustes para que los usuarios del tema puedan seleccionar uno en la interfaz 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, tus preajustes aparecen en el panel Sombra, en el bloque Estilos.
También puedes elegir el valor de un preajuste y utilizarlo como predeterminado del bloque:
"styles": {
"blocks": {
"core/button": {
"shadow": "var(--wp--preset--shadow--blue)"
}
}
}Nuevo control de dimensiones de altura mínima
A partir de WordPress 6.2, el panel Dimensiones de la barra lateral de configuración de bloques para los bloques Grupo y Contenido de la entrada ofrece ahora un nuevo Control de Altura Mínima activado por defecto en los temas que utilizan la función appearanceTools.
Este nuevo control permite a los usuarios establecer una altura mínima para los bloques Grupo y Contenido de la entrada y se puede utilizar para mostrar el pie de página en la parte inferior de la página, incluso con poco contenido.
Combinado con las nuevas herramientas de alineación vertical, también permite alinear verticalmente los elementos interiores en la parte superior/central/inferior de la página.
Los desarrolladores pueden añadir soporte para la altura mínima a los temas añadiendo el ajuste minHeight a theme.json:
{
"settings": {
dimensions: "minHeight": true
}
}También puedes utilizar la propiedad appearanceTools:
{
"settings": {
"appearanceTools": true
}
}La nueva propiedad minHeight también se puede utilizar para establecer un valor específico directamente en theme.json:
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "80vh"
}
}
}
}
}Los desarrolladores de bloques pueden añadir la propiedad supports.dimensions.minHeight a su archivo block.json y establecer su valor en true. Para los bloques estáticos, la regla CSS min-height se almacenará como un estilo en línea, mientras que para los 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 funciones que faltaban en el Editor de Sitios en comparación con el Personalizador de Temas era la posibilidad de añadir estilos CSS personalizados. WordPress 6.2 llena ese vacío y ahora la interfaz de Estilos Globales incluye un campo de texto para añadir reglas CSS personalizadas que no se sobrescribirán cuando actualices tu tema.
Puedes añadir estilos personalizados por bloque, desde el panel de estilos de bloque, o haciendo clic en el botón de acciones Más estilos de la barra de herramientas Estilos. Esto muestra un menú emergente con un elemento CSS adicional.
Para soportar CSS personalizado, se ha añadido una nueva propiedad styles.css a theme.json.
Las reglas CSS personalizadas pueden anular completamente cualquier estilo personalizado establecido en theme.json. Si no quieres que esto ocurra, puedes considerar incluir la hoja de estilos utilizando los métodos de encolado existentes.
También puedes añadir CSS personalizado por bloque en theme.json utilizando la propiedad styles.blocks.block.css:
"styles": {
"blocks": {
"core/button": {
"css": "background: #FF0000"
}
}
}También puedes utilizar & para elementos anidados y pseudoselectores.
Para ver más de cerca la nueva función de CSS personalizado, consulta también CSS personalizado para estilos globales y por bloques.
Copiar y pegar estilos entre bloques
Un nuevo grupo en el menú Opciones de la barra de herramientas del bloque muestra ahora dos botones para Copiar estilos y Pegar estilos. Antes de esta adición, sólo era posible copiar estilos, pero no estaba claro cómo pegar estilos.
Para probar esta nueva función, añade un nuevo bloque, como un encabezado. Cambia el estilo y elige Copiar estilos en el menú Opciones del bloque.
A continuación, selecciona otro bloque y elige Pegar estilo. Los estilos copiados se aplicarán automáticamente al segundo bloque.
Ten en cuenta que esta función sólo está disponible en sitios seguros (https) en navegadores compatibles. Para más detalles, consulta el pull request.
Aplicar globalmente los cambios de bloque
WordPress 6.2 también introduce un botón Aplicar globalmente en el panel Avanzado para bloques individuales, que te permite enviar tus cambios de estilo de bloque a Estilos globales y aplicar esos cambios a todo el sitio web.
Gracias a esta nueva función, aplicar estilos de tipografía, espaciado, dimensiones y color de bloque a todos los bloques de ese tipo es ahora tan fácil como pulsar un botón (consulta también este pull request).
Experiencia de diseño mejorada con los visualizadores de espaciado
Los visualizadores de espaciado te permiten previsualizar la cantidad de margen o relleno que se aplica a un bloque. Con WordPress 6.2, esta función se ha mejorado con un par de añadidos que mejoran la experiencia de edición.
En primer lugar, los Visualizadores de Espaciado ahora aparecen en cuanto pasas el ratón por encima del control de margen o relleno.
En segundo lugar, el Visualizador de Espaciado ahora oculta automáticamente la barra de herramientas de bloque en cuanto pasas el ratón por encima del ajuste de espaciado, para que puedas previsualizar los nuevos ajustes de margen y relleno sin el desorden de la barra de herramientas de bloque.
Son cambios pequeños pero significativos que afectan a un buen número de bloques principales.
Cambios para los Desarrolladores
WordPress 6.2 también trae muchas novedades para los desarrolladores: nuevas API, corrección de errores, mejoras de rendimiento y mucho más. Vamos a sumergirnos en las novedades más atractivas.
Una nueva API HTML
WordPress 6.2 introduce el Procesador de etiquetas HTML, un analizador compatible con las especificaciones HTML5 que proporciona una forma segura de encontrar etiquetas HTML específicas y añadir, eliminar o actualizar atributos mediante PHP. El Procesador de etiquetas HTML es el primer componente de una nueva API de procesamiento HTML.
La nueva API facilita la realización de tareas antes complejas que a menudo requerían el uso de expresiones regulares.
En el siguiente ejemplo, simplemente añadimos 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 tienes que seleccionar la etiqueta de destino:
$p->next_tag();Una vez seleccionada la etiqueta de destino, puedes 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()
Puedes 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 puedes añadir o eliminar una clase o un atributo. En el código siguiente, añadimos 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();A continuación, puedes hacer eco o devolver la etiqueta actualizada utilizando el método $p->get_updated_html().
Para conocer más de cerca la nueva API HTML, consulta este tutorial interactivo de PHP de Adam Zieliński, committer del núcleo de WordPress.
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 pueden insertarse fácilmente en entradas, páginas, tipos de entradas personalizados y plantillas».
Con WordPress 6.2, la API de Patrones incluye ahora una nueva propiedad template_types que te permite especificar en qué plantillas se puede utilizar un determinado patrón de bloques.
Jorge Costa destaca que se trata de una actualización sólo para backend y que actualmente no hay ninguna funcionalidad UX correspondiente. Sin embargo, podemos esperar ver implementaciones evolucionadas de esta función con WordPress 6.3:
El primer uso, pensando en WordPress 6.3, es mostrar al usuario algunos patrones que tengan sentido en una plantilla cuando el usuario empiece a crear una plantilla. Los usuarios pueden empezar desde un patrón en lugar de «en blanco» o la plantilla alternativa.
En el aspecto técnico, se ha modificado la función register_block_pattern() para incluir un nuevo parámetro template_types, que es una matriz de cadenas que contiene los nombres de las plantillas a las que está destinado el patrón de bloque.
También se ha modificado la API REST para que devuelva los tipos de plantilla de un patrón de bloque si se ha definido al menos uno.
React v18.0 y el modo 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 incluye nuevas API, funciones, mejoras y correcciones de errores. Una de las principales características de React v18.0 es la introducción del modo de concurrencia, «un nuevo mecanismo entre bastidores que permite a React preparar varias versiones de tu interfaz de usuario al mismo tiempo».
Una de las principales características del modo de concurrencia en React es que es interrumpible:
React garantiza que la interfaz de usuario se mostrará coherente aunque se interrumpa una renderización. Para ello, espera a realizar las mutaciones del DOM hasta el final, una vez que se ha 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 inmediatamente a las entradas del usuario aunque esté en medio de una gran tarea de renderizado, creando una experiencia de usuario fluida.
La principal ventaja es que la interfaz de usuario responde inmediatamente a las entradas del usuario, en concurrencia con el trabajo que sigue ejecutando en segundo plano.
Sin embargo, la concurrencia también introduce peligros potenciales que los desarrolladores deben conocer. Para una visión más detallada del modo concurrente en React en WordPress 6.2, consulta los ejemplos proporcionados en la nota de desarrollo.
Cambios adicionales para desarrolladores
Otros cambios notables que los desarrolladores deben tener en cuenta son los siguientes:
- WordPress 6.2 introduce un nuevo filtro JavaScript que puede utilizarse para filtrar la configuración de los bloques antes de que el editor se muestre en la pantalla. El nuevo filtro
blockEditor.useSetting.beforetambién permite a los desarrolladores modificar la configuración en función de la ubicación del bloque, el rol actual del usuario, los bloques vecinos, etc. Para más información y ejemplos de uso, consulta Personalizar la configuración de cualquier bloque en WordPress 6.2. - Se ha introducido una nueva prop
skipBlockSupportAttributespara excluir atributos y estilos relacionados con los soportes de bloque en el componenteServerSideRender. - Una nueva API de theme json permite ahora aplicar estilos a las variaciones de bloques del núcleo existentes desde theme.json.
- Las fuentes de Google Fonts ahora se incluyen localmente y no se obtienen de las direcciones de Google en los temas incluidos de Twenty Twelve a Twenty Seventeen.
Pero eso no es todo. WordPress 6.2 introduce muchas funciones, mejoras y correcciones de errores que no hemos mencionado aquí en aras de la brevedad. Para obtener una visión más completa, consulta la Guía práctica de WordPress 6.2.
Resumen
WordPress 6.2 nos acerca al final de la Fase 2 del proyecto Gutenberg, denominada Personalización. Pero, como señala Matias Ventura, esto no significa que el trabajo sobre la personalización esté terminado y en futuras versiones. Como siempre, podemos esperar mejoras adicionales en el editor basadas en los comentarios de la comunidad.
En este post, hemos explorado algunas de las principales funciones, mejoras y correcciones de errores que llegarán con WordPress 6.2. Pero hay mucho más en la 6.2. Con diez versiones del plugin Gutenberg en el núcleo -de la 14.2 a la 15.1-, vamos a ver un nuevo Modo Explorar, un Inspector de Bloques con pestañas, migración de Widgets a Temas de Bloques, nuevas API y montones de mejoras y correcciones de errores. Y también habrá mejoras en la accesibilidad y la internacionalización.
Y si te gusta WordPress y quieres adquirir nuevas habilidades de desarrollo de WordPress o probar y hacer contribuciones al CMS, asegúrate de probar DevKinsta, la suite de desarrollo local de WordPress completamente gratuita de Kinsta.
Ahora te toca a ti: ¿Has probado ya la nueva versión en tu entorno de desarrollo? ¿Qué características te gustan más de WordPress 6.2? Comparte tus opiniones en la sección de comentarios más abajo.
Deja una respuesta