Gutenberg 8.3 actualiza las categorías de bloques, incluye el selector de bloques principales y agrega nuevos controles de diseño

Ayer, el equipo de Gutenberg lanzó la versión 8.3 del complemento en curso detrás del editor de bloques. Si bien gran parte del enfoque del equipo está en la próxima edición de todo el sitio, esta actualización incluye varias funciones orientadas al usuario, como un conjunto reorganizado de categorías de bloques, un selector de bloque principal, un control de espaciado y opciones de color de enlace.

Una mejora más pequeña incluye la capacidad de filtrar el bloque Últimas publicaciones por autor. El control de nivel para el bloque de encabezado también ha cambiado. En lugar de seleccionar el nivel en la barra lateral de opciones de bloque, el selector de nivel ahora se encuentra en la barra de herramientas del editor.

En Gutenberg 8.2, al pulsar la tecla Enter en el campo de título de un bloque de imagen se creaba un nuevo párrafo. En 8.3, esa característica se ha extendido a todos los bloques con subtítulos.

El equipo corrigió más de 20 correcciones de errores en la última versión. En general, la nueva actualización del complemento parece ser sólida después de un día de uso. Sin embargo, algunas de las adiciones experimentales, como el nuevo control de relleno, pueden valer la pena. Los autores de temas deben comenzar a probar esto, proporcionar comentarios y asegurarse de que el desarrollo vaya en la dirección correcta.

Nuevas categorías de bloques

El equipo de Gutenberg ha renombrado y reorganizado las categorías de bloques. La nueva lista parece tener más sentido y está mejor consolidada en grupos adecuados:

• Texto
• Medios de comunicación
• Diseño
• Widgets
• incrustaciones

Si bien soy fanático de los nuevos nombres de categoría, encuentro que las categorías son inútiles para cualquier propósito práctico en este momento. Desde que Gutenberg dejó caer la interfaz con pestañas en el insertador de bloques, se ha sentido como una gran pared de bloques. Mis ojos saltan naturalmente por los nombres de las categorías a medida que me desplazo y desplazo y desplazo la lista de bloques disponibles para encontrar el bloque en particular que necesito. Casi siempre uso los comandos de barra oblicua del teclado para insertar bloques. En aquellos casos en los que no lo hago, no es una experiencia de usuario ideal, y las nuevas categorías no ayudan mucho.

Seleccionar bloque principal

Una de las experiencias más frustrantes en Gutenberg es intentar seleccionar un bloque principal en un escenario de bloques anidados. Con demasiada frecuencia, los usuarios sienten que están haciendo clic al azar con la esperanza de llegar a ese punto ideal donde realmente pueden navegar hasta el bloque que necesitan editar. Es un ejercicio de frustración en los mejores momentos.

El equipo de Gutenberg dio un paso, un pequeño paso , para aliviar este dolor. Al pasar el cursor sobre el botón "cambiar tipo o estilo de bloque" en la barra de herramientas del editor, aparece un nuevo botón para seleccionar el bloque principal.

No estoy seguro si esta es la forma correcta de manejar el problema. Me gustaría ver algunos experimentos con algún tipo de botón de flecha que aparece sin flotar. Por ahora, estoy satisfecho de que el equipo esté intentando resolver el problema y espero que las iteraciones futuras mejoren la navegación dentro de los bloques anidados.

Esta característica no parece funcionar cuando el modo de la barra de herramientas superior está habilitado. Para aquellos que usan este modo, la mejor manera de seleccionar un bloque principal es a través de la ruta de navegación en la parte inferior del editor.

Control experimental de espaciado/relleno

Los autores de temas ahora pueden agregar soporte para un control de relleno experimental a través add_theme_support( 'experimental-custom-spacing' ) . Cuando sea compatible, el usuario final verá una nueva pestaña Espaciado debajo de la barra lateral de opciones de bloque para el bloque Cubierta, que debería estar disponible para otros bloques en el futuro. De forma predeterminada, los usuarios pueden controlar el relleno de los cuatro lados de un bloque con un solo valor. También pueden "desvincular" el relleno y controlar los valores superior, inferior, izquierdo y derecho individualmente.

Presumiblemente, el equipo de Gutenberg ampliará esta función de espaciado para incluir también un control de margen. Sería el movimiento natural y espero que conduzca a la muerte del bloque Spacer con el que los usuarios han tenido que vivir durante los últimos dos años.

Sin embargo, no estoy convencido de permitir que los usuarios finales controlen el relleno con valores explícitos. Cambiar al azar los valores de relleno romperá el ritmo vertical que muchos autores de temas se toman el tiempo de calcular meticulosamente. Al usar valores de píxel (el valor predeterminado), los usuarios seguramente tendrán problemas con los tamaños de pantalla de tabletas y dispositivos móviles. Esencialmente, creará un completo desorden de espaciado.

No estoy en contra de la idea. Lo quiero listo antes de que esto llegue a WordPress. Los autores de temas deberían poder registrar clases con nombre que se manejan a través de la hoja de estilo. Esto se remonta a la idea de que WordPress tiene un marco de diseño. Cree un conjunto de clases de utilidad para el espaciado (oh, hola, Tailwind). Deje que los autores del tema definan el espaciado en función de su diseño. Deje que los usuarios elijan entre ellos. Luego, proporcione una opción personalizada para aquellos momentos en los que los usuarios quieran tomar el asunto en sus propias manos. En ese momento, han tomado la decisión explícita de romper con el flujo de diseño que ha elegido el autor del tema.

Colores de enlace

Uno de los obstáculos más difíciles que los autores de temas han tenido que enfrentar cuando diseñan para el editor de bloques es averiguar qué hacer con los colores de los enlaces cuando el usuario cambia el color de fondo de un bloque. Los usuarios han tenido durante mucho tiempo el control del color del texto en ese escenario. Sin embargo, los colores de los enlaces podrían volverse rápidamente inaccesibles o simplemente desagradables. Los autores de temas con visión de futuro diseñarían esos colores de enlace para que heredaran el color del texto, pero esa no siempre es la solución ideal.

Ahí es donde entran los colores de enlace controlados por el usuario. Para agregar soporte para colores de enlace personalizados, los autores de temas deben optar por la función a través add_theme_support( 'experimental-link-color' ) . Esto agregará un nuevo selector de color para los bloques de párrafo, encabezado, grupo, columnas y medios y texto.

Al no poder hacer que esta característica funcione con la llamada a la función de soporte de temas, tuve que profundizar un poco en el código para encontrar el problema. Para que los autores de temas agreguen soporte para los colores de los enlaces, también deben definir sus enlaces predeterminados como se muestra en el siguiente fragmento de código CSS:

 a { color: var( --wp--style--color--link, #000 ); }

WordPress configurará automáticamente la --wp--style--color--link . Para mayor especificidad, los autores de temas también pueden apuntar .has-link-color a .