Recreating “Are The Teens All Right?” in Gutenberg

In this post I document my experience recreating the Longreads article “Are The Teens All Right?” by Danielle Tcholakian in the Gutenberg editor. In fact I tried to recreate the entire web page, including the header and the footer. I approached this challenge with the assumed mindset of someone fairly new to Gutenberg and recorded my adventure. You’ll find that recording available in a two-part special for your viewing pleasure below;

To add some structure to my ramblings in the video I’ve decided to split my experience in to two categories; things that went better than expected and things that went worse than expected and document them as such in this post.

Things that went better than expected

Let’s start with the good stuff! The following things went really well and exceeded my expectations.

Shared blocks

Being able to mark a block as shared was a really handy feature. I used this to create my own custom separator block and could imagine using this to create things like site headers and footers, plus other re-usable components like post meta, sidebar layouts, newsletter signups, etc.

The flow to create / edit these blocks was straightforward and I appreciated the preview when inserting. It made me wonder about why we don’t offer previews for other potentially ambiguous blocks. The visual treatment (dotted border & icon) felt unnecessary though and disturbed the preview. For a split second I found myself questioning whether that might appear on the frontend.

Reactive embedding

I noticed it was possible to select specific embed blocks but to my delight I didn’t have to go through those steps every time I wanted to embed a tweet (of which there were several in the article I was recreating). All I had to do was paste the URL and the editor took care of everything. Awesome! This actually saved me quite some time.

Content inherits formatting when pasted

Obviously I did quite a lot of copy & pasting of content. I was happy to see that formatting was inherited automatically. Things like text styling, links, etc didn’t need to be added manually.

Things that went worse than expected

There were a lot of smaller issues which I’ll list out below, but ultimately they added up to two key issues.

Key issue the first – lack of control

Despite the Gutenberg editor feeling like a visually focussed page-building tool, I felt that I didn’t quite have the level of control I’d expect from one yet. One negative result of this was that I was unable to replicate fairly simple layout components accurately. A perfect example of that was this section;

To recreate this I ended up using a weird hack of adding an empty caption to the image, with multiple line breaks to increase the overall “height” and stop the content on the right wrapping around it. In the preview this worked, but on the frontend it fell over – more on that later. I was also unable to add a background color to this group of blocks. Here’s what I ended up with (notice my caption hack):

Of course, I wouldn’t employ something like this on my own site. But I can certainly imagine someone doing so. Anyway, the point is that if I can do this in the editor, it should be honored on the frontend.

To add a background color I’d have liked an option to group these blocks, make a shared block from them and then apply some basic styling.

Without getting too far in to the weeds, here are some other occasions where I found myself wishing for more control;

• I wanted to customise the blockquote appearance – not a huge amount, just change the background and the border styling.
• I wanted to make an image full width – that is the full width of the browser window, not the content.
• I wanted to change the appearance of the Separator block.
• I wanted to change my link color.
• Italicized text had a grey background – which was confusing. I wasn’t sure if it would appear on the frontend. I saw no option for it so wondered whether it might have been formatting that came in when I pasted.
• Columns were very tricky to use. I got the hang of it but the spacing and occasional overlap of tools made for an uncomfortable experience.

As I said, all of these limitations added up to an experience that wasn’t befitting what I’d expected. Of course, Gutenberg is brand new and still in development so these criticisms can be taken with a pinch of salt, many of these things are being actively worked on right now.

Key issue the second – preview ≠ publish

I alluded to the second key issue earlier; what I saw in the editor did not always match the published article. Sometimes to quite dramatic effect. It was disheartening to see the content I’d painstakingly laid out not faithfully represented on the frontend. Even subtle things like seeing a serif font in the editor and a sans-serif font on the frontend made for a significantly disjointed experience.

I now circle back to my image caption “hack” which enabled me to lay things out how I wanted to in preview mode. But the frontend representation was completely different. To make matters worse, I’d used this “clever technique” multiple times in my article which magnified my disappointment further after publishing. As another example, I tried to replicate this component;

Here’s what I created in the editor;

And here’s how that looked when I hit publish;

Regardless of whether I used a hack or not, if Gutenberg doesn’t offer 1:1 parity between the preview layout and the frontend layout it is going to end up frustrating people at one point or another.

In summary

To summarise those two points into a single sentence; Gutenberg looks and feels like a visual editor in many respects, but ultimately flatters to deceive – on several occasions WYSINWYG – what you see is not what you get.

Of course I know one of the biggest challenges in providing alignment between the back and frontend is down to themes, and that very few themes have integrated with Gutenberg as yet. But it is going to be down to Gutenberg to make that integration air-tight and easy to build. Luckily some work has been done in that regard already and I can’t wait to try this again in the future with a Guten-friendly theme.

In conclusion

This was a fun exercise and certainly helped me build empathy with site owners and authors who are using Gutenberg today. It’s still a little rough around the edges but great progress is being made every week in improving it. For me, the next big step forward will actually be adoption from theme developers. Being able to offer 1:1 parity between the editor and the frontend will be absolutely huge for Gutenberg!

You can already see the enormous potential and how empowering this tool will be. A visual preview and overall editing experience is such a joy to use and something WordPress has sorely needed for a long time.

I’m so exciting to be along for the ride!

#gutenberg