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:
<!-- wp:columns {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"vivid-red"} -->
<div class="wp-block-group has-vivid-red-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
<!-- wp:group {"backgroundColor":"vivid-green-cyan"} -->
<div class="wp-block-group has-vivid-green-cyan-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"vivid-cyan-blue"} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
<!-- wp:group {"backgroundColor":"luminous-vivid-amber"} -->
<div class="wp-block-group has-luminous-vivid-amber-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->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.
<!-- wp:columns {"style":{"spacing":{"blockGap":"5px"}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"id":536,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#1a4548","#ffc7f3"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-sup-izq.png" alt="" class="wp-image-536"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"5px","bottom":"0px"}}}} -->
<div class="wp-block-group" style="margin-top:5px;margin-bottom:0px"><!-- wp:image {"id":538,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#1a4548","#f6ffc7"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-inf-izqda.png" alt="" class="wp-image-538"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"id":537,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","rgb(199, 255, 244)"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-sup-drcha.png" alt="" class="wp-image-537"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"5px"}}}} -->
<div class="wp-block-group" style="margin-top:5px"><!-- wp:image {"id":539,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#1a4548","#d33e4d"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-inf-drcha.png" alt="" class="wp-image-539"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
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.
Responder en Mastodon (requiere usuario en esa plataforma)
Puedes usar tu cuenta de Mastodon para responder a este post de
Copia y pega esta URL (https://www.blogpocket.com/?p=70810) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.
Comparte en Mastodon:
Y aún hay más…
Cómo se hace un sitio web
Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.
Recursos
La lista de recursos recomendada en Blogpocket.
Mi lista de plugins
La lista de plugins de WordPress recomendada en Blogpocket
Suscríbete a la newsletter
En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.
Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.
Deja una respuesta