Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

Share to social media

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:

BLOCK-ART-2-POST-IG-1024x1024 Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)
Girl in duotones

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

cuadricula-basica Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

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-1024x576 Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

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.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido