WordPress 5.8 «Tatum» ya está aquí y es un lanzamiento trascendental. Aparte del increíble número de características, mejoras y correcciones de errores, WP 5.8 introduce una nueva forma de construir sitios web al traer las primeras funciones que caen bajo el proyecto más amplio conocido como Edición Completa del Sitio (Full Site Editing – FSE).
Aparte de la edición completa del sitio, WordPress 5.8 trae consigo toneladas de cambios y mejoras en varias áreas del CMS.
Los usuarios de WordPress que no utilicen el plugin Gutenberg encontrarán características y mejoras procedentes de nueve versiones de Gutenberg en total (para profundizar en cada una de ellas, consulta Gutenberg 9.9, 10.0, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7).
Una novedad importante para los usuarios que se toman en serio el rendimiento de sus sitios es la compatibilidad con el formato WebP.
A los desarrolladores seguramente les encantará la eliminación de IE11 de la lista de navegadores compatibles, el nuevo mecanismo de configuración y estilo de bloques basado en theme.json, el sistema mejorado de registro de bloques basado en block.json y las numerosas mejoras de la API que llegarán con la segunda versión de WordPress de 2021.
Así pues, no te pierdas nuestro análisis, porque va a ser un extenso resumen de las características y mejoras que allanan el camino para las nuevas y potentes herramientas de creación de sitios que se espera que salgan a la luz en los próximos meses.
Características del Full Site Editing en WordPress 5.8
La visión detrás de Full Site Editing es proporcionar una colección de herramientas y características que permitan a los usuarios de WordPress construir un sitio web completo utilizando bloques. Con Full Site Editing, veremos muchos bloques disponibles para crear cualquier elemento de la página, desde menús de navegación hasta branding del sitio, widgets de la barra lateral, plantillas y mucho más.
Incluso si WordPress 5.8 introduce varias características que caen dentro del ámbito del Full Site Editing (FSE), no esperes ver un entorno visual de construcción de sitios con todas las funciones. FSE es todavía un trabajo en curso, y el lanzamiento de WordPress 5.8 abre una especie de fase beta pública. Según Josepha Haden Chomphosy:
Full Site Editing es una colección de proyectos y juntos representan un gran cambio, posiblemente demasiado para una sola versión. El contexto más importante que hay que compartir es que no es la experiencia completa por defecto para los usuarios. Uno de los comentarios más claros del proceso de fusión de la Fase Uno fue que no hubo tiempo suficiente para que nuestros extensores (agencias, autores de temas, desarrolladores de plugins, creadores de sitios, etc.) se prepararan para los próximos cambios.
Teniendo esto en cuenta, este proceso de fusión no será un interruptor de encendido/apagado. Ahora no se trata de una experiencia de usuario completa y llena de matices, sino más bien de una beta pública abierta dentro de WordPress 5.8.
Así que WordPress 5.8 no introduce una experiencia FSE perfecta y completa por ahora. En su lugar, veremos cómo se añaden y mejoran nuevas funciones con el tiempo, a partir de la versión 5.8. Por la misma razón, podemos suponer que WordPress 5.8 no tendrá un impacto dramático en la forma en que estamos acostumbrados a construir sitios web.
En el momento de escribir este artículo, los propietarios y administradores de sitios todavía tienen que optar conscientemente por FSE instalando un tema de bloques, como Twenty-Twenty One Blocks (la versión basada en bloques de Twenty-Twenty One), y activando el plugin Gutenberg.
La Edición del Sitio completa abarca una serie de subproyectos separados, incluyendo el Editor del Sitio, los Estilos Globales, el bloque de Consulta, el bloque de Navegación, las Plantillas, los bloques temáticos y mucho más. Pero lo más parecido a la edición de sitios en WordPress 5.8 es el modo de edición de plantillas y los correspondientes bloques temáticos disponibles para usar en ese modo, como veremos más adelante en este artículo.
A continuación, vamos a analizar algunas de las funciones de FSE que se han incorporado al núcleo con WordPress 5.8.
Modo de edición de plantillas
El modo de edición de plantillas proporciona una forma de crear plantillas de entradas/páginas utilizando bloques. Es una gran manera de reducir la complejidad de la creación de sitios, permitiendo a los usuarios aprovechar varias características de edición de sitios desde fuera de la interfaz del editor de sitios mientras se acostumbra a trabajar con bloques. Esto también es genial para los usuarios que no utilizan temas basados en bloques, pero que siguen buscando una forma fácil de crear y editar plantillas desde la interfaz de usuario del editor de bloques.
Personalizar los temas nunca había sido tan fácil en WordPress. Ahora ya no necesitas crear un tema hijo para crear tus plantillas personalizadas. Con WordPress 5.8, la edición de plantillas no se limita a los temas en bloque, sino que también está disponible para que la utilices con los temas clásicos, aunque tienes que optar por activarla para los temas clásicos.
Para crear una nueva plantilla, basta con activar el modo de edición de plantillas en la barra lateral de configuración. Ahora hay un nuevo panel de plantillas para que los usuarios cambien el modo de edición (véase la nota de la versión de Gutenberg 10.5).
En el panel de plantillas, puedes crear una nueva plantilla o editar una existente.
Para crear una nueva plantilla, haz clic en Nueva. A continuación, introduce un nombre de plantilla en el modal y haz clic en Crear, y ya está listo.
En el modo de edición de plantillas, puedes construir tus plantillas utilizando todos los bloques disponibles, incluyendo los bloques de FSE como el título del sitio, el lema del sitio, el inicio de sesión/salida y muchos más.
Una vez que estés satisfecho con tus ediciones, puedes volver al modo de edición de publicaciones y guardar la plantilla por separado del contenido de la publicación/página, como se muestra en la imagen siguiente:
Las plantillas se almacenan en la base de datos de WordPress como tipos de entradas personalizadas denominadas wp_template. Esto no solo te permite editar una plantilla desde la interfaz del editor, sino que también facilita su importación o exportación a voluntad. También puedes utilizar una plantilla en diferentes sitios web (en el momento de escribir este artículo, esta función solo está disponible si activas el plugin Gutenberg).
El modo de edición de plantillas sigue teniendo algunos fallos en el momento de escribir este artículo, como se informa en esta convocatoria de pruebas y en este experimento de Justin Tadlock.
Pero todo lo que se necesita es un poco de paciencia y esperar a que se solucionen los principales problemas para comprender plenamente cómo el modo de edición de plantillas cambiará la forma de personalizar el aspecto de tus sitios web.
Los usuarios ya no necesitarán conocimientos de desarrollo para tener un control total sobre el diseño y la apariencia general del sitio web.
El modo de edición de plantillas estaba disponible al principio tanto para los temas en bloque como para los temas clásicos. Después de un debate en el canal de líderes de la versión 5.8, se decidió que el editor de plantillas estuviera disponible para los temas clásicos y no para los temas en bloque (véase también el pull #32858).
Según Carolina Nymark:
Inicialmente, la edición de plantillas estaba habilitada para todos los temas. Los desarrolladores de temas expresaron su preocupación por no poder actualizar todos sus temas clásicos existentes para soportar esta nueva característica. Con un cambio tardío, el equipo de lanzamiento y el equipo de editores decidieron cambiar la edición de plantillas para que fuera opcional para los temas clásicos.
Para optar por los temas clásicos, ahora los desarrolladores deben añadir soporte para los temas:
add_theme_support( 'block-templates' );Los temas clásicos que utilizan theme.json pueden optar por eliminar el soporte de temas:
remove_theme_support( 'block-templates' );Para una visión más detallada de cómo funciona el modo de edición de plantillas en WordPress 5.8 y algunos ejemplos útiles de uso, asegúrate de ver este vídeo de Anne McCarty:
Bloques temáticos
Como se mencionó anteriormente, FSE no es una sola característica, sino un conjunto completo de características de construcción de sitios no solo relacionados con el editor del sitio. El modo de edición de plantillas es solo un ejemplo de ello. Pero junto con la edición de plantillas, WordPress 5.8 también trae muchos bloques temáticos que pueden mostrar información recuperada dinámicamente de la base de datos. Algunos de estos bloques también se pueden utilizar en contextos que no son de FSE (ver tema #28744).
Los Bloques Temáticos traen las características de las etiquetas de las plantillas a los temas clásicos, y puedes usarlos de la misma manera que los bloques normales. Por ejemplo, puedes añadir etiquetas de entrada o la imagen destacada de la entrada en cualquier parte del contenido de la entrada o de la plantilla. Para hacerte una idea del número de bloques temáticos añadidos al núcleo con WordPress 5.8, basta con escribir /post en el marcador de posición del bloque:
Un bloque temático útil disponible con WordPress 5.8 es el bloque Login/out, que proporciona enlaces de inicio y cierre de sesión. Puedes mostrar opcionalmente el formulario de inicio de sesión en lugar de un enlace. Los administradores del sitio también pueden personalizar el objetivo de la redirección (ver PR #29766).
Para ver más de cerca los bloques FSE, consulta el tema «Enabling Full Site Editor blocks in classic themes» en Github.
El bloque Query Loop
¿Cuántas veces te has encontrado en una situación en la que necesitas mostrar una lista personalizada de entradas del blog o tipos de entradas personalizadas? Piensa en productos, eventos, inmuebles… Por supuesto, tienes toneladas de plugins entre los cuales elegir, pero la capacidad de crear consultas altamente personalizadas a menudo requiere habilidades de desarrollador para lidiar con el loop de WordPress.
Con la introducción del bloque Query Loop en el núcleo de WordPress, los propietarios y administradores de sitios pueden crear listas de entradas y CPT sin tener que escribir código complejo o contratar a un desarrollador, al menos en los casos de uso más comunes.
Entonces, ¿qué hace el bloque Query Loop?
En resumen, hace el mismo trabajo que el bucle de WordPress, pero en el contexto visual del editor de bloques.
El bloque Query Loop realiza una consulta basada en la configuración del usuario sobre la base de datos de WordPress, realiza un bucle a través de cada entrada recuperada y muestra los datos en la página.
Después de un intenso desarrollo, este bloque ha alcanzado su estructura actual y ahora consta de dos bloques anidados: los bloques Query y Post Template.
Al ser una función avanzada, el bloque Query Loop requiere algunas configuraciones.
En primer lugar, puedes elegir entre los diferentes patrones de bloques que aparecen en la vista de carrusel y de cuadrícula. Una vez que hayas elegido tú patrón, simplemente haz clic en Elegir, y el bloque de bucle de consulta generará tu lista personalizada de entradas.
Si haces clic en Start blank, verás una lista de cuatro variaciones de bloques básicos: Título y fecha; Título y extracto; Título, fecha y extracto; e Imagen, fecha y título (ver Patrones de oferta en la configuración del bloque).
Una vez en su lugar, al seleccionar el bloque Qurey Loop se mostrará la barra lateral de configuración del bloque, donde puedes construir tu consulta. Puedes heredar la consulta de la URL o personalizar los argumentos de la consulta: el tipo de publicaciones que se incluirán en la lista, el orden de visualización y si se trata de publicaciones fijas o no.
También puedes añadir varios filtros, eligiendo entre categorías, autores y palabras clave.
Además, un botón de configuración de visualización en la barra de herramientas del bloque ofrece más ajustes para controlar el número de elementos por página, el desplazamiento y el número máximo de páginas a mostrar.
Sí, el bloque Query Loop es una poderosa herramienta, que permite a los propietarios de sitios crear listas altamente personalizadas de entradas y tipos de entradas personalizadas.
Pero si se recorren los parámetros de la clase WP_Query, está claro que el nivel de personalización posible utilizando el código es mucho más granular que lo que es posible utilizando el bloque Query Loop.
No obstante, es una herramienta valiosa y flexible que se presta a muchos casos de uso, y es muy probable que veamos nuevas mejoras en el futuro.
Vista de lista persistente en el editor de publicaciones
Otra característica de FSE extendida al Editor de Publicaciones es la Vista de Lista Persistente (Persistent List View). Antes de WordPress 5.8 (y Gutenberg 10.7), la vista de lista se mostraba en un popover. Al mover el foco fuera del popover, la lista desaparecía.
Por el contrario, el Editor de Sitios mostraba la Vista de Lista en una barra lateral que contenía todo el árbol de bloques.
Con WordPress 5.8, la vista de lista se muestra ahora en una barra lateral en el editor de entradas, lo que permite a los usuarios navegar por el árbol de bloques de forma más rápida y precisa.
Al hacer clic en un elemento de la Vista de Lista se resalta el elemento de la lista y se mueve el foco al bloque correspondiente en el lienzo del Editor de Publicaciones. Además, si pasas el ratón por encima de los elementos de la vista de lista, tanto el elemento como el bloque correspondiente en el editor de publicaciones quedan resaltados.
Por último, al añadir un ancla a un bloque también aparecerá junto al elemento correspondiente en la vista de lista.
Con todas estas mejoras en la vista de lista, navegar por documentos complejos debería ser mucho más fácil.
Editor de widgets en bloque y widgets en bloque en el personalizador
El editor de widgets basado en bloques es un amplio proyecto que pretende llevar la interfaz del editor de bloques a los widgets de temática clásica.
El nuevo editor de widgets ofrece muchas ventajas a la gran mayoría que todavía utiliza temas clásicos. Al mismo tiempo, les permite familiarizarse con la interfaz de bloques antes de que se convierta en un estándar para todos los usuarios de WordPress.
Como señala Anne McCarty, los widgets basados en bloques ofrecen varias ventajas, entre ellas
- Ahora puedes crear diseños en barras laterales, cabeceras y pies de página utilizando columnas, separadores, espaciadores y otros bloques de diseño.
- Los widgets ahora admiten la edición de texto enriquecido por defecto, sin necesidad de que los usuarios añadan código personalizado o incorporen un editor HTML de terceros con un plugin.
- Muchos widgets basados en códigos cortos están ahora disponibles como bloques, lo que agiliza la experiencia de edición.
Andrei Draganescu también subraya las ventajas que podemos obtener al poder editar los widgets desde una interfaz basada en bloques:
El principal beneficio de la actualización de la funcionalidad de los widgets a los bloques viene de la capacidad de editar directamente los widgets utilizando la interacción familiar de los bloques que utilizas cuando editas una página o un post en tu sitio. La posibilidad de utilizar bloques abre un montón de nuevas posibilidades creativas, desde mini diseños sin código hasta el aprovechamiento de la amplia biblioteca de bloques principales y de terceros para crear contenido.
No tienes que preocuparte de que tus widgets dejen de funcionar con WordPress 5.8 porque la comunidad ha trabajado duro para garantizar la compatibilidad con versiones anteriores, de modo que «los widgets existentes y los de terceros seguirán funcionando y podrán utilizarse junto con los bloques» (ver Editor de widgets basado en bloques en WordPress 5.8).
Pero, de nuevo, para evitar cualquier problema de compatibilidad en su instalación de WordPress existente, no olvides probar la nueva versión en un entorno staging antes de actualizar tu sitio en vivo.
Para aquellos que opten por no utilizar el editor de widgets basado en bloques en este momento, todavía es posible restaurar la pantalla clásica de widgets de tres maneras diferentes:
- Puedes instalar el plugin oficial Classic Widgets, que restaura la interfaz anterior de la pantalla de widgets. El plugin «recibirá soporte y mantenimiento hasta al menos 2022, o el tiempo que sea necesario».
- Los desarrolladores de temas pueden desactivar el editor de widgets basado en bloques eliminando el soporte del tema como es habitual:
remove_theme_support( 'widgets-block-editor' ); - También se puede utilizar un nuevo filtro
use_widgets_block_editoradd_filter( 'use_widgets_block_editor', '__return_false' );
Véase también Restaurar el editor de widgets clásico en Visión general del editor de bloques de widgets.
Bloquear los widgets en el personalizador
Como parte del mismo proyecto, WordPress 5.8 también incorpora widgets de bloque al personalizador.
Añadir un widget basado en bloques en el personalizador es bastante sencillo. Puedes iniciar el insertador de widgets personalizados haciendo clic en el icono del signo más en la esquina superior derecha del panel de widgets.
También puedes lanzar el insertador rápido desde la parte inferior del panel de widgets, como se muestra en la siguiente imagen.
En el momento de escribir este artículo, la nueva interfaz de edición de widgets todavía requiere mejoras y correcciones de errores, pero las posibilidades de personalización son prácticamente ilimitadas.
Básicamente, a partir de WordPress 5.8, tendrás el poder del editor de bloques en el personalizador, y podrás construir barras laterales altamente personalizadas sin problemas.
La nota de desarrollo del editor de widgets basados en bloques ofrece una visión más detallada del editor de widgets basados en bloques, con ejemplos y recursos para los desarrolladores.
Características y mejoras del editor de bloques
Además de la primera implementación de FSE, WordPress 5.8 también trae nuevas características y mejoras en varios elementos del editor de bloques, que mejoran significativamente la experiencia general de edición.
Estos cambios incluyen:
Mejoras en los bloques de medios y texto
Transformar un bloque en un bloque de columnas es posible desde hace tiempo. Sin embargo, todos los bloques transformados en bloques de columnas tienen una sola columna. Esto podría llevar a resultados subóptimos para el bloque de medios y texto, para el cual una sola columna no suele ser adecuada.
A partir de WordPress 5.8 (y Gutenberg 10.2), la transformación del bloque de medios y texto en un bloque de columnas añade automáticamente dos columnas: una para la imagen y otra para el texto.
Mejoras en los bloques reutilizables
Los bloques reutilizables permiten al usuario guardar un bloque o un grupo de bloques para reutilizarlos posteriormente en cualquier post o página de un sitio web. Esto es útil sobre todo para los usuarios que incluyen repetidamente el mismo bloque o grupo de bloques en diferentes posts/páginas.
Con WordPress 5.8, los bloques reutilizables son visualmente más claros, lo que facilita su gestión a los usuarios de WordPress.
He aquí una lista rápida de las mejoras de los bloques reutilizables que los usuarios encontrarán tras actualizar tus sitios web a WordPress 5.8:
- Al crear un bloque reutilizable, ahora un modal permite a los usuarios asignar un nombre al bloque.
- El nombre del bloque reutilizable se muestra ahora en la barra de herramientas del bloque, en la lista de navegación y en las migas de pan.
- Cuando se selecciona un bloque hijo, los bloques reutilizables aparecen ahora perfilados. Esto supone una importante mejora en la usabilidad, ya que permite identificar fácilmente el bloque padre y su contenido.
- Ahora es posible modificar el nombre del bloque en el inspector de la barra lateral.
Barra de herramientas del bloque de imágenes normalizadas
Varias barras de herramientas de los bloques se han reorganizado para proporcionar una interfaz de usuario coherente entre los bloques y mejorar la experiencia del usuario. Ahora, los controles de la barra de herramientas se agrupan siguiendo el orden semántico «meta, nivel de bloque, en línea».
Desde Gutenberg 10.1 y Gutenberg 10.3, se ha normalizado todo un conjunto de barras de herramientas en bloque. Estas incluyen una imagen, un botón, botones, una lista, un encabezado, un párrafo, una cita, un audio, un archivo, un medio y un texto, un vídeo y muchos más.
Según Matias Ventura:
Las agrupaciones semánticas que tenemos en la barra de herramientas – meta, nivel de bloque, inline – deberían tener también una representación visual con los bordes. Ahora mismo, los controles de nivel de bloque separados tienen representaciones diferentes, incluyendo casos como el de Navegación, en el que cada uno de ellos tiene bordes.
Así, desde WordPress 5.8, la barra de herramientas de bloques agrupa los controles en segmentos rodeados de bordes. Además:
- El segmento Meta contiene controles de tipo bloque, como el conmutador de bloques, el tirador de arrastre y el control de desplazamiento.
- El segmento de nivel de bloque contiene herramientas específicas de bloque que afectan a todo el contenido, como la alineación en un bloque de párrafo o la vinculación en un bloque de imagen.
- El nivel Inline/Otro segmento contiene herramientas de transformación inline, como el formato inline en un bloque de texto.
- El menú Más incluye herramientas adicionales.
La imagen de abajo compara la barra de herramientas del bloque de imágenes en WordPress 5.7 y 5.8:
Mejoras en la barra de herramientas
Con el modo de barra de herramientas superior activado en versiones anteriores de WordPress, la barra de herramientas superior y la barra de herramientas de bloque se mostraban una al lado de la otra, como se muestra en la siguiente imagen:
Con WordPress 5.8, la activación de la vista de la barra de herramientas superior fijará la barra de herramientas en bloque en la parte superior del editor, justo debajo de la barra de herramientas superior. Esto ocurre independientemente del ancho del navegador y debería mejorar significativamente la experiencia del usuario.
Esta mejora también aporta cambios para los desarrolladores, ya que unifica las APIs de las barras de herramientas bajo el componente <BlockTools /> (ver PR #31134).
PDFs incrustados
Cuando se añade un archivo PDF al documento a través del bloque de archivos, una nueva barra lateral permite activar/desactivar una versión PDF incrustada (ver PR #30857).
Puedes arrastrar el archivo directamente al lienzo del editor o simplemente seleccionarlo de la biblioteca. También es posible ajustar manualmente la altura del visor de PDF o mediante el control de la barra lateral.
Todos los principales navegadores web son compatibles con el visor de PDF, excepto los navegadores móviles.
Soporte de bloques Duotone
Una de las características más interesantes fusionadas en el Core con WordPress 5.8 es el filtro duotono, introducido por primera vez con Gutenberg 10.6.
Disponible como una función de «soporte de bloques», el filtro duotono está activado por defecto en los bloques de imagen principal y de portada. En el bloque de portada, sin embargo, no funciona con fondos fijos.
Las barras de herramientas de la imagen y del bloque de portada muestran ahora un control de Aplicar filtro de duotono que muestra un selector de duotono con muchos preajustes para elegir.
Dos subcontroles permiten personalizar las sombras y las iluminaciones por separado. El efecto se aplica con un filtro SVG oculto con estilos en línea y se aplica utilizando un nombre de clase específico.
La nueva herramienta viene acompañada de una nueva propiedad color.__experimentalDuotone que permite a los desarrolladores añadir el filtro duotono a los bloques o a partes de los mismos en su archivo block.json (más información sobre esto en la referencia del objeto color):
supports: {
color: {
__experimentalDuotone: '> .duotone-img, > .duotone-video',
background: false,
text: false
}
}Cuando un bloque declara la compatibilidad con color.__experimentalDuotone, se puede utilizar un atributo de style para establecer colores personalizados por defecto:
attributes: {
style: {
type: 'object',
default: {
color: {
duotone: [
'#FFF',
'#000
]
}
}
}
}A continuación puedes ver la misma imagen con dos efectos duotono diferentes aplicados:
Los desarrolladores pueden definir los preajustes de duotono en el archivo theme.json (véase la siguiente sección), como se muestra en el siguiente fragmento:
{
"version": 1,
"settings": {
"color": {
"duotone": [
{
"colors": [ "#000", "#7f7f7f" ],
"slug": "black-and-white",
"name": "dark-grayscale"
}
],
...Puedes leer más sobre los filtros de duotono en Colorear tus imágenes con filtros de duotono.
Colores y bordes del bloque de tabla
WordPress 5.8 también aporta un par de mejoras al bloque Tabla, incluyendo un mejor control de los colores de fondo y primer plano de la tabla.
Otra adición al bloque de la tabla es el soporte del bloque del borde, que ofrece a los usuarios la posibilidad de controlar el color, el estilo y la anchura del borde.
Si el tema activo es compatible con la nueva función, un nuevo panel de configuración de bordes ofrece tres nuevos controles para las personalizaciones del usuario..
Los desarrolladores pueden añadir soporte de bloques de borde a sus temas añadiendo el siguiente código al archivo theme.json:
"border": {
"customColor": true,
"customStyle": true,
"customWidth": true
}Mejoras en el insertador de bloques
En WordPress 5.8, el insertador de bloques ha sido mejorado con varias adiciones (PR #26938 y #21080):
1. Navegación bidimensional con el teclado en el insertador de bloques. Ahora podemos navegar entre bloques de forma más precisa e intuitiva.
- Al pulsar la flecha hacia arriba (↑) y la flecha hacia abajo (↓) se desplaza el foco a la fila superior o inferior.
- Pulsar Tab o Shift + Tab permite mover el foco entre el cuadro de búsqueda, la lista de pestañas y el primer elemento de cada categoría
2. Una nueva categoría «Tema» para las partes y variaciones de la plantilla aparece ahora en el insertador en la Edición Completa del Sitio (ver PR #30020).
3. Ahora se permiten múltiples palabras en el comparador de frases autocompletado (ver PR #29939).
Mejoras adicionales en el editor de bloques
WordPress 5.8 trae un montón de pequeños y medianos cambios adicionales que merecen unas líneas aquí. Entre estas mejoras, mencionamos las siguientes:
Soporte para arrastrar y soltar en los bloques de portada
Ahora puedes arrastrar y soltar imágenes desde tu escritorio para reemplazar el fondo de un bloque de portada (ver Gutenberg 10.3 y PR #29813).
Interfaz de publicación mejorada
Desde WordPress 5.8, la UI de publicación muestra el icono del sitio y el título para que quede más claro dónde vas a publicar tus entradas o páginas (Gutenberg 10.4).
Esta mejora es beneficiosa si se trabaja en modo de pantalla completa o en dispositivos móviles.
Configuración de bloques y estilos con theme.json
Con WordPress 5.8, el archivo theme.json se convierte en «un punto central de configuración», proporcionando una nueva forma para que los desarrolladores de temas personalicen la configuración y los estilos del editor.
Utilizando un archivo theme.json, los temas pueden establecer preajustes personalizados y/o añadir soporte para nuevas características, como el duotono y los bordes de las tablas (ver Ajustes globales y estilos).
Según André Maneiro:
Este nuevo mecanismo pretende asumir y consolidar todas las diversas llamadas a
add_theme_supportque antes eran necesarias para controlar el editor.
Por ejemplo, puede establecer globalmente un preajuste de duotono personalizado con el siguiente código:
{
"version": 1,
"settings": {
"color": {
"duotone": [
{
"colors": [ "#000", "#0FF" ],
"slug": "black-cyan",
"name": "Black Cyan"
}
],Esto sobrescribiría los preajustes por defecto, y solo verás una opción de duotono:
El nuevo mecanismo proporciona una forma de controlar los ajustes, ya sea globalmente o por bloques. Por ejemplo, puedes añadir un tamaño de fuente personalizado de 12px de forma global añadiendo el siguiente preajuste a tu archivo theme.json:
{
"version": 1,
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [
{
"slug": "extra-extra-small",
"size": "12px",
"name": "Extra extra small"
},
{...}El resultado es un nuevo tamaño de fuente disponible para que los usuarios lo utilicen con cualquier texto de su contenido.
Si solo quieres personalizar el bloque de párrafos, tu código será ligeramente diferente:
{
"version": 1,
"settings": {
"blocks": {
"core/paragraph": {
"typography": {
"fontSizes": [
{
"slug": "extra-extra-small",
"size": "12px",
"name": "Extra extra small"
},
{
"slug": "extra-small",
"size": "16px",
"name": "Extra small"
},
{
"slug": "small",
"size": "18px",
"name": "Small"
},
{
"slug": "normal",
"size": "20px",
"name": "Normal"
},
{
"slug": "large",
"size": "24px",
"name": "Large"
}
]
}
}
}
}
}Ya está. Acabas de crear tus preajustes de tamaño de fuente personalizados en el bloque de párrafo.
Los bloques del núcleo se han actualizado para seguir el nuevo mecanismo, mientras que los bloques de terceros pueden adaptarse al nuevo mecanismo utilizando el gancho React useSetting (lee más sobre esta función en la nota de desarrollo y la documentación de la API):
const isEnabled = useSetting( 'spacing.margin' );El nuevo mecanismo basado en el archivo theme.json no se aplica solo a la configuración de los bloques. De hecho, a partir de WordPress 5.8, ya no será necesario crear estilos de editor y ponerlos en cola. Bastará con declarar los preajustes dentro del archivo theme.json; el motor generará las clases y las pondrá en cola automáticamente tanto en el editor como en el frontend.
El motor también generará las correspondientes propiedades personalizadas CSS.
En el ejemplo anterior, establecimos cinco preajustes fontSizes para el bloque de párrafo. Para esos preajustes, se generarán las siguientes propiedades personalizadas de CSS:
p {
--wp--preset--font-size--extra-extra-small: 12px;
--wp--preset--font-size--extra-small: 16px;
--wp--preset--font-size--small: 18px;
--wp--preset--font-size--normal: 20px;
--wp--preset--font-size--large: 24px;
}Una vez que hayas establecido el tamaño de la fuente del párrafo en tu archivo theme.json, el elemento p correspondiente toma la clase has-{preset-slug}-{preset-category}.
Esto significa que un párrafo con un tamaño de fuente extra-extra-small recibirá la clase has-extra-extra-small-font-size:
<p class="has-extra-extra-small-font-size">Lorem ipsum dolor...</p>Y aquí está el bloque de declaración CSS:
p.has-extra-extra-small-font-size {
font-size: var(--wp--preset--font-size--extra-extra-small) !important;
}Para ver más de cerca la configuración y los estilos con theme.json, asegúrate de consultar la nota de desarrollo y la documentación de la API.
Además, consulta la convocatoria de pruebas de FSE de Anne McCarty para obtener más lecturas útiles y un emocionante reto para los desarrolladores que quieran explorar las nuevas características de theme.json.
Mejoras en la API de bloques
Las mejoras de la API de bloques que llegan con WordPress 5.8 merecen una atención especial por parte de los desarrolladores de plugins.
Ahora se fomenta el uso del archivo block.json como la forma canónica de registrar los tipos de bloque y proporciona varias ventajas:
- En cuanto al rendimiento, si el tema admite el lazy load de activos, el registro de los tipos de bloque a través del archivo block.json optimizará automáticamente la puesta en cola de los recursos. Esto se debe a que los recursos especificados por las propiedades de
styleyscriptse pondrán en cola en el frontend sólo cuando se detecte el bloque. Esto permite el desarrollo de plugins más eficientes, reduciendo el tamaño de la página y previniendo varios de los problemas cubiertos en este artículo. - El archivo block.json simplifica el registro de bloques en el lado del servidor al permitir que el punto final de la API REST de Block Types liste el bloque.
- El archivo block.json también es necesario si decide enviar tu plugin de bloques al directorio de plugins de WordPress.
Cambios en la función register_block_type
Desde WordPress 5.8, la función register_block_type se ha mejorado para leer los metadatos del archivo block.json. Ahora, el primer parámetro acepta la ruta de la carpeta donde se encuentra el archivo block.json.
La función puede utilizarse como se muestra en el siguiente ejemplo:
function create_custom_block_init() {
register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );Devuelve el tipo de bloque registrado o false en caso de fallo.
Como puedes observar, la función register_block_type se utiliza ahora de la misma manera que la función register_block_type_from_metadata, que antes era la única función disponible para registrar un tipo de bloque leyendo los metadatos del archivo block.json. Como explica Greg Ziółkowski:
Hemos decidido consolidar la funcionalidad preexistente disponible con el método
register_block_type_from_metadataenregister_block_typepara evitar cierta confusión que creaba. Todavía es posible utilizar ambas funciones, pero pensamos utilizar solo la versión más corta en los documentos y herramientas oficiales a partir de ahora.
Una vez que el bloque está registrado en el servidor, solo tienes que registrar la configuración en el cliente utilizando el mismo nombre de bloque en tu archivo index.js.
Para una visión más detallada de las mejoras de la API de bloques introducidas por WordPress 5.8, asegúrate de consultar la nota de desarrollo de Greg Ziółkowski.
Soporte de WebP en WordPress 5.8
En Kinsta, estamos obsesionados con la velocidad del sitio y el rendimiento de WordPress. Por eso la compatibilidad con el formato WebP en WordPress 5.8 es una noticia tan importante para nosotros.
Considerado un formato de nueva generación, WebP es un formato de imagen desarrollado por Google que proporciona «una mejor compresión que PNG o JPEG, lo que significa descargas más rápidas y menos consumo de datos».»
WebP es un formato de imagen moderno que proporciona una compresión superior sin pérdidas y con pérdidas para las imágenes en la web. Con WebP, los administradores y desarrolladores web pueden crear imágenes más pequeñas y ricas que hacen que la web sea más rápida.
Las imágenes sin pérdidas de WebP son un 26% más pequeñas que las de PNG. Las imágenes con pérdidas de WebP son un 25-34% más pequeñas que las imágenes JPEG comparables con un índice de calidad SSIM equivalente.
A partir de WordPress 5.8, se puede utilizar el formato de imagen WebP del mismo modo que los formatos JPEG, PNG y GIF. Solo tienes que subir tus imágenes a tu biblioteca multimedia e incluirlas en tu contenido.
En un artículo anterior, analizamos en profundidad el formato WebP y las herramientas disponibles para utilizarlo en WordPress. Ahora, debido al soporte para imágenes WebP en WordPress 5.8, las cosas cambian un poco Dado que el formato WebP es compatible desde el principio, no es necesario instalar plugins de terceros para subir imágenes WebP en WordPress, al menos en los casos de uso más comunes.
Ten en cuenta que, aunque ahora puede subir tus imágenes WebP a WordPress utilizando la biblioteca multimedia, WordPress no admite la conversión automática de imágenes al formato WebP. Para activar esa función en tu sitio web, necesitarás un plugin de WordPress para WebP de terceros.
Cómo utilizar imágenes WebP en WordPress
Puedes convertir tus imágenes a WebP de muchas maneras diferentes:
- Puedes utilizar las utilidades y la biblioteca WebP precompiladas de Google para Linux, Windows o Mac OS X.
- Los usuarios de Mac pueden instalar un gestor de paquetes como el paquete Homebrew WebP o el paquete Macports WebP.
- Puedes utilizar una herramienta de edición de imágenes compatible con WebP, como Squoosh de Google Chrome Labs, el conversor de imágenes por lotes XnConvert, un editor de imágenes popular como GIMP, y muchos otros.
- Puedes instalar un plugin de WebP para WordPress para tener un mejor control general de las imágenes WebP en WordPress.
Si optas por una herramienta de línea de comandos, puedes codificar y descodificar tus imágenes utilizando las utilidades cwebp y dwebp. Por ejemplo, el siguiente comando ejecuta una conversión básica de JPEG a WebP:
cwebp [options] original_image.jpg -o compressed_image.webpTambién puedes realizar una conversión masiva de tus imágenes utilizando Bash y cwebp (ejemplo de Jeremy Wagner):
find ./ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} \;
El comando anterior convierte todas las imágenes .png a formato .webp con un factor de compresión de 75.
Una vez que tenga tus imágenes WebP, puede simplemente subirlas usando la Biblioteca de Medios de WordPress. A continuación puedes ver una imagen JPEG de 127 KB antes de la conversión en la Biblioteca de Medios:
El tamaño de la imagen WebP comprimida es un 42% menor que la imagen JPEG original.
Por último, las imágenes WebP tienen las mismas funciones de edición que las imágenes JPEG, PNG y GIF. Puedes recortarlas, rotarlas, voltearlas y escalarlas, así como aplicar cambios a los tamaños de imagen que elijas.
Advertencias sobre WebP en WordPress 5.8
Según Adam Silverstein:
Las imágenes WebP admiten compresión con y sin pérdidas, así como un formato animado y soporte para imágenes transparentes. En WordPress, el formato WebP sin pérdidas solo es compatible cuando el servidor de alojamiento utiliza Imagick (la biblioteca de PHP) hasta que LibGD añada soporte. Además, los formatos animados y alfa aún no son compatibles con las imágenes redimensionadas (cuando se suben imágenes en estos formatos se crean imágenes con pérdidas en su lugar).
Si tu alojamiento web no admite imágenes WebP, verás un mensaje de error al intentar cargarlas. Si no está seguro de si tu alojamiento web admite la biblioteca Imagick, la pestaña Información de la herramienta Salud del sitio incluye un campo de biblioteca Imagick que proporciona esa información.
Con el soporte de WebP, WordPress 5.8 también introduce dos campos adicionales en la sección de Manejo de Medios en la Salud del Sitio: Versión de Imagick y formatos de archivo compatibles con ImageMagick.
Si WebP no figura entre los tipos de archivo admitidos, tendrás que ponerte en contacto con tu proveedor de servicios web para obtener ayuda.
La nota de desarrollo proporciona información adicional sobre la compatibilidad con WebP en WordPress 5.8, preguntas frecuentes útiles y otros recursos.
Si te interesa la optimización de imágenes, puede que también te gusten los siguientes tutoriales:
- Cómo optimizar las imágenes para la web y el rendimiento
- Por qué y cómo utilizar la compresión con pérdidas en tus imágenes de WordPress
- Cómo utilizar imágenes WebP en WordPress (y reducir el tamaño de los archivos de imagen hasta un 35%)
- 15 mejores tipos de archivos de imagen
- Todo lo que necesitas saber sobre los tamaños de las imágenes en WordPress
Funciones adicionales para desarrolladores
En WordPress 5.8 encontrarás docenas de características interesantes para los desarrolladores. En este artículo, hemos prestado más atención a las que deberían tener un impacto más significativo en tu trabajo de desarrollo. Pero hay muchas nuevas características que merecen atención, incluyendo las siguientes:
API de soporte a los bloques
WordPress 5.8 añade nuevas banderas de soporte de bloques que permiten a los desarrolladores personalizar los bloques registrados con las últimas características de los bloques.
Además del soporte experimental de bloques duotono mencionado anteriormente (color._experimentalDuotone), WordPress 5.8 también añade soporte para el color de los enlaces. Para aprovechar esta función, basta con añadir el siguiente indicador a los metadatos de tu bloque:
supports: {
color: {
link: true;
}
}Puede establecer valores por defecto utilizando atributos, como se muestra en el siguiente ejemplo, o establecer sus preajustes en theme.json:
attributes: {
style: {
type: 'object',
default: {
color: {
link: '#FF0000',
}
}Otros cambios en la API de bloques son
- Los soportes
fontSizeylineHeightse estabilizan. - Se ha ampliado el soporte de
spacing, y ahora puede controlar elmarginy elpadding, así como controlar individualmente los tamañostop,right,bottomeleft.
Puedes leer más sobre la API de soporte de bloques en WordPress 5.8 en Block supports API updates dev-note.
Para conocer más a fondo cómo utilizar la API de soportes de bloques, consulta la documentación oficial de la API de soportes de bloques.
Pestañas personalizadas de salud del sitio
Dos nuevos ganchos permiten ahora a los desarrolladores añadir sus pestañas personalizadas a la interfaz de Site Health y personalizar las pantallas disponibles.
El filtro site_health_navigation_tabs es una matriz asociativa de IDs de pestañas y etiquetas para registrar una nueva pestaña en la pantalla Site Health. Puedes utilizar el filtro añadiendo el siguiente código de ejemplo al archivo de funciones de su tema o al plugin personalizado:
function kinsta_site_health_navigation_tabs( $tabs ) {
$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );
return $tabs;
}
add_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );La siguiente imagen muestra la nueva pestaña de Salud del Sitio:
Gracias al filtro site_health_navigation_tabs, también es posible reordenar las pestañas o eliminar uno o varios elementos.
La acción site_health_tab_content se activa cuando un usuario visita la pantalla de Salud del Sitio, excepto la pantalla de Estado por defecto. Puedes utilizar este gancho como se muestra en el siguiente fragmento (ejemplo de la nota de desarrollo):
function kinsta_site_health_tab_content( $tab ) {
// Return if this is not your tab.
if ( 'kinsta-site-health-tab' !== $tab ) {
return;
}
// Include the interface, kept in a separate file just to differentiate code from views.
include trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views/kinsta-site-health-tab.php';
}
add_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );En primer lugar, detecta si la pestaña actual es tu pestaña personalizada, luego carga el contenido de tu pantalla de Salud del Sitio desde un archivo .php. La acción site_health_tab_content también permite a los desarrolladores ampliar la pestaña de información por defecto añadiendo piezas de información específicas para sus plugins o temas.
Cambios en la API del editor de bloques para soportar múltiples pantallas de administración
Con WordPress 5.8, el editor de entradas ya no es la única pantalla de administración que utiliza el editor de bloques (la pantalla de widgets es un ejemplo).
Los colaboradores del núcleo encontraron varios ganchos definidos en el servidor que dependen del objeto $post. Este objeto no está presente en la edición del sitio, los widgets y las pantallas de navegación. En adelante, varios filtros han sido desaprobados y reemplazados por sustituciones conscientes del contexto.
Además, se ha introducido una nueva clase WP_Block_Editor_Context que representa el contexto actual del editor de bloques y varios métodos.
Estos cambios mejoran estas pantallas con nuevas capacidades y permiten a los desarrolladores añadir sus personalizaciones.
Para obtener una lista completa de los cambios en la API del Editor de Bloques relacionados con las pantallas de administración, consulta la nota de desarrollo de Greg Ziółkowski.
Características y mejoras adicionales
Hay tantas novedades y cambios para los desarrolladores que trae WordPress 5.8 que nos sería imposible mencionarlas todas en este artículo. Sin embargo, hemos recopilado una lista de notas de desarrollo que no se han incluido aquí, para que pueda seguir leyendo:
- Se abandona la compatibilidad con Internet Explorer 11
- Mejoras en la carga de estilos de bloques en WordPress 5.8
- Bloques en un editor iframed (plantilla)
- Sobre el diseño y el ancho del contenido en WordPress 5.8
- Introducción de la cabecera del plugin «Update URI» en WordPress 5.8
- Varias eliminaciones de la API del editor de bloques en WordPress 5.8
- Cambios en la API REST de WordPress 5.8
- Diversos cambios centrados en los desarrolladores en WordPress 5.8
- Adiciones a la API del editor de bloques en WordPress 5.8
Resumen
WordPress 5.8 marca un hito en el camino hacia el Full Site Editing. Pero la segunda versión de WordPress del año trae mucho más que FSE. Los usuarios y desarrolladores encontrarán montones de mejoras en el editor de bloques, un nuevo mecanismo theme.json, una API de bloques más potente, compatibilidad con el formato de imagen WebP y mucho más.
Nos han impresionado especialmente las mejoras, grandes y pequeñas, del editor de bloques y su interfaz de usuario. Nos encanta la mejora de la navegación entre bloques, la barra de herramientas de bloques renovada, la mayor claridad de la interfaz y las mejoras de varios bloques.
Estos pequeños cambios mejoran la experiencia de edición poco a poco y, sin casi darnos cuenta, nos encontramos utilizando un software mejor y más robusto. ¡Así es WordPress!
Ahora, estamos a tu disposición. ¿Qué opinas del Full Site Editing? ¿Y cuáles son tus cambios favoritos de WordPress 5.8?
Deja una respuesta