Gutenberg 7.7 envió UI actualizada y primera iteración de patrones de bloque

Traducido del artículo: “Gutenberg 7.7 Ships Refreshed UI and First Iteration of Block Patterns” de:

Justin Tadlock, marzo 16 de 2020

La semana pasada, la versión 7.7 del complemento Gutenberg se envió a los usuarios. En lo que es una de las actualizaciones visualmente más llamativas últimamente, el equipo de diseño presentó una interfaz de usuario actualizada. Los usuarios también tendrán su primera oportunidad de probar la próxima característica de patrones de bloque.
Algunos usuarios pueden recibir una sorpresa. Gutenberg 7.7 es la primera versión del complemento para enviar el editor en modo de pantalla completa fuera de la caja. Este cambio aterrizará en WordPress 5.4. Ahora es una buena oportunidad para ver cómo funciona antes de actualizar a finales de este mes.
Los desarrolladores de bloques pueden alegrarse por la capacidad de crear sus propios envoltorios de bloques. Esto es parte de un cambio para crear un DOM más rápido. Los bloques internos también producen una salida DOM más clara, por lo que el árbol de elementos en el editor ahora coincide con el front-end. Estos cambios facilitan a los diseñadores de temas diseñar bloques sin un complicado enredo de elementos <div> anidados.
La versión 7.7 incluye más de dos docenas de correcciones de errores. También incluye una solución para el botón de retroceso “Ver publicaciones” en la parte superior del editor en modo de pantalla completa. En lugar de un botón de flecha, que era confuso para los usuarios que pensaban que podría devolverlos al modo de edición normal, el equipo lo reemplazó con el ícono “W” de WordPress.

Una interfaz de usuario de editor fresca y limpia
Captura de pantalla de la interfaz de usuario de Gutenberg versión 7.7.
Interfaz de usuario actualizada en Gutenberg 7.7.
Me llevó unos días avanzar después de más de un año acostumbrándome a la vieja interfaz de usuario. Lo básico es lo mismo. El diseño no ha cambiado. Sin embargo, los botones y elementos relacionados han recibido una buena actualización.
El editor se siente más profesional. La barra de herramientas de bloque es más simple y limpia. El equipo de Gutenberg rediseñó los íconos. El contraste de color hace que todo sea más nítido.
El insertador de bloques ahora usa la altura completa del editor. Esta es una gran mejora con respecto a las iteraciones anteriores. Significa menos desplazamiento para encontrar el bloqueo correcto, que ha sido uno de mis manías (tengo cada vez menos de estos con cada lanzamiento).
Este es un primer paso sobre la nueva interfaz, y aún hay más trabajo para el equipo de diseño de Gutenberg. El trabajo en la barra lateral, menús desplegables y otros elementos está actualmente en progreso y debería aterrizar en las próximas actualizaciones de complementos.
En general, la interfaz de usuario está mucho más pulida. El usuario promedio de WordPress no lo experimentará hasta WordPress 5.5, pero vale la pena instalar y activar el complemento Gutenberg para darle un giro.

Trabajo temprano hacia patrones de bloques
Captura de pantalla del uso de patrones de bloques en Gutenberg.
Insertar un patrón en el editor de bloques.
Quizás una de las características más esperadas de Gutenberg es la inclusión de una biblioteca de patrones. Un patrón es una colección de bloques en una disposición predefinida. Por ejemplo, un patrón común es una gran imagen con texto y un par de botones en la parte superior. Otro patrón común es un conjunto de tres o cuatro cuadros alineados uno al lado del otro, cada uno con un título, imagen y texto.
Cuanto más complejo es un diseño en particular, más difícil es crearlo desde el editor sin el conocimiento. Ahí es donde entran los patrones. Son una especie de “plantilla” que permite a los usuarios finales construir rápidamente secciones de contenido sin la necesidad de insertar bloques individuales.

Los patrones cambiarán el juego.
Algunos proyectos ya han hecho intentos sólidos de hacer algo parecido a los patrones. Los bloques compartidos basados ​​en la comunidad de ShareABlock y las plantillas de copiar y pegar de Gutenberg Hub son buenas opciones para las personas que conocen esos proyectos. Los usuarios incluso están convirtiendo el sistema de bloque reutilizable en patrones falsos. Sin embargo, pocas soluciones podrán competir con tener una verdadera API de patrones de bloques y exponer esos patrones en la interfaz de usuario a los usuarios finales.

La nueva característica de patrones en Gutenberg 7.7 está pensada como un producto mínimo viable y no representativo de cómo se verá la característica para cuando se envíe al núcleo de WordPress. Por el momento, la interfaz de usuario es una nueva barra lateral con una pequeña muestra de patrones para elegir. Sin embargo, los patrones probablemente serán parte del insertador de bloques o se expondrán de manera diferente en el camino. El objetivo es enviar algo que funcione e iterar.

Actualmente, el equipo ha incluido solo cuatro patrones:
Dos columnas de texto
Dos botones
Cubrir
Dos imágenes una al lado de la otra
Si bien estos patrones particulares no son emocionantes, son ejemplos simples para comenzar a probar la función. La gran pregunta: ¿qué patrones debería incluir Gutenberg por defecto? Actualmente hay un boleto abierto de GitHub para discutir e implementar las posibilidades. Hay varias propuestas para patrones comúnmente vistos en la web. Las personas ideales para participar en esta discusión serían los autores de temas porque han estado trabajando estrecha y directamente con los usuarios durante años. Suficientes patrones sólidos en el núcleo, significaría menos trabajo de código en los temas. En lugar de crear docenas de patrones para lograr diseños modernos, los autores del tema podrían centrarse más en el aspecto del diseño del desarrollo del tema.
En las pruebas, la función funcionó sin problemas. Después de seleccionar la barra lateral de patrones, simplemente seleccione el patrón que desee, que se inserta directamente en el área de contenido del editor. Desde ese punto, puede editarlo como cualquier otro bloque.
Los patrones ciertamente harán que el editor de bloques sea mucho más competitivo con los complementos de creación de páginas. Más que nada, permitirán a los usuarios crear diseños más rápidamente que a menudo crean una experiencia demasiado compleja y frustrante.
En este momento, la biblioteca de patrones no está incluida en la actualización de la hoja de ruta más reciente para 2020. Sin embargo, se podría ver que hace una aparición oficial en WordPress este año si el trabajo continúa a su ritmo actual. Eso es meramente especulación, y tal vez una pequeña esperanza, pero esta es una de las características más emocionantes de Gutenberg en las obras.

Quién es Justin Tadlock

Justin Tadlock es desarrollador, diseñador y escritor. Es un ganador del Mes Nacional de Escritura de Novelas. Ha trabajado con WordPress de alguna forma desde 2005. También tiene muchos gatos, pollos y patos.