BlogMay 2020

Reimagining Layouts using Block Editors

By Todd Wilson

I recall the early days of web development where you would build a layout using tables. This forced you to think through designs in a way that allowed you to use the confines of tabular blocks. Ahh the good ol’ days of colspan.

Tabular data is now the primary use for table markup and we are no longer restricted to those limitations for developing page layouts. The ability to absolutely position elements by using CSS has been available to us too.

When it comes to modern page layouts within content management systems, there have been many page builders that allow you to build a page within the browser. I still recall the days of writing a majority of my layout CSS for a page without even looking at the browser and then, having to make adjustments as I go.

There have been some very solid solutions in designing pages within the browser. For instance, WordPress themes have their own page builders such as Divi, Elementor or can be enabled using plugins such as Visual Composer or Beaver Builder. I’ve also been impressed with the progress by Brizy cloud.

As we usher in a new era of layout options, we can start to consider what this might look like within the block editors of WordPress and Drupal. These are the primary content management systems I use today and while we have a lot of alternative static or cloud CMS solutions, I’ll just focus on these two for now.

With WordPress there are a core set of blocks, here’s comprehensive list of all Gutenberg blocks for WordPress. You can start using the latest features of Gutenberg by installing the plugin.

One project I recently came across that I’m excited to start using is called Frontity and these types of tools will enable rapid development for gutenberg-to-react. You can get a better idea of the features within by browsing the docs and feature list.

In regards to Drupal, I’ve been working with our team at GCE to port existing paragraphs to custom blocks using the new Drupal 8 Layout Builder. When you go from paragraphs to the visual layout tools, it’s a real shift from the difficulties of finding the right elements to manage on a given page.

Please note, the Layout Builder is not turned on by default and will require customizations to Drupal. You can read more about the overview here.

All in all, I think it’s a good time to start diving into these tools and finding ways to incorporate them into your Front End stack. Here’s a good video to catch up with the latest on the WordPress block editor:

block editor, block layout, drupal, gutenberg blocks, layout builder