Gutenberg layout blocks: A few of our favourites

So, you’ve probably heard that WordPress has a new block editor called Gutenberg, which gives us the power of blocks, and specifically, some really nice layout blocks!

We’ve been playing around in Gutenberg a bunch over the past few months and have compiled a list of a few of our favourite Gutenberg blocks and why they are great! 

Media and Text Block

Gutenberg Media and text block from the WordPress backend view

The media and text block is 💯.

It is such a common layout used in a site: an image on one side and text content on the other, it’s nice to have this built into WordPress from the get go. It’s simple to use, and plays nice with the other blocks around it.

*Don’t forget to click the ‘Stack on Mobile” setting*. This allows your blocks become responsive!

Media and text block

Gallery Block

The Gallery Block makes it easy to quickly put together a really nice grid image gallery. Within it, you can state:

  • how many columns you’s like the grid to be
  • if images should be cropped (usually yes, if you want the grid to look uniform)
  • Add links to specific images
  • Display the image’s caption overlaid on top of the image ✨
Front end view of the gallery block, including a 3 column grid,  caption text and image cropping

Columns Block

Wordpress backend view of Gutenberg's column block

The column block allows you to easily build out columns and easily edit how many column should be per block.

Once columns are built, you can use whatever Gutenberg block you wish inside of each column which is really helpful. Blocks in blocks in blocks 🝚.

In each column you can change the background and text colour (using and color value you wish!), toggle the drop cap of the columns, and even set the font size!

Spacer Block

Who was sick of pressing enter a bunch of times in the old classic editor, creating empty <p></p> tags to create some breathing room between content on our pages?

The spacer block solved this issue! Using it, we can choose how tall (in px) we might need our space to be. This can help build out those easy, breezy, spacious feeling sites pages.

The introduction of Gutenberg blocks has brought so much more flexibility in the layouts we build in our WordPress sites, allowing us to build some pretty amazing layouts with just a few clicks!

These are just a few highlighted layout blocks you may want to add into your site, and test for in your builds. See the rest of the available Gutenberg blocks here.
Happy Blocking!