Gutenberg 12.7 agrega selección de bloques múltiples en la vista de lista y brinda soporte de margen a los bloques de grupo

Han pasado otras dos semanas y hay otra actualización del complemento de Gutenberg en los libros. Esta versión no tiene tantas funciones como la anterior, pero se siente sólida en general. Además de un problema de última hora, la versión 12.7 incluye varias mejoras interesantes.

La última actualización incluye algunos trabajos iniciales para un nuevo motor de estilo. Este es un proyecto a más largo plazo que debería mejorar los estilos de bloque de guardado y renderizado.

Los editores de plantillas y sitios deben mostrar patrones sobre bloques en el insertador rápido bajo ciertas condiciones, como en el nivel raíz de una plantilla. Sin embargo, no pude ver esto en acción. Es posible que deba actualizar mi instalación.

El bloque Columnas también admite opciones de ancho, estilo, color y radio del borde. Espero que este sea eventualmente el caso para todos los bloques.

Selección múltiple en vista de lista

Los usuarios ahora pueden seleccionar varios bloques en la vista de lista cuando se selecciona la tecla Shift . Una vez que mantienen presionada la tecla, los usuarios pueden usar el mouse para hacer clic en otros, agregarlos o eliminarlos. Las teclas de flecha arriba/abajo son una alternativa al uso del mouse.

La mejora también permite a los usuarios arrastrar y soltar el grupo de bloques seleccionado.

Imágenes rotas

Bajé la guardia. Me sentí cómodo con WordPress y Gutenberg manejando parte de ese trabajo CSS fundamental que siempre había incluido en temas anteriores. Las cosas parecían ir tan bien.

Gutenberg, tú y yo tuvimos una buena racha en la que no rompiste nada. Ahora es el momento de restablecer el viejo contador de "liberaciones sin incidentes".

Anteriormente, la hoja de estilo de la biblioteca de bloques predeterminada proporcionaba estilos de respuesta básicos para las imágenes. Ese CSS ahora solo apunta a las etiquetas <img> si incluyen wp-image- en una clase. Esto es particularmente problemático para las imágenes en algunos patrones de bloques. El caso puede ser el mismo para otras instancias de imagen.

El selector anterior era demasiado amplio y rompía imágenes en complementos de terceros.

El mejor curso de acción es que los autores de temas incluyan el siguiente CSS para las imágenes:

 img { max-width: 100%; height: auto; }

Márgenes de bloque de grupo

Personalizar los márgenes es casi sinónimo del término "diseño web". El bloque Group, el contenedor insignia, ha carecido de soporte para el control de márgenes hasta ahora. Algunos han sorteado esta limitación usando un espaciador, pero solo aumenta el espacio entre bloques.

La mayoría de los problemas han girado en torno a la reducción de márgenes. Los diseñadores de temas a menudo han necesitado emplear soluciones alternativas, un problema que Nick Diego mencionó en el ticket:

Los desarrolladores de temas (incluido yo mismo) están recurriendo a "clases mágicas" para poner a cero o modificar los márgenes en los bloques. Permitir que los temas opten por el soporte de margen de grupo proporcionará una mayor flexibilidad y disminuirá la dependencia de CSS/clases personalizadas en la hoja de estilo del tema.

Todavía falta el soporte de márgenes para muchos otros bloques, incluidos los párrafos. Los usuarios siempre pueden envolverlos dentro de un Grupo y modificarlo por ahora.

Transformaciones de bloques Mantener clases

Gutenberg 12.6, lanzado hace dos semanas, vio mucho trabajo para mejorar las transformaciones de bloques, una función que permite a los usuarios cambiar de un bloque a otro. Una de las principales mejoras en la actualización anterior incluía mantener el tamaño de fuente y las opciones de color.

La versión 12.7 agrega clases CSS personalizadas a la mezcla. Esto incluye aquellos usuarios agregados manualmente y aquellos agregados por el mecanismo de estilos de bloque personalizados.

La ventaja de mantener clases de estilo de bloque personalizadas es que el nuevo bloque mantiene el estilo seleccionado si es compatible. Lo malo es que se convierte en una clase chatarra si no es así.

Todavía faltan algunas opciones que me gustaría que se mantuvieran mediante la transformación de bloques basados ​​en texto. En particular, mantener la misma alineación del texto ayudaría con mi flujo de trabajo.

Los temas pueden registrar patrones desde el directorio

Gutenberg 12.7 permite a los autores de temas cargar patrones desde el directorio de patrones de WordPress.org para sus usuarios. Los añadidos aparecerán en sus respectivas categorías en el insertador.

Actualmente, no existe un método para resaltar los patrones seleccionados, y solo aparecerán según el orden en que se registraron. Desafortunadamente, los patrones destacados de WordPress.org aparecen más arriba en la lista, incluso si no fueron seleccionados por el tema.

Esta es una primera iteración sólida. Obtenerlo ahora permitirá a los autores del tema proporcionar comentarios y colaboradores para construir sobre la base.

La guía práctica de theme.json incluye nueva documentación para registrar estos patrones.

Envolturas de alineación eliminadas

No es ningún secreto que soy un fanático de los bloques. Sin embargo, ha habido un problema de larga data que casi me ha hecho querer deshacerme del sistema. De hecho, dejé de desarrollar un tema de bloque gratuito por completo el año pasado en gran parte debido a este problema.

Gutenberg 12.7 elimina el envoltorio <div> adicional para bloques anchos y de ancho completo en el editor, al menos para temas que admiten la función de diseño. Este elemento envolvente creaba un conflicto entre los diseños de la parte trasera y delantera anteriormente. En algunos casos, los autores de temas no podían diseñarlos de forma coherente.

Por ejemplo, si el autor de un tema quería dar espacio adicional a un bloque hermano (uno que sigue a otro), era imposible orientarlo en el editor con CSS. El contenedor adicional significaba que ya no eran hermanos en la estructura del documento.

La característica blockGap más reciente, introducida en WordPress 5.9, alivió los problemas relacionados con el espacio hasta cierto punto. Fue suficiente alivio tolerar el sistema roto, sabiendo que algunos diseños aún eran imposibles.

Hoy marca el comienzo de un nuevo mundo de posibilidades para los diseñadores. Este es un obstáculo que estoy feliz de ver dejado atrás. En su mayor parte, solo quiero revisar e implementar varias ideas antiguas.