Page Builders

Before looking at the solution that we've embraced, it's worth reviewing some older attempts to solve the same problem.

By far the most common page builder that we've been asked to rescue is WP Bakery, formerly known as Visual Composer. WP Bakery sits on top of the usual Wordpress admin panel and gives users the power to drag and drop elements anywhere on the page: including, headings, text, images, buttons, etc. Whilst the editor worked well and had the potential to save clients time and money, the resulting HTML markup was bloated and complex. At first, this issue is invisible but, over time, sites quickly become visually messy and inconsistent. And, because the markup is inconsistent, it's impossible, or at least costly, for developers to write the generalised style rules required to tidy up the site. Often as not, clients ended up commissioning a new site build and moving away from WP Bakery.

Likewise, we've seen some excellent creations made on online site builders like Wix, but, at the point that the client tried to scale them up, they became unwieldy and unsuitable.

Gutenberg

First released in 2018, Gutenberg introduced a new publishing paradigm as Wordpress's first block editor. As the name suggests, content creators were now able to approach page building modularly, by compiling a page from blocks - pre-designed chunks of layouts. These could be arranged and rearranged intuitively, resulting in unique, media rich layouts which, nevertheless, maintained strict stylistic rules such as spacing, fonts, and other brand guidelines.

At Lunar, all of our builds come with a pattern library - an auto-generated page that shows all of the available blocks and their variations. Better still, if you commission a new block for, say, a blog post, it becomes available site-wide. Gone are the days when each post type had a set template; Gutenberg sites become more and more flexible as they age - yet their growing library of blocks maintain consistency and house styles. And, at the point that you require a brand refresh, the tidy underlying code is simple to apply broad style rule changes.

The Editing Experience

Enough with the words, if you're a client reading this, or another developer wondering whether it's worth adopting a new technology, all you want to see is what the editing experience and resulting pages look like.

The Backend

On first creating a page or post, the Gutenberg editor, whilst friendly, differs from the classic Wordpress editor.

By clicking the plus button, you'll be shown a library of available blocks.

Let's start with a Page Hero - a bespoke block with a title, text, and background image. As you can see in the images below, the content tab contains fields for you to input the data, whilst the settings tab allows you to configure it in different ways:

This simple editing experience leads to a beautiful, consistent block:

We can keep adding, arranging blocks in any order and layout. For example, let's try a more complex block layout with a title, subtitle, images and buttons. The editor can change the order and inclusions of items and their colour palette, but the block configuration keeps everything consistent and on-brand:

Blocks can range from simple text and image combos to video players, sliders, and forms.

Final Thoughts

After working with Gutenberg for a number of years, we've been impressed by the longevity and flexibility of the sites we've built. Clients are able to continuously expand their palette of layouts without incurring growing technical debt or template complexity - resulting in future-proof, continuously fresh looking sites.

If this has piqued your interest, take a look at some of our previous projects that use Gutenberg: for example, Kocho or Verne Global.

Finally, the team here at Lunar are currently building a product that combines the best of both visual page builders and block builders like Gutenberg. It creates a UI led editing experience powered by the full flexibility of Gutenberg and React. More on this to come soon!