In the difference between promise and present

Something I’ve been thinking about lately is the difference between promise and present. The difference between expectations, hopes, dreams, visions — the optimistic future — and the “what needs to get done today to get things moving and building a solid foundation.” It’s partly on my mind because I’m a person excited about the future of WordPress with Gutenberg who’s also trying to build empathy with people new to it. People who might have their own hopes and dreams about what Gutenberg is, should be, and could be. Whether you’re trying to build an amazing product, or just trying to be a better person, working on empathy-building is never going to steer you wrong. Spoiler alert: that’s what I’m trying to do in this post.

Here’s what I’ve been up to..

Like many other Automatticians I took a shot at quickly recreating a Longreads article with Gutenberg — in about 20 minutes. It’s a good approximation for busy individuals. “It’s only 20 minutes” is hard to say no to and at the same time you’ve probably been like me and said, “I can’t even spare 20 minutes to update my site.” You should be able to copy-paste a post you wrote somewhere else and get it up in about 20 minutes, right?

So what’d I learn? Well, Gutenberg is pretty easy to use! It can also be pretty frustrating to use in some places. That’s any software. And I think it was finding myself somewhere in between the “promise” of Gutenberg and the “present” of Gutenberg that wound up frustrating me. So, it was more me frustrating myself versus Gutenberg frustrating me. I’ll try and explain.

What’s easy to use? If you want to just (as Gutenberg designer Joen Assmussen put it once) “write, write, write” I have fantastic news for you. Gutenberg just works. Knowing all the power under the hood while seeing how it just gets out of my way when I’m just typing away and writing is pretty incredible. Don’t be fooled by hindsight when trying to judge it. This could have gone off the rails fast but Gutenberg really nails a post editor experience. It’s smooth and easy to write in. For a tool with such deep roots in blogging and a publishing-focused mission this is crucial. And the copy-paste! I can write, write, write somewhere else, paste in my work, and now the images and text are blocks I can rearrange. It just works. Hats off, glasses raised, and congratulations to everyone working on this. WordPress is going to have a “content block” editor and a strong foundation for the future.

Of course, if everything “just worked” I wouldn’t have much to write about. It was envisioning the future, that “promise” of Gutenberg, where things began to get strange for me in this exercise. One of the things I tried to do was recreate everything that I was seeing over in Longreads. That turned out to be tricky.

Check out the video below if you’d like to see me use Gutenberg at warp speed (featuring the music of Broke For Free) …

… or just read my notes below on where I got hung up.

I was reminded that the title isn’t a Block

The title isn’t a block but it looks like a block. It even has a Block tab in the Editor’s inspector panel — that tells me what I’ve selected isn’t a block. To get the layout I want for this page I would like the text in this block to be centred but I can’t do it. I know why I can’t do this. Control for this item remains in the theme itself. Control also remains over the position of that subtitle.

In the original article it’s below the title and above what is sometimes called “post meta” (usually who wrote the article and when — also here, the time it takes to read.)

Being able to edit those things means, to someone familiar with WordPress, “editing the theme.” I understand why I can’t do that yet. Taking part in this exercise left me with a feeling that was maybe closer to the feeling a new user might have, “I just want to edit my page.” I wasn’t thinking about what controlled what or why. I just wanted to get something done and couldn’t do it.

Block design controls weren’t strong enough for me

I ran into trouble creating the Longreads callout with basic Gutenberg tools. Here’s the original …

And here’s what I made …

A pretty stark difference. I could have written Custom CSS to fix this but didn’t think it was being empathetic enough. I remember my first exposure to CSS. I invested a lot of time trying to understand it and it wasn’t easy at first.

If you watch the video above you can see me jump around trying to solve this by highlighting a line of text and trying to change it’s size. That didn’t work. You can see me try and change the text colour. That didn’t work either. You can see my try and fail to get closer by changing both those attributes in two different blocks — one for each line of text. That didn’t work.

I didn’t try and add a graphic but, again, just using the basic tools I provided I don’t think I could have done this.

Also, despite knowing that the front-end of my site would look different than the view in the Gutenberg editor I still got hung up on the difference between the front above and what I was editing …

Which brings me to the next thing that caught me up …

I didn’t have a Gutenberg theme

Boy, would I have liked a Gutenberg theme. That would have been really helpful. If the theme had styled the editor to match what I was seeing in Gutenberg I would have been much less surprised. And this is coming from a person who has never liked themes overriding the Editor styles. I’ve always thought it was too confusing to mix the front-end with an editor view. But here where the editor view is starting to control the fundamental _blocks_ of a page it’s like a switch has been flipped in my head. My expectations have changed.

Also, if you watch the video you’ll see that I removed the sidebar from my page in order to get a full-width layout. I’m pretty sure most people aren’t going to know that’s possible. But even though I did that I still wasn’t getting full-width images. I can see this being an issue for people who aren’t using a Gutenberg-ready theme for their first experience. The editor _feels_ like it’s going to deliver a full-width experience but it’s going to need the help of a theme to deliver that.

(Interested in learning more about making themes for Gutenberg? The Automattic theme team can help you out.)

Combining blocks didn’t work as expected

I wasn’t even sure if I could do this but I thought I’d try shift-selecting two photos I’d copy-pasted into the editor, to make a Gallery Block. To my surprise that was an option! Unfortunately, and again to my surprise, selecting that caused my images to disappear and replaced them with an empty Gallery Block. I’d have loved to have seen those selected images added to the Gallery.

UI appearing and disappearing

It had been a while since I’d used Gutenberg and I was surprised by all the UI everywhere. Most especially the tabs that appear on hover …

When I work in the editor I’m constantly moving up and down, moving my mouse around, looking and thinking. During this process in Gutenberg there was a lot of UI appearing and disappearing. Including the block-description tabs. I’m probably a power user but I felt like I could tell I was looking at a paragraph and didn’t need a tab to help me. (Perhaps it could just be noted for selected blocks in the block selector?)

Seeing promise

I felt like I was coming up to the edges of what Gutenberg could do here. I called it “getting strange” above. You could call it frustrating — and some people probably do — but I’m not sure it’s the best word. What it was more like was “living in the difference between promise and present.” This is actually a good feeling to have. It’s one of the best feelings to have.

When WordPress started out there were no pages. There was only one theme. No tags. No codex. Only a few dedicated people who believed in it. Now it’s powering about 30% of the websites you and your family visit everyday. It had an incredible promise. Every contributor saw some part of that potential and it drove them to work on it mornings, evenings, and weekends when they surely could have been doing something else. Some of those people began championing it at work and started getting paid to work on it. Some of them even founded companies.

That’s what seeing promise can do. And here it made me realize that where I was feeling frustrated, where things were “getting strange,” it was really me just seeing promise pointing me at something positive. Bloggers and writers of the world, you’re about to get a great new post editor with a lot of potential. There might be some hiccups, frustration, and strangeness along the way but with it comes the promise of a standardized website editing tool. A new way of interacting with and building things with WordPress for 30% of the web and beyond.

That’s amazing. I can’t wait.

Featured image: Far, far away Soria Moria Palace shimmered like Gold by Theodor Kittelsen.