Turn your WordPress into a block art museum (how to implement a block grid)


Now you can turn your WordPress into a block art museum. Anne McCarthy announced the launch of the Museum of Block Art. The project consists of showing pieces of art built exclusively using blocks from the Gutenberg editor. The Block Art Museum is not open to the public but pieces can be shared using the hashtag #WPBlockArt.

As a practical exercise, we have made the following piece of #WPBlockArt from an image downloaded from Canva Pro. Using the Skitch app (Mac) we obtained the four photo fragments and uploaded them as separate files to the media library. There are mobile apps that split an image automatically.

The WordPress installation, on Local (by Flywheel), had WordPress 5.9.2 with the Twenty Twenty Two block theme plus the Gutenberg 12.7.1 plugin installed.

To style the images, the “Duotone” option was used. And this was the result:

Girl in duotones (Block Art experiment)

Here’s how to build a grid using the column block and group block. At the end, you will be able to copy the code so you can exercise and build your own #WPBlockArt works.

1. How to make a basic grid with the column and group blocks

The column block allows you to easily implement a grid. To simulate rows, insert one group block below another within each column. To modify the height of each row, if it is not determined by an image (for example), use the spacer block. To reduce or widen the distance between columns, modify the value of the «Block Spacing» parameter within the dimensions of the column block. The distance between rows will also need the spacer block.

The advantage of using the group block, inside the columns, is that you can apply a color to them (even with a gradient), a border and insert any block inside.

Don’t forget to set «Stack on mobile» in the column block so that the layout looks good on mobile devices.

In the GIF, it is shown how the creation of a 2×2 grid with four different colors is carried out. Try changing your color cells to images from the media library. Do the images have the same dimensions?

Copy the code to exercise:

[snippet slug=cuadricula-2×2 lang=abap]

2. Complete code of the piece «Girl in duotones»

Copy the following instructions on the clipboard and paste it in the editor in code mode, to play the piece «Girl in duotones».

[snippet slug=girl-in-duotones lang=abap]