Novedades de WordPress 5.9: edición completa del sitio, estilos globales, bloques, patrones, API, mejoras en la interfaz de usuario y mucho más
El lanzamiento de WordPress 5.9 estaba inicialmente programado para el 14 de diciembre de 2021. Debido a varios problemas abiertos, el lanzamiento final se retrasó y ahora está programado para el 25 de enero de 2022.
Si se pregunta qué hay de nuevo en WordPress 5.9, la respuesta corta es Edición completa del sitio (FSE).
Y, de hecho, muchas funciones de 5.9 solo están disponibles si está utilizando un tema compatible con la edición completa del sitio, como el nuevo tema predeterminado, 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 la edición de sitios completos, patrones de bloques, directorio de bloques y temas basados en bloques.
Con 5.9, que sale el mes que viene, estamos —diría yo— 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 del próximo lanzamiento de WordPress.
Dicho esto, ¿qué puede esperar ver con el primer lanzamiento de WordPress de 2022?
¡Vamos a averiguar!
Estilos globales: una interfaz gráfica para tema.json
Con el lanzamiento de WordPress 5.8 en 2021, manipular el archivo theme.json se convirtió en la forma estándar para que los desarrolladores de temas personalicen la configuración y los estilos del editor.
WordPress 5.9 lleva las cosas al siguiente nivel al presentar una interfaz gráfica que permite a los usuarios personalizar los ajustes preestablecidos de estilo para sus sitios web, ya sea globalmente 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á acostumbrado a personalizar la apariencia de sus sitios web, ya que los estilos globales afectan varios aspectos del diseño del sitio de WordPress.
En primer lugar, la interfaz de Estilos globales reemplaza al Personalizador y ahora es la única forma de personalizar configuraciones y estilos con temas de bloques. Del mismo modo, las páginas de administración de opciones de temas complejos ya no serán necesarias. Esto proporciona una nueva forma estándar de configurar ajustes y estilos de temas y, al mismo tiempo, debería optimizar el flujo de trabajo de desarrollo de temas.
Con Global Styles, los usuarios de WordPress obtienen más control sobre la presentación de sus sitios web, tanto globalmente como por tipo de bloque, más allá del contexto de páginas o publicaciones individuales.
Ahora está disponible una nueva barra lateral en el editor del sitio, en la parte superior encontrará un pequeño panel de vista previa y cuatro componentes en el siguiente orden:
Podemos esperar que se agreguen nuevos componentes con el tiempo.
Echemos un vistazo más de cerca a la nueva interfaz.
Vista previa del estilo
El primer elemento de la barra lateral Estilos globales es un panel de vista previa. Este panel le permite verificar el resultado de sus personalizaciones y es particularmente útil cuando sus cambios se aplican a elementos que no están visibles en el lienzo del editor del sitio.
La siguiente imagen muestra tres combinaciones de estilos diferentes comparadas:
Tipografía
El panel Tipografía es donde controlas la tipografía de tu sitio web. Por supuesto, los controles disponibles en este panel dependen de su tema.json ajustes.
Por ejemplo, el tema Twenty Twenty-One Blocks (TT1 Blocks) declara las siguientes propiedades tipográficas:
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [],
"fontFamilies": []
}
}La siguiente imagen muestra la configuración de Tipografía resultante en la barra lateral de Estilos globales:
Profundicemos un poco más y veamos cómo declara el tema Bloques TT1 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"
}
]Puede comprobar estas familias de fuentes en el panel de vista previa de estilos globales:
Colores
En la sección Colores, puede ver y editar paletas de colores y personalizar el color de varios elementos del sitio.
Al hacer clic en esos elementos, obtiene acceso a un nuevo panel en el que puede elegir colores de tres paletas de colores: núcleo, tema y paleta personalizada (lea más en Colores predeterminados, Colores del tema y Colores personalizados).
En este panel, podrá establecer y modificar el color del elemento actual.
Disposición
El último grupo de herramientas está destinado a las personalizaciones de 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).
Tenga en cuenta que los estilos de bloque se pueden personalizar desde la interfaz de estilos globales solo si el bloque declara soporte para una funcionalidad específica en el correspondiente bloque.json Archivo. por ejemplo, el core/post-title block actualmente admite 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
}
}
},Desde el core/post-title admite colores, espaciado y tipografía, encontrará las entradas correspondientes en la configuración de Estilos globales del bloque Título de publicación.
La siguiente imagen muestra la configuración de tipografía, que puede comparar fácilmente con el código anterior:
Vale la pena señalar que WordPress 5.9 solo ofrece la primera implementación de la interfaz Global Styles. Como señala Matias Ventura, podemos esperar razonablemente un mayor desarrollo de la nueva función de control de estilo:
En el futuro, habrá flujos integrados en el sistema que le permitirán pasar de estilos locales a globales, como personalizar un bloque de botones y optar por aplicar cambios globales en todos los botones de ese tipo.
Por lo tanto, es posible que veamos mejoras importantes pronto. La siguiente imagen es solo un ejemplo de lo que podríamos esperar:
Las mejoras adicionales podrían incluir la capacidad de los temas para proporcionar paletas de colores alternativas y múltiples variaciones de estilo global.
La semana pasada construí un puñado de variaciones de fuente y color de Twenty Twenty-Two en temas infantiles súper simples. Son realmente livianos y me encanta la idea de ofrecer a las personas un sitio drásticamente diferente con un solo clic. https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A
– kjellr (@kjellr) 15 de noviembre de 2021
Los desarrolladores pueden profundizar en el mecanismo de estilo global en el artículo de soporte Configuración y estilos globales (theme.json). Encontrará ejemplos adicionales en nuestra introducción al tema predeterminado Twenty Twenty-Two.
El bloque de navegación
El bloque de navegación ha sido denominado «uno de los bloques temáticos más impactantes» y no tenemos miedo de decir que estamos de acuerdo.
El bloque ha estado en la fase embrionaria durante un tiempo (consulte también Problema de seguimiento del bloque de navegación y Problema de seguimiento i2). Aún así, ahora que todos los problemas pendientes y los bloqueadores enumerados como elementos imprescindibles de WordPress 5.9 se han solucionado, finalmente podemos comenzar a usar una de las funciones más poderosas fusionadas en el núcleo con WordPress 5.9.
Una descripción general rápida de la interfaz del bloque de navegación
Usar el nuevo bloque puede ser un poco confuso al principio, pero una vez que lo domines, apreciarás todo su potencial.
Cuando agrega por primera vez un bloque de navegación, el marcador de posición del bloque proporciona tres opciones para seleccionar un menú basado en bloques existente, crear un menú con todas las páginas o comenzar de nuevo con un menú vacío.
El nuevo menú de navegación también le permite importar menús creados a través de la pantalla de menús de apariencia que está disponible con temas clásicos.
Esto significa que si está pasando de un tema clásico a un tema de bloque, no tendrá que reconstruir sus menús existentes. Solo necesita elegir uno de sus «Menús clásicos» disponibles actualmente, y se convertirá automáticamente en un menú de navegación basado en bloques.
Puede agregar el bloque de navegación en cualquier lugar de sus páginas. Por ejemplo, puede que le resulte útil en artículos de formato largo para crear una tabla de contenido, lo que permite a los usuarios saltar a secciones de contenido específicas.
Los nuevos enlaces de navegación se agregan instantáneamente al bloque de navegación haciendo clic en el signo más (+) en el lado derecho (consulte también las notas de la versión de Gutenberg 11.7), a menos que ya se hayan agregado otros tipos de bloques al menú.
Al hacer clic en el Editar en la barra de herramientas del bloque Vínculo de navegación convierte un elemento de menú en un vínculo personalizado. Esto le permite agregar, editar, reordenar y eliminar elementos individualmente.
También puede transformar enlaces en bloques haciendo clic en el Transformar en la barra de herramientas del bloque. Esto le permite agregar bloques específicos directamente al menú de navegación.
El enlace personalizado, el espaciador, el logotipo del sitio, el enlace de inicio, los íconos sociales y los bloques de búsqueda ahora están expuestos a los usuarios cuando agregan bloques a los menús de navegación.
En la barra lateral de Configuración, encontrará un conjunto completo de opciones para controlar varios aspectos de sus menús de navegación.
El panel Diseño incluye controles para justificación, orientación y ajuste.
El bloque de navegación también presenta un panel de configuración de pantalla mejorado con una opción para un menú de hamburguesas siempre activo.
También puede personalizar el texto y los colores de fondo de sus menús y submenús.
Otra adición útil agregada recientemente al bloque de navegación es la compatibilidad con Block Gap, que agrega la capacidad para que los usuarios controlen la distancia entre los elementos del menú.
El panel Tipografía proporciona un conjunto de controles para la familia de fuentes, apariencia, altura de línea, decoración y mayúsculas y minúsculas. Todos estos controles se pueden activar o desactivar desde un menú desplegable que aparece al hacer clic en el icono de puntos suspensivos a la derecha.
El bloque de navegación: debajo del capó
Los datos del bloque de navegación se almacenan en la base de datos mediante un wp_navigation tipo de publicación dedicada.
¿Por qué es esto interesante para los usuarios de WordPress y cómo funciona?
Supongamos que ha creado un menú de navegación que consta de dos enlaces personalizados y un cuadro de búsqueda. Con el tema Twenty Twenty-Two instalado, el menú podría verse como se muestra en la siguiente imagen:
El bloque de navegación anterior se almacena en la base de datos como wp_navigation tipo de publicación de la siguiente manera:
<!-- 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 usar los mismos menús de navegación en diferentes temas de bloques. Si el menú no está visible de inmediato, simplemente elija el menú de navegación deseado en el selector de menú (vea también el número 36087 y el PR n.º 36178).
La siguiente imagen muestra el menú anterior con el tema Twenty Twenty-One Blocks:
El bloque de navegación ha pasado por varias iteraciones. Puede profundizar en cada implementación en las notas de la versión de Gutenberg 11.7, 11.8 y 11.9.
También puede leer más sobre el bloque de navegación en la nueva nota para desarrolladores del bloque de navegación y el artículo de soporte del bloque de navegación.
Galerías de imágenes, imágenes destacadas e íconos del sitio
Con el objetivo de hacer que las imágenes se comporten de manera más consistente en diferentes contextos, WordPress 5.9 ofrece nuevas funciones y mejoras en varios bloques. El bloque de la galería se revisó por completo, mientras que varios cambios en los bloques Imagen destacada e Icono del sitio brindan a los usuarios un control más granular sobre las imágenes respectivas.
Un bloque de galería refactorizado
En WordPress 5.8, la capacidad de personalizar la apariencia de las imágenes en las galerías era algo limitada. No había forma de cambiar el estilo de imagen o aplicar un filtro de duotono.
Además, faltaban funciones importantes en las imágenes de la galería, como agregar enlaces personalizados a imágenes individuales en una galería.
Para comprender mejor el motivo 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 Código en WordPress 5.8:
Tenga en cuenta que los detalles de la imagen solo se almacenan en el delimitador de bloque de la Galería (consulte también ¿Qué es un bloque de Gutenberg?).
Esto hizo que las imágenes individuales se comportaran de manera diferente a las imágenes en las galerías.
Para hacer que las imágenes se comporten de manera consistente en los dos contextos diferentes, WordPress 5.9 presenta un bloque de Galería completamente refactorizado, que ahora se comporta como un contenedor para una colección de elementos de figura en lugar de una lista desordenada de imágenes.
En WordPress 5.9, las imágenes de la galería se anidan usando el núcleo innerBlocks API, y cada imagen almacena su propio conjunto de detalles, exactamente como las imágenes individuales.
Esa es una gran mejora, ya que Las imágenes de bloque de galería ahora admiten las mismas funcionalidades disponibles en los bloques de imágenes principales., como las dimensiones de la imagen y los filtros de duotono, así como las funciones de bloque estándar, como las funcionalidades de arrastrar y soltar, copiar, duplicar y eliminar.
Con el nuevo bloque Galería, podrá diseñar imágenes individualmente. Esto otorga una amplia gama de oportunidades de personalización.
La siguiente imagen muestra varias imágenes en una galería, cada una con esquinas redondeadas diferentes:
También puede usar diferentes filtros de duotono en diferentes imágenes en la misma galería.
Y, por supuesto, puede asignar una clase CSS específica a cada imagen, lo que le brinda superpoderes adicionales para agregar cualquier personalización que necesite a las imágenes de su galería.
Para obtener una vista más detallada del nuevo bloque de la galería, consulte también la nota de desarrollo de refactorización del bloque de la galería, las próximas mejoras del bloque de la galería y las notas de la versión de Gutenberg 11.4.
Mejoras de imagen destacadas
También se han introducido varias mejoras en el bloque Imagen destacada.
Controles básicos de dimensiones
El bloque Imagen destacada ahora presenta un nuevo panel de configuración de Dimensiones que proporciona controles de altura, ancho y escala.
El control de dimensiones también se aplica a las imágenes destacadas en los bloques Query Loop, como se muestra en la siguiente imagen:
Filtros de duotono en imágenes destacadas
Mencionamos anteriormente que ahora podemos aplicar el filtro de duotono en imágenes envueltas en el nuevo bloque Galería refactorizado.
Ahora, a partir de WordPress 5.9, los filtros de duotono también están disponibles en los bloques de imagen destacada en cualquier contexto, desde plantillas de publicación y página hasta bloques de bucle de consulta.
Esta característica abre la puerta a combinaciones de colores creativas y uniformes en todo el sitio.
Recorte de imagen en el logotipo del sitio
Antes de WordPress 5.9 (y Gutenberg 11.6), las imágenes de los logotipos solo se podían editar antes de cargarlas. Con WordPress 5.9, puede recortar, hacer zoom y rotar las imágenes utilizadas en el bloque del 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 funciones, mejoras y correcciones de errores que no sería posible cubrirlas todas en un solo artículo.
Así que elegimos algunos de los que encontramos más dignos de atención. Para obtener una descripción más detallada de esas características y mejoras, también puede consultar las publicaciones de lanzamiento 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:
Interfaz de usuario compatible con bordes
A partir de WordPress 5.9, cuando el tema.json declara border configuración y un bloque declara el soporte de borde a través de la API de soporte de bloque, un nuevo panel de configuración proporcionará controles para el radio, el ancho, el estilo, el color y las unidades del borde (ver también Gutenberg 11.1).
El bloque de grupo principal es un buen ejemplo de esta útil mejora de la interfaz de usuario. El bloque.json El archivo del bloque Group ahora incluye lo siguiente supports declaraciones:
{
...
"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 mínimo esfuerzo. Puedes verlo en acción con el nuevo tema Twenty Twenty-Two.
En una nueva publicación o página, crea un nuevo bloque de grupo y selecciónalo. Verás un Frontera panel en la barra lateral de configuración del bloque. Cambie el ancho y el estilo del borde según sea necesario y disfrute del resultado.
Si es un desarrollador de temas y desea agregar esta función a sus temas, abra su tema.json archivo y declare el soporte de borde como se muestra en el siguiente código:
{
"version": 1,
"settings": {
"border": {
"customColor": true,
"customRadius": true,
"customStyle": true,
"customWidth": true
}
}
}Guarde el archivo y vuelva a su panel de WordPress. En una nueva publicación o página, crea un nuevo bloque de grupo y selecciónalo. Ahora debería ver un panel Borde en la barra lateral de configuración del bloque (ver también este theme.json experimental).
Mejoras en la vista de lista
Con WordPress 5.9, la vista de lista se ha mejorado y ahora cuenta con arrastrar y soltar, secciones plegables y anclajes HTML.
Arrastrar y soltar en la vista de lista
Como se mencionó en la solicitud de extracción n.º 33320, se implementó la función de arrastrar y soltar en la vista de lista, pero se deshabilitó debido a problemas de rendimiento.
A partir de WordPress 5.9, se ha vuelto a implementar la función de arrastrar y soltar en la vista de lista. Puede 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 le permite mover bloques y grupos de bloques rápida y fácilmente en sus 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 plegables de vista de lista
Otra mejora significativa de la vista de lista es la capacidad de expandir/contraer secciones de bloques anidados. Esto le permite navegar fácilmente por estructuras de bloques complejas, expandiendo grupos individuales de bloques y dejando el resto colapsado.
También puede expandir y colapsar las secciones de Vista de lista usando las flechas izquierda y derecha.
Anclajes HTML en elementos de vista de lista
Otra mejora útil es la capacidad de agregar anclajes HTML a sus bloques en la vista de lista y verlos de un vistazo.
Control de espacio entre bloques
Presentado por primera vez en Gutenberg 11.4 y ahora fusionado con el núcleo con WordPress 5.9, el nuevo control de espaciado de bloques le permite establecer una distancia personalizada entre los elementos dentro de un bloque. A continuación, puede ver una vista previa con diferentes valores de espaciado de bloque en un bloque Columnas con el tema predeterminado Veinte Veintidós:
Gap Spacing estará inicialmente disponible para bloques específicos, incluidos botones, imágenes, columnas, títulos y navegación, pero la compatibilidad debería extenderse a más bloques en el futuro.
Los temas deben habilitar Gap Spacing en tema.json usando el nuevo aparienciaHerramientas propiedad. Puede leer más sobre las herramientas de apariencia en nuestra inmersión profunda en Twenty Twenty-Two. Consulte también las solicitudes de extracción n.º 33991 y n.º 34630.
Vista previa de URL enriquecida para control de enlaces
Al aprovechar el nuevo punto final de detalles de URL de REST, el control de enlace ahora proporciona una vista previa de URL enriquecida que muestra los detalles de un recurso de destino de enlace.
En su primera implementación, esta función solo estaba disponible en el componente de texto enriquecido del editor de publicaciones. Al momento de escribir este artículo, también está disponible en el Editor del sitio, pero no en los editores de Navegación y Widget.
Crear páginas a partir de enlaces emergentes
WordPress 5.9 también cuenta con una interfaz de usuario de enlace en línea mejorada, que muestra un botón completamente nuevo para crear nuevas páginas directamente desde la ventana emergente del enlace en línea. Esta función solo está disponible en el Editor de publicaciones.
Mejoras al 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 puede personalizar el color de fondo y del texto, y el color y el radio del borde.
Nuevos controles para dimensiones de bloque
Un nuevo panel de configuración de Dimensiones ahora está disponible para que los usuarios controlen el espacio ocupado por un bloque en la página. El panel deberían incluir controles de altura, ancho, relleno, margen y posiblemente alineación, pero no todos los atributos estarán disponibles para cada bloque.
Los desarrolladores de bloques encontrarán el <DimensionControl /> componente documentado en GitHub, pero tenga en cuenta que todavía está marcado como una característica experimental y podría estar sujeto a cambios importantes en el momento de escribir este artículo.
Un nuevo bloque de grupo de widgets agregado a la pantalla de widgets
Un nuevo bloque de Widget Group ahora está disponible en el editor de widgets basado en bloques. El último bloque le permite agregar un grupo de bloques en un widget con un título en el Editor de Widgets y el Personalizador de los temas clásicos.
Puede leer más sobre el editor de widgets en Editor de widgets basados en bloques y Widgets de bloques en el Personalizador.
Diseño flexible y el nuevo bloque de filas
Presentado originalmente como una característica experimental con Gutenberg 11.2, el diseño flexible se ha extendido a varios bloques, incluidos los bloques de enlaces sociales y grupos.
Algunos bloques, como el bloque Social Links, ahora brindan un conjunto de controles de la barra de herramientas y configuraciones de la barra lateral que le permiten personalizar el diseño flexible.
Esta misma funcionalidad está disponible en el bloque de navegación y el bloque de fila, una nueva variación del bloque de grupo introducido con Gutenberg 11.5.
La siguiente imagen muestra el bloque Fila con controles de diseño en la barra lateral de configuración:
Abajo, puedes ver el mismo bloque Row en la interfaz y en la herramienta de inspección de Chrome.
Mejoras en el patrón de bloques
Presentados por primera vez con WordPress 5.5, los patrones de bloques permiten a los usuarios de WordPress incluir estructuras complejas listas para usar de bloques anidados en su contenido con solo unos pocos clics.
Ahora, WordPress 5.9 avanza un paso 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 con los patrones de bloque en WordPress 5.9?
Patrones destacados del directorio de patrones
Block Inserter ahora muestra 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 usar en su contenido.
Del mismo modo, a medida que los patrones ingresan directamente en el tablero de WordPress, se debe alentar a los desarrolladores de WordPress a crear y publicar más y más patrones con el tiempo, lo que resulta en capacidades de diseño cada vez más avanzadas para los usuarios.
Un nuevo explorador de patrones a pantalla completa
A medida que la cantidad de patrones de bloques disponibles en el Directorio de patrones continúa creciendo y más temas los utilizan, WordPress 5.9 presenta una nueva interfaz de navegación de patrones de bloques: el Explorador de patrones.
un nuevo Explorar El botón ahora abre un modal de pantalla completa que permite a los usuarios navegar, buscar e insertar patrones de bloques con solo unos pocos clics. El resultado es una experiencia de usuario mejorada.
También encontrará notas adicionales y varios ejemplos de patrones de bloques en nuestra inmersión profunda en el tema de WordPress Twenty Twenty-Two.
Si está interesado y desea obtener más información, escuche los episodios 16 y 21 del podcast de Josepha Haden Chomphosy y mire el video de YouTube Exploring WordPress 5.9 de Anne McCarthy.
El tema Twenty Twenty-Two y los temas de bloques de WordPress
Con WordPress 5.9, ya no necesitará instalar el complemento de Gutenberg para habilitar la edición completa del sitio en su sitio web de WordPress. Solo deberá permitir que un tema de bloque aproveche todas las funciones de FSE.
Además, WordPress 5.9 se ha incluido con un nuevo tema predeterminado, Twenty Twenty-Two, y cambia las reglas del juego, ya que Twenty Twenty-Two es el primer tema de bloque predeterminado 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, nuevos bloques, mejoras en la interfaz y todas las funciones de edición del sitio agregadas al núcleo, comenzando con WordPress 5.9.
Como se mencionó anteriormente, todo lo que necesita hacer es instalar y activar un tema de bloque, como Twenty Twenty-Two. Una vez que el tema está activo, un nuevo Redactor (beta) El elemento del menú aparecerá en el menú de administración del tablero de WordPress.
La interfaz del editor de sitios ahora presenta un flujo de edición de sitios renovado. Desde la interfaz de edición, podrá editar visualmente la página de inicio, las plantillas y las partes de la plantilla del sitio, así como acceder a la interfaz de estilos globales.
Cuando activa un tema de bloque, no encontrará el Personalizador. Esto se debe a que el Personalizador no admite temas de bloque, que solo usan el Editor del sitio. Esa es también la razón por la cual no puede obtener una vista previa de los temas de bloque inactivos.
Entonces, 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 esté usando un complemento que lo use).
Si todavía está atado a los temas tradicionales y le preocupa la compatibilidad con versiones anteriores, descanse tranquilo: puede continuar usando su tema.
Actualmente tiene cuatro categorías diferentes de temas para elegir:
- Bloquear temas: 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 compatibles con 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 de bloques en el ecosistema de WordPress, tenemos un artículo completo que cubre los temas de bloques de Twenty Twenty-Two y WordPress. Asegúrese de consultarlo para obtener una descripción más detallada.
Mejoras de rendimiento
Aquí en Kinsta, estamos obsesionados con la velocidad del sitio web. Es por eso que estamos entusiasmados con las mejoras de rendimiento que vienen con WordPress 5.9.
Estas mejoras afectarán varias áreas del CMS, desde el editor de bloques hasta los temas de bloques, la carga diferida y más. Sumerjámonos.
Mejoras en el insertador de bloques
Desde WordPress 5.9, los tipos de bloques, los patrones y las categorías se representan de forma perezosa en el Insertador de bloques. El navegador carga primero el contenido de mayor prioridad, lo que brinda al usuario una experiencia de edición más fluida y un rendimiento mejorado.
Otras mejoras de rendimiento notables en el contexto del editor de bloques afectan a los bloques reutilizables y la vista de lista.
Menos CSS cargado
En cuanto a la interfaz, WordPress 5.9 redujo drásticamente la cantidad de CSS cargado por temas de bloque, lo que llevó a que las páginas se cargaran significativamente más rápido.
La principal mejora a destacar en este contexto es la introducción de la tema.json mecanismo de configuración y estilos, que evita que los temas utilicen hojas de estilo masivas, incluidas cientos de declaraciones CSS. La cantidad de código CSS que usa un tema ahora se ha reducido a unas pocas propiedades personalizadas de CSS que cualquier tipo de bloque puede reutilizar.
Mejoras en el rendimiento de la carga diferida
La carga diferida de imágenes se introdujo por primera vez en WordPress 5.5. A partir de WordPress 5.7, la función de carga diferida se amplió a iframes, lo que permitió a los propietarios de sitios crear sitios web más rápidos y mejorar su SEO.
De todos modos, tras un análisis de la mayor pintura con contenido (LCP), resultó que la asignación de la loading="lazy" atributo a todas las imágenes e iframes en la página provoca una ligera degradación del rendimiento.
Simplemente omitiendo el loading="lazy" El atributo no era una solución porque hacerlo llevaría a perder las claras ventajas de la carga diferida.
La solución óptima sería omitir únicamente el loading="lazy" atributo en las imágenes que aparecen arriba del pliegue. Sin embargo, desde la loading="lazy" atributo se asigna en el lado del servidor, WordPress no puede determinar exactamente qué imágenes se muestran arriba de la tapa. Es algo que depende mayormente del tema activo.
Ahora, como solución de compensación, a partir de WordPress 5.9, el loading="lazy" El atributo no se aplica a la primera imagen de contenido o iframe. Un análisis realizado en 50 temas populares de WordPress encontró que esta solución genera mejoras considerables en el 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 desde el primer momento sin requerir que un desarrollador personalice el comportamiento, WordPress ahora omitirá la primera “imagen de contenido o iframe” en la página para que no se cargue de forma diferida. El término «imagen de contenido o iframe» aquí denota cualquier imagen o iframe que se encuentra dentro del contenido de cualquier publicación en el bucle de consulta principal actual, así como cualquier imagen destacada de dicha publicación. Esto se aplica tanto al contenido «singular» como al de «archivo»: en un contexto «singular», la primera imagen o iframe de la (única) publicación no se carga de forma diferida, mientras que en un contexto de «archivo», la primera imagen o iframe de la la primera publicación en la consulta no tiene carga diferida.
Los desarrolladores de temas ahora pueden usar el nuevo wp_omit_loading_attr_threshold filtro para cambiar la cantidad de imágenes/iframes que se omitirán de la carga diferida.
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 según el contenido de la página, evitando que los temas carguen hojas de estilo enormes en cada página.
Según Ari Stathopoulos:
Los bloques ahora podrán registrar múltiples hojas de estilo y cargar estilos de otros bloques cuando sea necesario. Los temas podrán agregar 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 de bloque donde se optimiza la carga de hojas de estilo. basado en el contenido de la página y el diseño, pero también puede ser utilizado por temas clásicos.
Funciones adicionales para desarrolladores
Además de las numerosas funciones y mejoras de la interfaz de usuario discutidas hasta ahora, WordPress 5.9 también presenta varias funciones para los desarrolladores.
Un nuevo atributo para bloquear bloques
Los desarrolladores de bloques ahora pueden evitar que los usuarios muevan o eliminen bloques individuales agregando un lock atributo en la configuración del bloque:
{
...
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true
}
}
}
}Con esta función habilitada, los usuarios pueden editar el contenido del bloque, pero no pueden mover el bloque 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:
Definición de la lock El atributo, como se ve en el código anterior, oculta los motores de bloque y el Mover a y Eliminar controles de la barra de herramientas del bloque. La siguiente imagen muestra el resultado final en la pantalla:
También puede bloquear un bloque específico en un patrón de bloques. Para ver un ejemplo, vea también Bloquear bloques en WordPress 5.9.
Nueva API para acceder a configuraciones y estilos globales
WordPress 5.9 presenta una nueva API pública de PHP para leer datos de tema.json.
Configuración de lectura y estilos de theme.json
Hay dos nuevas funciones para leer datos de settings y styles secciones declaradas en el tema.json:
wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );$pathes una matriz que enumera la ruta a la configuración especificada$contextes una matriz que establece el contexto para esos datos. Los desarrolladores pueden leer desde una sección de configuración de bloque específica, por ejemplo,array( 'block_name' => 'core/paragraph' ). Eloryginclave establecida enbasepermite ignorar los datos personalizados guardados por el usuario.
El siguiente código de ejemplo devolvería el contentSize fijando el valor. En Veinte Veintidós, sería 650px:
wp_get_global_settings( array( 'layout', 'contentSize' ) );Al establecer un contexto, puede recuperar estilos para bloques específicos. El siguiente código muestra cómo recuperar el valor del radio del borde para el core/button cuadra:
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 propiedad requerido al considerar la configuración predeterminada, 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, usaría 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 estilo generada
WordPress 5.9 también presenta una nueva función para obtener la hoja de estilo resultante de los estilos predeterminados, temáticos y personalizados:
wp_get_global_stylesheet( $types = array() );$types es una lista de los estilos a generar.
Puede leer más sobre la nueva API en Nueva API para acceder a configuraciones y estilos globales.
Más funciones para desarrolladores
Los cambios adicionales de WordPress 5.9 para desarrolladores que quizás desee conocer incluyen:
Resumen
Terminaremos este artículo con una nota rápida sobre la cuota de mercado de WordPress. WordPress actualmente impulsa más del 65% de todos los sitios web cuyo sistema de administración de contenido es conocido y se encuentra al norte de 43% de todos los sitios web.
Estos números son impresionantes, especialmente cuando se comparan con los competidores más cercanos con menos del 5 % de participación de mercado, como Shopify.
Y esto también significa que no puedes pasar por alto la evolución del WP CMS. Cada nueva versión de WordPress trae nuevas funciones, mejoras en la interfaz, mejoras en el rendimiento y WordPress 5.9 no es una excepción. Todo lo que necesita para probar las nuevas funciones es un tema de bloque, como el nuevo tema predeterminado Twenty Twenty-Two, y estará listo para comenzar.
¡A ti, ahora! ¿Estás listo para hacer el cambio para bloquear temas y FSE? ¿Y cuáles son tus cambios favoritos que vienen con WordPress 5.9?
Ahorre tiempo, costos y maximice el rendimiento del sitio con:
- Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
- Integración empresarial de Cloudflare.
- Alcance de audiencia global con 29 centros de datos en todo el mundo.
- Optimización con nuestro monitoreo de rendimiento de aplicaciones integrado.
Todo eso y mucho más, en un solo plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución de dinero de 30 días. Consulte nuestros planes o hable con ventas para encontrar el plan adecuado para usted.
