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.

Rebuilding a client’s home page layout in Gutenberg today.

Considering live-tweeting the experience – anyone interested?

— Justin Sainton (@JS_Zao) October 26, 2018

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

Back to sleep.

So, for frame of reference, here’s a shot of the existing site pic.twitter.com/WEUsoUnP5o

— Justin Sainton (@JS_Zao) October 26, 2018

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.

Fatal error: Cannot declare class WP_REST_Blocks_Controller, because the name is already in use in /app/public/wp-content/plugins/gutenberg/lib/class-wp-rest-blocks-controller.php on line 0

Cool cool cool.

— Justin Sainton (@JS_Zao) October 26, 2018

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.

Another thing – more about the cover image with the text – it would be cool to add multiple elements to the cover image – not just a text/link.

Maybe a totally different kind of block?

— Justin Sainton (@JS_Zao) October 26, 2018

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.

Hmm, yeah, it feels like this is a real limitation of the columns block concept. You really do need the concept of “colspan” like you have in tables.

— Justin Sainton (@JS_Zao) October 27, 2018

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.

Were there hiccups, bugs, things that didn’t work how I wanted or expected them to, some hard-starts and LOTS of potential that isn’t yet delivered on yet?

Absolutely.

But is this going to be 1,000% better for me AND my client? You betcha.

After today, still pro-Gutenberg.

— Justin Sainton (@JS_Zao) October 27, 2018

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