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.

Screen Shot 2018-03-27 at 17.07.39
My custom Separator shared block.

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.

tweet-embed
Simply pasting the URL to a tweet automatically selects the appropriate “embed” block.

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;

Screen Shot 2018-03-27 at 14.43.44

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):

Screen Shot 2018-03-27 at 14.49.37
Adding a multi-line, empty caption solved my wrapping issue, or so I thought…

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;

Screen Shot 2018-03-27 at 16.18.13

Here’s what I created in the editor;

Screen Shot 2018-03-27 at 16.19.02

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

Screen Shot 2018-03-27 at 16.18.30

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

One Comment

  1. Thanks for taking the time to do this challenge. Here are some updates around a few points:
    – Floating images around text is an issue that for me on one point already is better with the recent work Joen has done, however a constant point and one to consider grid for.
    – Changing a link color: https://github.com/WordPress/gutenberg/issues/6254 is something people want and logged but part of phase 2, Customization.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: