¡Ya está aquí WordPress 5.9 Josephine! El lanzamiento de la primera versión de WordPress del año estaba previsto inicialmente para el 14 de diciembre de 2021. Debido a varios problemas abiertos y errores no resueltos, la versión final se había retrasado y finalmente se ha lanzado el 25 de enero de 2022.
Si te preguntas qué hay de nuevo en WordPress 5.9, la respuesta corta es la edición completa del sitio (FSE- Full Site Editing).
Y, de hecho, muchas de las características de la versión 5.9 sólo están disponibles si utilizas un tema compatible con el Full Site Editing del sitio, como el nuevo tema por defecto, Twenty Twenty-Two.
Con WordPress 5.9, llegamos al corazón de la segunda fase de la hoja de ruta de Gutenberg: la fase de personalización, que se centra principalmente en el Full Site Editing, los patrones de bloques, el directorio de bloques y los temas basados en bloques.
Con la 5.9, que saldrá el mes que viene, estamos -diría- en el MVP, el Producto Mínimo Viable de esta fase de personalización de Gutenberg.
Estas palabras de Matt Mullenweg en 2021 State of the Word resumen mejor las características clave de la nueva versión de WordPress.
Dicho esto, ¿qué novedades presenta la primera versión de WordPress de 2022?
¡Averigüémoslo!
Estilos globales: Una interfaz gráfica para theme. json
Con el lanzamiento de WordPress 5.8 en 2021, la manipulación del archivo theme.json se convirtió en la forma estándar de los desarrolladores de temas para personalizar la configuración y los estilos del editor.
WordPress 5.9 lleva las cosas al siguiente nivel al introducir una interfaz gráfica que permite a los usuarios personalizar los preajustes de estilo para sus sitios web, ya sea de forma global o a nivel de bloque, sin escribir una sola línea de código.
El mecanismo de Estilos Globales debería alterar significativamente la forma en que estás acostumbrado a personalizar la apariencia de tus sitios web, ya que los Estilos Globales afectan a varios aspectos del diseño de los sitios de WordPress.
En primer lugar, la interfaz de Estilos Globales sustituye al Personalizador y es ahora la única forma de personalizar la configuración y los estilos con los temas en bloque. Asimismo, ya no serán necesarias las complejas páginas de administración de opciones de temas. Esto proporciona una nueva forma estándar de configurar los ajustes y estilos del tema y, al mismo tiempo, debería agilizar el flujo de trabajo de desarrollo del tema.
Con los Estilos Globales, los usuarios de WordPress ganan más control sobre la presentación de sus sitios web, tanto globalmente como por tipo de bloque, más allá del contexto de las páginas o entradas individuales.
Ahora hay una nueva barra lateral en el editor del sitio, en cuya parte superior encontrarás un pequeño panel de vista previa y cuatro componentes en el siguiente orden:
Podemos esperar que se añadan nuevos componentes con el tiempo.
Echemos un vistazo más de cerca a la nueva interfaz.
Vista previa de los estilos
El primer elemento de la barra lateral de Estilos Globales es un panel de vista previa. Este panel te permite comprobar el resultado de tus personalizaciones y es especialmente útil cuando tus cambios se aplican a elementos no visibles en el lienzo del editor del sitio.
La siguiente imagen muestra tres combinaciones de estilos diferentes comparadas:
Tipografía
El panel de Tipografía es donde controlas la tipografía de tu sitio web. Por supuesto, los controles disponibles en este panel dependen de la configuración de tu theme.json.
Por ejemplo, el tema Twenty Twenty-One Blocks (TT1 Blocks) declara las siguientes propiedades de tipografía:
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [],
"fontFamilies": []
}
}La siguiente imagen muestra los ajustes de tipografía resultantes en la barra lateral de Estilos Globales:
Profundicemos un poco más y veamos cómo el tema TT1 Blocks declara fontFamilies:
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
"slug": "system-font",
"name": "System Font"
},
{
"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
"slug": "helvetica-arial"
},
{
"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
"slug": "geneva-verdana"
},
{
"fontFamily": "Cambria, Georgia, serif",
"slug": "cambria-georgia"
},
{
"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
"slug": "hoefler-times-new-roman"
}
]Puedes comprobar estas familias tipográficas en el panel de vista previa de Estilos Globales:
Colores
En la sección Colores, puedes ver y editar las paletas de colores y personalizar el color de varios elementos del sitio.
Al hacer clic en esos elementos, accedes a un nuevo panel en el que puedes elegir los colores de tres paletas de colores: Paleta del núcleo, del tema y personalizada (lee más en Colores por defecto, Colores del tema y Colores personalizados).
En este panel, podrás establecer y modificar el color del elemento actual.
Diseño
El último grupo de herramientas está destinado a la personalización del diseño. En el contexto global, esto se limita al contenedor del sitio.
Bloques
Con la implementación del mecanismo de Estilos Globales, ahora también es posible cambiar la apariencia de bloques específicos, como Párrafo (tipografía y colores), Botones (diseño) y Columna (colores y diseño).
Ten en cuenta que los estilos de los bloques pueden personalizarse desde la interfaz de Estilos Globales sólo si el bloque declara la compatibilidad con una funcionalidad específica en el archivo block.json correspondiente. Por ejemplo, el bloque core/post-title admite actualmente los siguientes estilos:
"supports": {
"align": [ "wide", "full" ],
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"margin": true
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true,
"fontAppearance": true,
"textTransform": true
}
}
},Como el bloque core/post-title admite colores, espaciado y tipografía, encontrarás las entradas correspondientes en la configuración de Estilos Globales del bloque Título de la publicación.
La siguiente imagen muestra la configuración de la tipografía, que puedes comparar fácilmente con el código anterior:
Hay que tener en cuenta que WordPress 5.9 sólo ofrece la primera implementación de la interfaz de Estilos Globales. Como señala Matias Ventura, podemos esperar razonablemente un mayor desarrollo de la nueva función de control de estilos:
En el futuro, habrá flujos integrados en el sistema que te permitirán pasar de los estilos locales a los globales, como por ejemplo, hacer personalizaciones en un bloque de botones y optar por aplicarlas globalmente a todos los botones de ese tipo.
Así que es posible que pronto veamos mejoras importantes. La imagen de abajo es sólo un ejemplo de lo que podemos esperar:
Otras mejoras podrían incluir la posibilidad de que los temas ofrezcan paletas de colores alternativas y múltiples variaciones de estilo globales.
Last week I built a handful of Twenty Twenty-Two's color + font variations into super-simple child themes. They're really lightweight, and I love the idea of offering folks a drastically different site with one click.🎉https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A
— kjellr (@kjellr) November 15, 2021
Los desarrolladores pueden profundizar en el mecanismo de estilo global en el artículo de soporte Ajustes y Estilos Globales (theme.json). Encontrarás ejemplos adicionales en nuestra introducción al tema por defecto Twenty Twenty-Two.
El bloque de navegación
El bloque de navegación ha sido calificado como «uno de los bloques temáticos más impactantes», y no tememos decir que estamos de acuerdo.
El bloque ha estado en fase embrionaria durante un tiempo (consulta también el tema de seguimiento del bloque de navegación y el tema de seguimiento i2). Aun así, ahora que se han solucionado todos los problemas pendientes y los bloqueos enumerados como imprescindibles en WordPress 5.9, por fin podemos empezar a utilizar una de las funciones más potentes incorporadas al núcleo con WordPress 5.9.
Una rápida visión de la interfaz del bloque de navegación
El uso del nuevo bloque puede ser un poco confuso al principio, pero una vez que le cojas el tranquillo, apreciarás todo su potencial.
Cuando añades por primera vez un bloque de navegación, el marcador de posición del bloque ofrece tres opciones para seleccionar un menú basado en un bloque existente, crear un menú con todas las páginas o empezar de cero con un menú vacío.
El nuevo menú de navegación también te permite importar menús creados a través de la pantalla de menús de apariencia que está disponible con los temas clásicos.
Esto significa que si estás pasando de un tema clásico a un tema de bloques, no tendrás que reconstruir tus menús existentes. Sólo tienes que elegir uno de tus «menús clásicos» actualmente disponibles, y se convertirá automáticamente en un menú de navegación basado en bloques.
Puedes añadir el bloque de navegación en cualquier lugar de tus páginas. Por ejemplo, puede resultarte útil en los artículos largos para crear una tabla de contenidos, que permita a los usuarios saltar a secciones de contenido específicas.
Los nuevos enlaces de navegación se añaden instantáneamente al bloque de navegación haciendo clic en el icono del signo más (+) de la derecha (consulta también las notas de la versión 11.7 de Gutenberg), a menos que ya se hayan añadido otros tipos de bloques al menú.
Al hacer clic en el botón Editar de la barra de herramientas del bloque de Navegación, un elemento del menú se convierte en un enlace personalizado. Esto te permite añadir, editar, reordenar y eliminar elementos individualmente.
También puedes transformar los enlaces en bloques haciendo clic en el botón Transformar de la barra de herramientas de bloques. Esto te permite añadir bloques específicos directamente al menú de navegación.
Los bloques Enlace personalizado, Espaciador, Logotipo del sitio, Enlace de inicio, Iconos sociales y Búsqueda están ahora expuestos a los usuarios al añadir bloques a los menús de navegación.
En la barra lateral de Configuración, encontrarás un amplio conjunto de opciones para controlar varios aspectos de tus menús de navegación.
El panel de Diseño incluye controles para la justificación, la orientación y la envoltura.
El bloque de navegación también cuenta con un panel de configuración de visualización mejorado con una opción para un menú de hamburguesa siempre activo.
También puedes personalizar el texto y los colores de fondo de tus menús y submenús.
Otra útil adición añadida recientemente al bloque de Navegación es la compatibilidad con la separación de bloques, que añade la posibilidad de que los usuarios controlen la distancia entre los elementos del menú.
El panel de Tipografía proporciona un conjunto de controles para la familia de fuentes, la apariencia, la altura de las líneas, la decoración y las mayúsculas y minúsculas. Todos estos controles pueden activarse y desactivarse desde un menú desplegable que aparece cuando haces clic en el icono de la elipsis de la derecha.
El bloque de navegación: Bajo el capó
Los datos del bloque de navegación se almacenan en la base de datos utilizando un tipo de post dedicado a wp_navigation.
¿Por qué es esto interesante para los usuarios de WordPress y cómo funciona?
Digamos que has creado un menú de navegación compuesto por dos enlaces personalizados y un cuadro de búsqueda. Con el tema Twenty Twenty-Two instalado, el menú podría tener el aspecto que se muestra en la siguiente imagen:
El bloque de navegación anterior se almacena en la base de datos como wp_navigation post type como sigue:
<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->Almacenar el contenido del bloque de Navegación en la base de datos permite a los usuarios utilizar los mismos menús de navegación en diferentes temas de bloques. Si el menú no es visible de inmediato, basta con elegir el menú de navegación deseado en el selector de menús (ver también el tema #36087 y el PR #36178).
La siguiente imagen muestra el menú anterior con el tema de bloques Twenty-One:
El bloque Navegación ha pasado por varias iteraciones. Puedes profundizar en cada implementación en las notas de la versión de Gutenberg 11.7, 11.8 y 11.9.
También puedes leer más sobre el bloque de navegación en el artículo The new Navigation block dev note y Navigation block support.
Galerías de imágenes, imágenes destacadas e iconos del sitio
Con el objetivo de que las imágenes se comporten de forma más coherente en diferentes contextos, WordPress 5.9 ofrece nuevas características y mejoras en varios bloques. El bloque Galería ha sido completamente revisado, mientras que varios cambios en los bloques Imagen destacada e Icono del sitio dan a los usuarios un control más granular sobre las respectivas imágenes.
Un bloque de galería refactorizado
En WordPress 5.8, la capacidad de personalizar la apariencia de las imágenes en las galerías es algo limitada. No había forma de cambiar el estilo de la imagen ni de aplicar un filtro de duotono.
Además, faltaban funciones importantes en las imágenes de las galerías, como añadir enlaces personalizados a las imágenes individuales de una galería.
Para entender mejor la razón de esta asimetría entre las imágenes en los dos contextos diferentes de una sola imagen y una imagen en una galería, echemos un vistazo al bloque Galería en la vista de Código en WordPress 5.8:
Ten en cuenta que los detalles de las imágenes sólo se almacenan en el delimitador del bloque de la Galería (consulta también ¿Qué es un bloque Gutenberg?).
Esto hizo que las imágenes individuales se comportaran de forma diferente a las imágenes de las galerías.
Para que las imágenes se comporten de forma coherente en los dos contextos diferentes, WordPress 5.9 introduce un bloque Galería completamente refactorizado, que ahora se comporta como un contenedor para una colección de elementos de figuras en lugar de una lista desordenada de imágenes.
En WordPress 5.9, las imágenes de la galería se anidan utilizando las APIs del núcleo innerBlocks , y cada imagen almacena su propio conjunto de detalles, exactamente como las imágenes individuales.
Se trata de una gran mejora, ya que las imágenes del bloque Galería admiten ahora las mismas características disponibles en los bloques de Imagen principales, como las dimensiones de la imagen y los filtros de duotono, así como las características estándar del bloque, como las funcionalidades de arrastrar y soltar, copiar, duplicar y eliminar.
Con el nuevo bloque Galería, podrás estilizar las imágenes individualmente. Esto otorga una amplia gama de oportunidades de personalización.
La imagen de abajo muestra varias imágenes en una galería, cada una con esquinas redondeadas de forma diferente:
También puedes utilizar diferentes filtros de duotono en distintas imágenes de la misma galería.
Y, por supuesto, puedes asignar una clase CSS específica a cada imagen, lo que te da superpoderes adicionales para añadir cualquier personalización que necesites a las imágenes de tu galería.
Para ver más de cerca el nuevo bloque de Galería, consulta también Gallery Block Refactor Dev Note, Próximas mejoras del bloque de Galería y las notas de la versión 11.4 de Gutenberg.
Mejoras en las imágenes destacadas
También se han introducido varias mejoras en el bloque Imagen destacada.
Controles de dimensiones básicas
El bloque Imagen destacada cuenta ahora con un nuevo panel de configuración de Dimensiones que proporciona controles de altura, anchura y escala.
El control de las dimensiones también se aplica a las imágenes destacadas en los bloques del Bucle de Consulta, como se muestra en la siguiente imagen:
Filtros de duotono en las imágenes destacadas
Ya hemos mencionado que ahora podemos aplicar el filtro duotono en las imágenes envueltas en el nuevo bloque de Galería refactorizado.
Ahora, a partir de WordPress 5.9, los filtros de duotono también están disponibles en los bloques de Imágenes Destacadas en cualquier contexto, desde las plantillas de entradas y páginas hasta los bloques de Query Loop.
Esta función abre la puerta a combinaciones de colores creativas y coherentes en todo el sitio.
Recortar imágenes en el logotipo del sitio
Antes de WordPress 5.9 (y Gutenberg 11.6), las imágenes del logotipo sólo podían editarse antes de subirlas. Con WordPress 5.9, puedes recortar, ampliar y girar las imágenes utilizadas en el bloque Logotipo del Sitio directamente desde la barra de herramientas del bloque.
Nuevas herramientas de diseño, bloques y mejoras en la interfaz de usuario
Once versiones de Gutenberg se fusionan en el núcleo con WordPress 5.9, ofreciendo tantas características, mejoras y correcciones de errores que no sería posible abarcarlas todas en un solo artículo.
Así que hemos elegido algunas de las que nos han parecido más dignas de atención. Para obtener una visión más profunda de esas características y mejoras, también puedes consultar las publicaciones de la versión de Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 y 11.9.
Dicho esto, esta sección cubrirá los siguientes cambios:
La interfaz de usuario compatible con los bordes
A partir de WordPress 5.9, cuando el theme.json declare la configuración de border y un bloque declare la compatibilidad con los bordes a través de la API de compatibilidad de bloques, un nuevo panel de configuración proporcionará controles para el radio, la anchura, el estilo, el color y las unidades de los bordes(véase también Gutenberg 11.1).
El bloque principal de Grupo es un buen ejemplo de esta útil mejora de la interfaz de usuario. El archivo block.json del bloque Grupo incluye ahora las siguientes declaraciones supports:
{
...
"supports": {
"align": [ "wide", "full" ],
"anchor": true,
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"padding": true,
"__experimentalDefaultControls": {
"padding": true
}
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": true,
"radius": true,
"style": true,
"width": true
}
},
...
},
...
}Esta función permite a los usuarios crear impresionantes efectos gráficos en sus sitios web con un esfuerzo mínimo. Puedes verlo en acción con el nuevo tema Twenty Twenty-Two.
En una nueva entrada o página, crea un nuevo bloque de grupo y selecciónalo. Verás un panel de bordes en la barra lateral de configuración del bloque. Cambia el ancho y el estilo del borde según sea necesario y disfruta del resultado.
Si eres un desarrollador de temas y quieres añadir esta función a tus temas, abre tu archivo theme.json y declara la compatibilidad con los bordes como se muestra en el siguiente código:
{
"version": 1,
"settings": {
"border": {
"customColor": true,
"customRadius": true,
"customStyle": true,
"customWidth": true
}
}
}Guarda el archivo y vuelve a tu panel de control de WordPress. En una nueva entrada o página, crea un nuevo bloque de grupo y selecciónalo. Ahora deberías ver un panel de bordes en la barra lateral de configuración del bloque (consulta también este theme.json experimental).
Mejoras en la vista de lista
Con WordPress 5.9, una vista de lista ha sido mejorada y ahora cuenta con la función de arrastrar y soltar, secciones plegables y anclajes HTML.
Arrastrar y soltar en la vista de lista
Como se menciona en el pull request #33320, se ha implementado la función de arrastrar y soltar en el Esquema pero se ha desactivado por problemas de rendimiento.
A partir de WordPress 5.9, se ha reimplementado la función de arrastrar y soltar en el Esquema. Puedes volver a arrastrar y soltar bloques y grupos de bloques en cualquier lugar de la Vista de Lista. Esta es una gran mejora en la usabilidad del editor, ya que te permite mover rápida y fácilmente bloques y grupos de bloques por tus páginas. Es fundamental en artículos y páginas de formato largo, y en la gestión de estructuras complejas de bloques anidados.
Secciones colapsables en la vista de lista
Otra mejora significativa de la Vista de Lista es la posibilidad de expandir/contraer secciones de bloques anidados. Esto te permite navegar fácilmente por estructuras de bloques complejas, expandiendo grupos individuales de bloques mientras dejas todo el resto colapsado.
También puedes expandir y contraer las secciones de la Vista de Lista utilizando las flechas izquierda y derecha.
Anclas HTML en los elementos de la vista de lista
Otra mejora útil es la posibilidad de añadir anclas HTML a tus bloques en la Vista de Lista y verlas de un vistazo.
Control del espacio entre bloques
Introducido por primera vez en Gutenberg 11.4 y ahora incorporado al núcleo con WordPress 5.9, el nuevo control de espacio de bloques te permite establecer una distancia personalizada entre los elementos de un bloque. A continuación, puedes ver una vista previa con diferentes valores de espaciado entre bloques en un bloque Columnas con el tema predeterminado Twenty Twenty-Two:
El espaciado de huecos estará disponible inicialmente para bloques específicos, incluyendo botones, imágenes, columnas, títulos y navegación, pero el soporte debería extenderse a más bloques en el futuro.
Los temas deben activar el espaciado de separación en theme.json utilizando la nueva propiedad appearanceTools. Puedes leer más sobre los appearanceTools en nuestra inmersión profunda en Twenty Twenty-Two. Consulta también los pull requests #33991 y #34630.
Vista previa de la URL enriquecida para el control de enlaces
Aprovechando el nuevo punto final REST url-details, el control de enlaces proporciona ahora una vista previa de la URL enriquecida que muestra los detalles de un recurso de destino de enlace.
En su primera implementación, esta función sólo estaba disponible en el componente richtext del editor de entradas. En el momento de escribir este artículo, también está disponible en el Editor de Sitios, pero no en los editores de Navegación y Widgets.
Crear páginas desde la ventana emergente de enlaces
WordPress 5.9 también presenta una interfaz de usuario de enlaces en línea mejorada, que muestra un nuevo botón para crear nuevas páginas directamente desde la ventana emergente de enlaces en línea. Esta función sólo está disponible en el Editor de Publicaciones.
Mejoras en el bloque de búsqueda
El Bloque de Búsqueda ahora muestra la configuración del color del botón y del borde.
Ahora también puedes personalizar el color del fondo y del texto y el color y el radio de los bordes.
Nuevos controles para las dimensiones de los bloques
Ahora hay un nuevo panel de configuración de Dimensiones para que los usuarios puedan controlar el espacio que ocupa un bloque en la página. El panel incluirá controles de altura, anchura, padding, margen y posiblemente alineación, pero no todos los atributos estarán disponibles para todos los bloques.
Los desarrolladores de bloques encontrarán el componente <DimensionControl /> documentado en GitHub, pero ten en cuenta que todavía está marcado como una función experimental y podría estar sujeto a cambios de ruptura en el momento de escribir este artículo.
Se ha añadido un nuevo bloque de grupo de widgets a la pantalla de widgets
Ahora hay un nuevo bloque de grupo de widgets disponible en el editor de widgets basado en bloques. El último bloque te permite añadir un grupo de bloques en un widget con un título en el Editor de Widgets de los temas clásicos y en el Personalizador.
Puedes leer más sobre el editor de widgets en Editor de widgets por bloques y Widgets por bloques en el personalizador.
Flex Layout y el nuevo bloque de filas
Introducido originalmente como una característica experimental con Gutenberg 11.2, el diseño flexible se ha extendido a varios bloques, incluyendo los bloques de Enlaces Sociales y de Grupo.
Algunos bloques, como el de Enlaces Sociales, ofrecen ahora un conjunto de controles de la barra de herramientas y ajustes de la barra lateral que te permiten personalizar el diseño flexible.
Esta misma funcionalidad está disponible en el bloque Navegación y en el bloque Fila, una nueva variación del bloque Grupo introducida con Gutenberg 11.5.
La siguiente imagen muestra el bloque Fila con controles de diseño en la barra lateral de ajustes:
A continuación, puedes ver el mismo bloque Row en el frontend y en la herramienta de inspección de Chrome.
Mejoras en el patrón de bloques
Introducidos por primera vez en WordPress 5.5, los patrones de bloques permiten a los usuarios de WordPress incluir en su contenido complejas estructuras de bloques anidados listas para usar con sólo unos pocos clics.
Ahora, WordPress 5.9 da un paso más hacia la democratización del diseño y el empoderamiento del usuario al introducir un par de mejoras en el sistema de patrones de bloques.
Entonces, ¿qué hay de nuevo en los patrones de bloques en WordPress 5.9?
Patrones destacados del directorio de patrones
El insertador de bloques muestra ahora patrones de bloques destacados recuperados dinámicamente del directorio de patrones, proporcionando a los usuarios una forma rápida y fácil de encontrar patrones populares para utilizar en sus contenidos.
Del mismo modo, a medida que los patrones llegan directamente al panel de control de WordPress, los desarrolladores de WordPress deberían animarse a crear y publicar más y más patrones con el tiempo, lo que dará lugar a capacidades de diseño cada vez más avanzadas para los usuarios.
Un nuevo explorador de patrones a pantalla completa
Como el número de patrones de bloques disponibles en el Directorio de Patrones sigue creciendo y más temas los utilizan, WordPress 5.9 introduce una nueva interfaz de navegación de patrones de bloques: el Explorador de Patrones.
Un nuevo botón de Exploración abre ahora un modal a pantalla completa que permite a los usuarios explorar, buscar e insertar patrones de bloques con sólo unos clics. El resultado es una experiencia de usuario mejorada.
También encontrarás notas adicionales y varios ejemplos de patrones de bloques en nuestra inmersión profunda en el tema Twenty Twenty-Two de WordPress.
Si te interesa y quieres saber más, escucha los episodios 16 y 21 del podcast de Josepha Haden Chomphosy, y mira el vídeo de YouTube Explorando WordPress 5.9 de Anne McCarthy.
El tema Twenty Twenty-Two y los temas en bloque de WordPress
Con WordPress 5.9, ya no necesitarás instalar el plugin Gutenberg para habilitar el Full Site Editing en tu sitio web de WordPress. Sólo tendrás que permitir un tema en bloque para aprovechar todas las funciones de FSE.
Además, WordPress 5.9 incluye un nuevo tema por defecto, Twenty Twenty-Two, que cambia las reglas del juego, ya que Twenty Twenty-Two es el primer tema por defecto en bloque de la historia.
Twenty Twenty-Two es un tema muy flexible y personalizable. Proporciona una caja de arena perfecta para probar el nuevo flujo de edición de plantillas, los nuevos bloques, las mejoras de la interfaz y todas las funciones de edición del sitio añadidas al núcleo, a partir de WordPress 5.9.
Como se ha mencionado anteriormente, todo lo que tienes que hacer es instalar y activar un tema en bloque, como Twenty Twenty-Two. Una vez que el tema esté activo, aparecerá un nuevo elemento de menú Editor (beta) en el menú de administración del panel de WordPress.
La interfaz del Editor del Sitio cuenta ahora con un flujo de edición del sitio renovado. Desde la interfaz de edición, podrás editar visualmente la página de inicio del sitio, las plantillas y las partes de la plantilla, así como acceder a la interfaz de Estilos Globales.
Cuando actives un tema en bloque, no encontrarás el Personalizador. Esto se debe a que el Personalizador no es compatible con los temas en bloque, que sólo utilizan el Editor del Sitio. Esa es también la razón por la que no puedes previsualizar los temas de bloque inactivos.
Así pues, a partir de WordPress 5.9, el punto de acceso al Personalizador ya no está disponible en el menú de administración cuando un tema de bloque está activo (a menos que utilices un plugin que haga uso de él).
Si todavía estás atado a los temas tradicionales y te preocupa la retrocompatibilidad, estate tranquilo: puedes seguir utilizando tu tema.
Actualmente tienes cuatro categorías diferentes de temas para elegir:
- Temas de bloques: Temas diseñados para FSE
- Temas universales: Temas que funcionan tanto con el Personalizador como con el Editor del Sitio
- Temas híbridos: Temas clásicos que admiten funciones de FSE como theme.json
- Temas clásicos: Temas con plantillas PHP, functions.php, etc.
Debido al impacto que probablemente tendrán los temas en bloque en el ecosistema de WordPress, tenemos un artículo completo que trata sobre Twenty Twenty-Two y los temas en bloque de WordPress. Asegúrate de consultarlo para obtener una visión más profunda.
Mejoras en el rendimiento
Aquí en Kinsta, estamos obsesionados con la velocidad del sitio web. Por eso estamos entusiasmados con las mejoras de rendimiento que llegarán con WordPress 5.9.
Estas mejoras afectarán a varias áreas del CMS, desde el editor de bloques hasta los temas de bloques, la carga lenta y mucho más. Vamos a sumergirnos en ello.
Mejoras en el editor de bloques
Desde la versión 5.9 de WordPress, los tipos de bloques, los patrones y las categorías se cargan de forma perezosa en el editor de bloques. El navegador carga primero el contenido de mayor prioridad, lo que proporciona al usuario una experiencia de edición más fluida y un mayor rendimiento.
Otras mejoras de rendimiento notables en el contexto del editor de bloques afectan a los bloques reutilizables y a la vista de lista.
Menos CSS cargado
En cuanto al frontend, WordPress 5.9 ha reducido drásticamente la cantidad de CSS cargado por los temas de bloques, lo que hace que las páginas se carguen significativamente más rápido.
La principal mejora que cabe destacar en este contexto es la introducción del mecanismo de configuración y estilos theme.json, que evita que los temas utilicen hojas de estilo masivas, incluyendo cientos de declaraciones CSS. La cantidad de código CSS que utiliza un tema se ha reducido ahora a unas pocas propiedades CSS personalizadas que cualquier tipo de bloque puede reutilizar.
Mejoras en el rendimiento del lazy loading
La carga lenta de imágenes se introdujo por primera vez en WordPress 5.5. A partir de WordPress 5.7, la funcionalidad del lazy loading se extendió a los iframes, permitiendo a los propietarios de sitios web construirlos más rápidamente y mejorar su SEO.
De todos modos, tras un análisis del Largest Contentful Paint (LCP), resultó que asignar el atributo loading="lazy" a todas las imágenes e iframes de la página provoca una ligera degradación del rendimiento.
Omitir simplemente el atributo loading="lazy" no era una solución porque al hacerlo se perderían las claras ventajas del lazy loading.
La solución óptima sería omitir el atributo loading="lazy" sólo en las imágenes que aparecen por encima del pliegue. Sin embargo, como el atributo loading="lazy" se asigna en el lado del servidor, WordPress no puede determinar qué imágenes se muestran por encima del pliegue exactamente. Es algo que depende sobre todo del tema activo.
Ahora, como solución de compromiso, a partir de WordPress 5.9, el atributo loading="lazy" no se aplica a la primera imagen de contenido o iframe. Un análisis realizado en 50 temas populares de WordPress descubrió que esta solución conlleva una mejora considerable del rendimiento y que las páginas se cargan hasta un 30% más rápido.
Felix Arntz explica cómo funciona:
… para mejorar el rendimiento de forma inmediata, sin necesidad de que el desarrollador personalice el comportamiento, ahora WordPress omitirá que la primera «imagen de contenido o iframe» de la página se cargue de forma perezosa. El término «imagen de contenido o iframe» denota aquí cualquier imagen o iframe que se encuentre dentro del contenido de cualquier entrada en el bucle de consulta principal actual, así como cualquier imagen destacada de dicha entrada. Esto se aplica tanto al contenido «singular» como al de «archivo»: En un contexto «singular» la primera imagen o iframe del (único) post no se carga de forma perezosa, mientras que en un contexto «de archivo» la primera imagen o iframe del primer post de la consulta no se carga de forma perezosa.
Los desarrolladores de temas pueden ahora utilizar el nuevo filtro wp_omit_loading_attr_threshold para cambiar el número de imágenes/iframes que se saltan el lazy loading.
Múltiples hojas de estilo por bloque
Los desarrolladores de bloques y temas pueden registrar múltiples hojas de estilo en cada bloque y cargar estilos de otros bloques cuando sea necesario. Esto permite cargar hojas de estilo en función del contenido de la página, evitando que los temas carguen enormes hojas de estilo en cada página.
Según Ari Stathopoulos
Los bloques podrán ahora registrar múltiples hojas de estilo y cargar estilos de otros bloques cuando sea necesario. Los temas podrán añadir estilos por bloque en lugar de cargar hojas de estilo monolíticas que se cargan a la fuerza en cualquier lugar. Esto tiene un mayor impacto en los temas por bloques, donde la carga de las hojas de estilo se optimiza en función del contenido de la página y del diseño, pero también puede ser utilizado por los temas clásicos.
Características adicionales para desarrolladores
Además de las numerosas características y mejoras de la interfaz de usuario comentadas hasta ahora, WordPress 5.9 también introduce varias funciones para los desarrolladores.
Un nuevo atributo para bloquear bloques
Los desarrolladores de bloques ahora pueden impedir que los usuarios muevan o eliminen bloques individuales añadiendo un atributo lock en la configuración de los bloques:
{
...
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true
}
}
}
}Con esta función activada, los usuarios pueden editar el contenido del bloque, pero no pueden moverlo en la página ni eliminarlo del lienzo del editor. La siguiente imagen muestra un bloque personalizado con un conjunto estándar de controles de la barra de herramientas:
Al definir el atributo lock, como se ve en el código anterior, se ocultan los desplazamientos del bloque y los controles Mover a y Eliminar de la barra de herramientas del bloque. La imagen siguiente muestra el resultado final en la pantalla:
También puedes bloquear un bloque específico en un patrón de bloques. Para ver un ejemplo, consulta también Bloques de bloqueo en WordPress 5.9.
Nueva API para acceder a la configuración global y a los estilos
WordPress 5.9 introduce una nueva API pública de PHP para leer datos de theme .json.
Lectura de ajustes y estilos desde theme.json
Hay dos nuevas funciones para leer datos de las secciones settings y styles declaradas en el theme. json:
wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );$pathes una matriz que enumera la ruta de acceso al ajuste especificado$contextes una matriz que establece el contexto para esos datos. Los desarrolladores pueden leer desde una sección específica de ajustes del bloque – por ejemplo,array( 'block_name' => 'core/paragraph' ). La claveoryginestablecida enbasepermite ignorar los datos personalizados guardados por el usuario.
El siguiente código de ejemplo devolvería el valor de ajuste de contentSize. En Veintidós, sería 650px:
wp_get_global_settings( array( 'layout', 'contentSize' ) );Estableciendo un contexto, puedes recuperar estilos para bloques específicos. El siguiente código muestra cómo recuperar el valor del radio del borde para el bloque core/button:
function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button' )
);
}La función anterior devuelve el valor de la propiedad requerida teniendo en cuenta la configuración por defecto, la configuración del tema y los datos del usuario. El valor personalizado se proporcionará si el usuario configura el radio del borde del botón en la interfaz de Estilos Globales.
Para ignorar los datos del usuario, utilizarías el siguiente código:
function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button', 'origin' => 'base' )
);
}Obtener la hoja de estilos generada
WordPress 5.9 también introduce una nueva función para obtener la hoja de estilos resultante de los estilos por defecto, del tema y de los estilos personalizados:
wp_get_global_stylesheet( $types = array() );$types es una lista de los estilos a generar.
Puedes leer más sobre la nueva API en Nueva API para acceder a la configuración global y a los estilos.
Más características para desarrolladores
Entre los cambios adicionales de WordPress 5.9 para desarrolladores que quizá quieras conocer están
- Temas en bloque, una nueva forma de crear temas en WordPress 5.9
- Actualizaciones para los ajustes, estilos y theme.json
- Cambios y filtros centrados en los temas en WordPress 5.9
- Nuevas consultas de capacidad en WordPress 5.9
- Varios cambios en el núcleo de WordPress 5.9
- Cambios varios en el editor de bloques en WordPress 5.9
- Más control sobre las áreas internas de los bloques (como desarrollador de bloques)
Resumen
Terminaremos este artículo con una nota rápida sobre la cuota de mercado de WordPress. Actualmente, WordPress impulsa más del 65% de todos los sitios web cuyo sistema de gestión de contenidos se conoce y se sitúa al norte del 43% de todos los sitios web.
Estas cifras son impresionantes, sobre todo si se comparan con las de los competidores más cercanos, con menos del 5% de cuota de mercado, como Shopify.
Y esto también significa que no puedes pasar por alto la evolución del CMS WP. Cada nueva versión de WordPress aporta nuevas características, mejoras en la interfaz y en el rendimiento, y WordPress 5.9 no es una excepción. Todo lo que necesitas para probar las nuevas características es un tema en bloque, como el nuevo tema por defecto Twenty Twenty-Two, y estarás listo para empezar.
¡Ahora te toca a ti! ¿Estás preparado para cambiar a los temas de bloques y a FSE? ¿Y cuáles son tus cambios favoritos de WordPress 5.9?
Deja una respuesta