Gutenberg 11.3 presenta el panel de dimensiones, agrega soporte de relleno de botones y acelera el insertador

Hoy temprano, Gutenberg 11.3 aterrizó en el directorio de complementos de WordPress. La última actualización presenta un nuevo panel de dimensiones para alternar las opciones de bloque relacionadas con el espaciado. El bloque Botón ahora admite el control de relleno, y el bloque Publicar imagen destacada tiene nuevas configuraciones de ancho y alto.

Uno de los aspectos más destacados del lanzamiento fue una mejora en la velocidad tanto para abrir como para buscar dentro del insertador. El tiempo de apertura se redujo en más de 200 ms, de 370,35 ms a 137,28 ms. La velocidad de búsqueda pasó de 190,37 ms a 67,24 ms.

La última versión incluye una biblioteca de selección de color simplificada. Las vistas previas enriquecidas de enlaces, una característica introducida en Gutenberg 10.9 para URL externas, ahora funciona con enlaces de sitios internos.

Los autores de temas deberían disfrutar de la especificidad reducida de las hojas de estilo de reinicio y del editor clásico. Dichos cambios siempre hacen que sea un poco más fácil para los autores de temas combinar el estilo del editor y el front-end.

Panel de dimensiones para controles de espaciado

Gutenberg 11.3 presenta un nuevo panel Dimensiones para bloques que admiten controles de margen o relleno. La función agrega un botón de puntos suspensivos ( ... ) en lugar de la típica flecha de abrir/cerrar pestaña. Los usuarios pueden seleccionar qué controles quieren usar.

El objetivo a largo plazo es limpiar la interfaz, exponiendo solo los controles que el usuario realmente necesita. Debido a que tales necesidades son subjetivas, permitir que los usuarios las activen o desactiven es una ruta ideal a seguir.

Las desventajas actuales son dos. Una vez que elige mostrar los controles de margen o relleno, el panel en sí no se puede contraer. Esto exacerba el problema que la nueva función intenta resolver: despejar la interfaz de la barra lateral. Para mí, al menos, siempre quiero un acceso rápido a los controles de espaciado. Sin embargo, no siempre necesito que se muestren.

El segundo problema es que la elección del usuario de qué mostrar no parece estar almacenada. Cada vez que trabaje con un bloque, debe seleccionar qué controles deben aparecer.

El nuevo panel Dimensiones es solo una parte del proceso de disputar el tamaño (ancho y alto), el espaciado (relleno y margen) y los controles relacionados para los bloques. El trabajo hacia una solución más completa aún está en marcha. Presumiblemente, el equipo de desarrollo abordará estos problemas y otros en versiones futuras. Sin embargo, aquellos que ejecutan el complemento Gutenberg en producción deben esperar rarezas con el uso.

El complemento Block Visibility tiene la versión más fácil de usar de dicho control de alternancia en este momento. Todavía no es una solución perfecta, pero funciona un poco mejor que lo que hay actualmente en Gutenberg.

Relleno de bloque de botones

No es ningún secreto que no me gusta el relleno predeterminado del bloque Button cuando uso el tema TT1 Blocks (versión basada en bloques de Twenty Twenty-One). He convertido en una de mis misiones señalarlo de forma rutinaria, incluso yendo tan lejos como para negarme a usar el bloque en la última convocatoria de pruebas como parte del Programa de divulgación de FSE.

Un botón de gran tamaño no siempre es la elección estilística incorrecta en una página web. El contexto es importante y, de alguna manera, sigo enfrentándome a escenarios en los que necesito algo un poco más reducido. El control sobre el relleno del bloque Button ha estado en mi lista de deseos durante meses, y el equipo de desarrollo de Gutenberg cumplió.

A partir de la versión 11.3, los usuarios pueden controlar el relleno de bloques de botones individuales. Ahora aparecerá como una opción dentro del nuevo panel Dimensiones mencionado anteriormente.

Oración contestada. Ahora, pasemos a agregar controles de relleno a todos los bloques.

El único problema potencial con el que se pueden encontrar algunos usuarios es mantener un espacio constante al usar varios bloques de botones juntos. La forma más fácil de hacer esto es agregar y diseñar el primero, luego duplicarlo para crear otros con el mismo espacio. Esto no es un problema nuevo; se aplica a todas las opciones de Botón en las que los usuarios desean coherencia dentro de un grupo.

Controles de dimensión de imagen destacados

El bloque Publicar imagen destacada finalmente recibió una actualización pequeña pero útil. En el pasado, los usuarios y los autores de temas solo tenían una única opción para decidir si vincularlo a la publicación. Ahora, pueden controlar el ancho y el alto de la imagen.

Si un usuario establece una altura para la imagen, el editor revelará una opción separada de "Escala" con las siguientes opciones:

• Portada (predeterminado)
• Contiene
• Tramo

¿Qué hacen realmente estas opciones? Esa sería una buena pregunta. Incluso como alguien en el circuito de diseño y desarrollo web durante casi dos décadas, a veces los olvido y debo buscarlos. Son valores para la propiedad CSS object-fit y es probable que confundan a los usuarios en muchos casos.

Cubrir y contener permiten que la imagen se ajuste al cuadro del elemento contenedor manteniendo su relación de aspecto (sin estirar la imagen). La diferencia es que el valor de cobertura se recortará si no encaja y el valor de contenido puede estar en formato de pantalla ancha. Un valor de extensión llenará su contenedor independientemente de la relación de aspecto.

Dependiendo de la relación de aspecto de la imagen en su contenedor, cada uno de los valores podría mostrar esencialmente lo mismo en la pantalla. O bien, podrían proporcionar resultados muy diferentes. Combinar estos controles de dimensiones con alineaciones anchas y completas (también opciones relacionadas con el ancho) también podría generar algunos experimentos impredecibles.

El diseñador de temas que hay en mí quiere desactivar la interfaz de usuario para esto por completo y presentar algo un poco más controlado: un selector de tamaño de imagen.

Dicho selector no debe confundirse con los controles de ancho y alto. Los autores de temas de WordPress han estado registrando tamaños de imagen personalizados durante años. El caso de uso principal para esto fueron las imágenes destacadas. Los usuarios pueden usar estos tamaños con los bloques Imagen actual y Últimas publicaciones. Sin embargo, aún no tienen esta opción con Publicar imagen destacada.

Estoy en el campo que cree que los controles de tamaño de imagen deberían haber sido la primera adición al bloque. Es una parte tan integral del diseño de temas de WordPress que no se puede dejar de lado, y he estado luchando, o al menos insistiendo, para asegurarme de que los autores de temas puedan controlar las imágenes destacadas a través de tamaños personalizados.

Afortunadamente, hay un ticket abierto para el soporte de tamaño de imagen personalizado. Entre otras características que aún faltan, es un bloqueador para muchos autores de temas que buscan dar el salto hacia los temas de bloques.

Hay muchos casos de uso para las nuevas opciones, como recortar automáticamente las imágenes destacadas de una cuadrícula de publicaciones en un cuadrado. Solo estoy esperando con impaciencia un conjunto de herramientas más sólido para el bloque Publicar imagen destacada.