Sorry! Internet Explorer is not supported on this site. Please view on Chrome, Firefox, or Edge.

Having fun at Zao is one of our values. We’ve put limited animated flourishes throughout our site to communicate our love of levity. We also recognize that onscreen movement is not fun or possible for everyone. We've turned off all our animations for you per your browser's request to limit motion. That said, we don't want you to miss out on the party.

Here's a funny joke to enjoy!

Why don’t ants ever get sick?

Because they have little anty bodies.

Replacing a WordPress Layout with Gutenberg

We first wrote about Gutenberg over a year ago. My, how things have changed since then! As a random aside, since that previous blog post, it would appear that approximately 14 developer years have gone into the development of Gutenberg. A sum total of 22 years of effort. Amazing.

We’ve used Gutenberg on a number of different projects – experimenting with custom blocks, page building, and more generic content publishing. We’ve gotten familiar with the areas in which it’s still quite painful to use – as well as the areas where it shows a lot of potential. 

Not too long ago, I decided to live-tweet my experience converting an existing client’s homepage into a Gutenberg-ized home page.

Narrator: Lots of people were interested.

I won’t re-hash the entire Twitter thread. It was…long. Make yourself a cuppa tea and go give it a look, I’ll wait.

tl; dr: Rebuilding a layout in Gutenberg is totally doable, but not exactly for the faint of heart. We’re starting to get more and more of our clients asking us about Gutenberg – and specifically for this type of project. They’re really attracted to the promise of Gutenberg – standardized layout components that give them more control over their site and inch them closer towards a true WYSIWYG experience. (P.S. if that’s you, get in touch!)

So where does Gutenberg currently deliver on the promise and where does it fall short? Let’s start at the beginning.

The Beginning

I don’t think every site is a good candidate for this type of project. Not today, anyway. I’m comfortable saying that Gutenberg can be a great fit for projects that you start from scratch and may be a good fit for retro-fitting some projects. We felt comfortable using it on this particular project due to the fact that the existing homepage was fairly simple, and really already given to a block-based way of doing things. If it was a more complex home page – we may have given a second thought to the project.

In addition to it currently being well-suited (in my opinion) to fairly simple layouts, my experience was less than stellar when it came to getting the latest version of Gutenberg on the client’s site.

It ended up being due to a few different plugin conflicts – but I don’t know how in the world the average WordPress user who updates to WordPress 5.0 is going to know which plugin to deactivate to get back to their editor.

The Build

Once we got building, things went a bit more smoothly. I didn’t face many bugs per se – just a lot of things I wished were maybe a little more fleshed out, a little more powerful, a bit smoother to use, etc. A great example is the Cover Image block.

Cover Image Block

I think something like a Cover Image block is SUCH a common use case, that as a developer, I’d want it to be relatively flexible. As is, however, you can really just add a text/link and that’s it. I think headings, sub-headings, paragraphs, call-to-action buttons – those would all be very common uses for this type of block – but none of that is currently built into the Cover Image block. In the near future, for other similar projects we’re working on, we’ll likely just create custom blocks.

Columns Block

Another block we got a ton of use out of was the Columns block. Combining Columns and Cover Images allows our client to create really lovely landing pages for their product categories. Before Gutenberg, the client having this kind of power and control wasn’t feasible in WordPress without a separate custom page builder. 

The Columns block, however, was also not without its own limitations.

It would be pretty incredible if Gutenberg were able to detect the declared maximum width (for the alignwide class) and build a “grid” system of sorts, that you could drag columns and snap to the grid. The issue was pretty easy for me to fix, as a developer, but required some training for the client.

It’s pretty amazing, actually, how far many clients would be able to go in their own page building experience with just Columns, Cover Images, Media & Text, and Buttons. Four Gutenberg blocks and they’re able to accomplish 50% of the work they might have previously hired a web developer to do. This shouldn’t scare my fellow developers though – this frees us up to do work that is far more rewarding!

The Result?

The end result on this rebuild was ultimately a win for us (more exposure to the pain points and potential of Gutenberg is a good thing for us, and our clients!) and our client. I’ll let Molly, of Ro Sham Beaux, tell you herself:

Gutenberg has given our team the ability to take our website into our own hands. Working on a website can be extremely daunting when everything is created in code and as a consumer, you have limited access to the changes you are able to make. With the new power builder, our team has access to creating new pages, changing out images, adding links to other pages and creating a more integrated website without contacting a qualified developer. This will help us grow our online presence as we can easily swap out photos, text and links to post online sales or introduce new product collections.

The accessibility and ease of Gutenberg has opened the possibilities of what we are able to create with our site. Our business is constantly changing and the resources we need to provide our customers with online must always be updating. Having the access to design and create customized pages on our site will be such an asset moving forward

Molly Moore, Ro Sham Beaux

We’re excited about the future of WordPress and Gutenberg. As it continues to mature, it’s going to a massive help to content publishers everywhere, and our clients will continue to reap the benefits of a re-imagined publishing interface.

Want to bring your website into the future of WordPress? Get in touch!

Leave a comment

Your email address will not be published. Required fields are marked *