Gutenberg 12.1 corrige el cambio de diseño del anexador de bloques, agrega vistas de lista de plantillas y mejora los estilos globales

Hoy temprano, Gutenberg 12.1 aterrizó en el directorio de complementos de WordPress. La última versión incluyó muchas mejoras en la experiencia del usuario, incluida una corrección para el cambio de diseño del agregador de bloques, nuevas funciones de estilos globales y una vista de lista de plantillas mejorada. Los autores de temas también tienen una nueva bandera para habilitar todas las herramientas relacionadas con la apariencia.

El lanzamiento de WordPress 5.9 estaba programado para hoy, pero se pospuso hasta el 25 de enero de 2022. Los colaboradores necesitaron más tiempo para perfeccionar el editor del sitio y las herramientas relacionadas incluidas junto con el lanzamiento. Hasta el momento, están utilizando el tiempo adicional para corregir errores y crear una mejor experiencia de usuario en general.

No más cambios de diseño

Si este fuera el único cambio en Gutenberg 12.1, habría sido el usuario más feliz del mundo. Afortunadamente, hay otros elementos agradables de tener, pero mi mayor motivo favorito en tres años de usar el editor de bloques ahora se ha solucionado.

El agregador de bloque (esos pequeños botones + ) en el lienzo de contenido ahora se muestra usando una posición fija. Esto significa que cuando selecciona bloques, particularmente aquellos anidados dentro de otros, la pantalla ya no rebota, cambia el diseño o deja espacios en blanco en una sección perfecta.

Sé por hablar con otros que esto ha sido un punto doloroso al construir diseños complejos en el pasado. Para algunos, no usarían el editor de bloques en absoluto porque era muy irritante. Si caes en este campamento, vale la pena intentarlo una vez más. Es una mejora notable en la experiencia del usuario.

Mejoras de estilos globales

Los usuarios ahora pueden definir degradados personalizados a través de la sección de la paleta de colores en la barra lateral de estilos globales. Estos estarán disponibles en todo el sitio y no están vinculados al tema.

La paleta también muestra colores bitono bajo la misma sección de degradado. Sin embargo, todavía no hay una opción para crear filtros de duotono personalizados. Es una sección de sólo lectura.

El panel de estilos globales también divide las opciones de tipografía entre texto y elementos de enlace, lo que abre la puerta a otros elementos HTML en el futuro.

Los usuarios probablemente no deberían cambiar esto por enlaces. En cambio, generalmente deben coincidir con el texto circundante. Si obtenemos decoración de texto u opciones similares en el futuro, la separación podría tener más sentido. Sin embargo, alterar configuraciones como el tamaño de fuente o la altura de línea probablemente sea perjudicial para el diseño.

Plantillas y vistas de elementos de plantilla

Gutenberg 12.1 presenta una nueva vista de lista de plantillas y elementos de plantilla desde el editor del sitio. La interfaz de usuario para esta característica ha saltado en las últimas versiones de complementos. La lista estuvo disponible a través del panel deslizable izquierdo en el editor durante meses. Luego, se eliminó por completo en 11.9. Reapareció entre esa versión y la 12.0.

El panel ahora se ha reducido para incluir tres enlaces para Sitio, Plantillas y Elementos de plantilla. El primer enlace abre el editor del sitio. Los otros muestran tablas de plantillas existentes.

Cambiar entre las pantallas se siente lento en este momento. Sin embargo, esta es la versión 1.0 del editor de sitios que verán los usuarios de WordPress de todo el mundo. Es probable que cambie con el tiempo. “La iteración actual del diseño favorece la simplicidad y la facilidad de uso”, escribió Riad Benguella en la publicación del anuncio. "Las iteraciones que implementan la navegación del lado del cliente y la vista de mosaico podrían agregarse en el futuro".

No parece haber una forma de agregar plantillas personalizadas, como una categoría o un archivo de autor. Al hacer clic en el botón "Agregar nuevo" se presentan opciones para una página principal y una plantilla de búsqueda cuando se usa el tema Twenty Twenty-Two.

Sin embargo, agregar una nueva pieza de plantilla es un proceso mucho más refinado. Después de hacer clic en el botón para crear uno, a los usuarios se les presenta una superposición y un formulario como se muestra en la siguiente captura de pantalla:

Los usuarios pueden darle un nombre personalizado y elegir entre tres áreas permitidas: general, encabezado y pie de página. Después de crear una nueva pieza, los usuarios acceden al editor.

Al volver a ver la lista de piezas de la plantilla, muestra el usuario que la creó y tiene un menú desplegable de opciones (botón de puntos suspensivos). Actualmente, la única acción es eliminar la pieza.

Me encantaría ver que las plantillas de nivel superior reciban el mismo tratamiento que las partes de la plantilla al crear una nueva. Si bien existen algunas ligeras diferencias entre ellos, ambos son plantillas al final del día. La experiencia del usuario se beneficiaría si los procesos de creación coincidieran.

La creación de plantillas personalizadas fuera de la lista predeterminada desde esta pantalla también ayudaría a los diseñadores a crear temas visualmente desde el editor del sitio.

Reserva de navegación vacía

La última versión introdujo una alternativa para el bloque de menú de navegación vacío. En última instancia, si no se encuentra ningún menú, se mostrará el bloque Lista de páginas. Dependiendo de cuántas páginas tenga el sitio de un usuario, esto puede salirse de control rápidamente, como se muestra en la siguiente captura de pantalla de Twenty Twenty-Two:

Los desarrolladores de temas pueden sobrescribir este respaldo a través del gancho de filtro block_core_navigation_render_fallback al devolver un valor false o un conjunto de bloques secundarios válidos para el elemento principal de navegación. Autores de temas, los invito a hacer un uso generoso de este filtro gancho.

Elementos de tema de bloque dignos de mención

Para los desarrolladores de temas de bloques, se ha cambiado el nombre de las carpetas estándar relacionadas con la plantilla. Los nombres antiguos seguirán funcionando, pero los autores deben actualizar lo siguiente en sus temas:

• /block-templates renombrado a /templates
• /block-template-parts renombrado a /parts

Este cambio limpia el directorio de temas de nivel superior, pero también crea un camino hacia una mayor estandarización en el futuro. Ya hay un ticket abierto para /patterns y es posible una carpeta /styles .

Gutenberg 12.1 también presenta una marca de herramientas de appearanceTools para theme.json , lo que permite a los autores de temas habilitar la compatibilidad con todas las opciones actuales y futuras de borde, color, espaciado y tipografía. Cubrí esto con más detalle en la publicación de Gutenberg 12.0, que había marcado erróneamente la función como incluida en la última versión.