Ahora puedes convertir tu WordPress en un museo del arte de bloques. Anne McCarthy anunció el lanzamiento del Museo de Block Art. El proyecto consiste en mostrar piezas de arte construidas exclusivamente mediante bloques del editor de Gutenberg. El Museo del Arte de Bloques no está abierto al público pero las piezas se pueden compartir mediante el hashtag #WPBlockArt.
Como ejercicio práctico, hemos realizado la siguiente pieza de #WPBlockArt a partir de una imagen descargada de Canva Pro. Mediante la app Skitch (Mac) obtuvimos los cuatro fragmentos de la foto y los subimos como archivos independientes a la biblioteca multimedia. Hay apps para móviles que realizan el split de una imagen automáticamente.
La instalación de WordPress, en Local, poseía WordPress 5.9.2 con el tema de bloques Twenty Twenty Two más el plugin Gutenberg 12.7.1 instalado.
Para aplicar estilo a las imágenes se utilizó la opción de «Duotone». Y este fue el resultado:
A continuación, se explica cómo construir una rejilla utilizando el bloque de columnas y el bloque de grupo. Al final, podrás copiar el código para que puedas ejercitarte y construir tus propias obras de #WPBlockArt.
1. Cómo hacer una cuadrícula básica con los bloques de columna y grupo
El bloque de columnas permite implementar fácilmente una rejilla. Para simular las filas, inserta un bloque de grupo debajo de otro dentro de cada columna. Para modificar la altura de cada fila, si no está determinada por una imagen ( por ejemplo ), usa el bloque espaciador. Para reducir o ampliar la distancia entre columnas, modifica el valor del parámetro «Espaciado del bloque» dentro de las dimensiones del bloque de columnas. La distancia entre filas, necesitará también del bloque espaciador.
La ventaja de emplear el bloque de grupo, dentro de las columnas, es que se les puede aplicar un color (incluso con degradado), un borde e insertar dentro cualquier bloque.
No se te olvide configurar «Apilar en móvil» en el bloque de columna para que el diseño se vea bien en los dispositivos móviles.
En el GIF, se muestra cómo se lleva a cabo la creación de una rejilla de 2×2 con cuatro colores diferentes. Trata de cambiar tú, las celdas de color por imágenes de la biblioteca de medios. ¿Las imágenes tienen las mismas dimensiones?
Copia el código para ejercitarte:
[snippet slug=cuadricula-2×2 lang=abap]
2. Código completo de la pieza «Girl in duotones»
Copia las siguientes instruicciones en el portapapeles y pégalo en el editor en modo código, para reproducir la obra «Girl in duotones».
El espaciado entre las imágenes de cada fila, se realiza aplicando el valor de 5px al espaciado del bloque, dentro del apartado «Dimensiones».
Para introducir un espaciado entre las dos imágenes de cada columna, en lugar del bloque espaciador se utilizó el valor de 5px en el margen superior, dentro del apartado «Dimensiones» del bloque de grupo, correspondiente a la imagen inferior.
[snippet slug=girl-in-duotones lang=abap]
FSE NEWS son posts rápidos con tips, tools y noticias sobre Gutenberg y Full Site Editing (FSE). Consulta la página principal para acceder a todos los posts de FSE NEWS. Consulta el FAQ para aclarar los términos generales que se utilizan.
Deja una respuesta