Gutenberg

The UX around composing a blog post has changed significantly over the years. It has moved from pure text based posts to having image embeds, galleries, videos and cards from various websites such as Twitter, Facebook, YouTube etc. The text editors are responsible for good UX and it’s great that they are evolving. This evolution lets users focus on the content and makes it really easy for them to express their ideas.

Medium’s Text Editor

Over the past few years, one of the biggest innovations around text editing has been Medium’s Text Editor. It’s a wonderful editor that looks great. Here’s a couple of screenshots of the editor while editing a story on Medium.com:

Medium’s Text Editor showing text styling options
Medium’s Text Editor showing media embedding options

As you can see, the UI looks clean, minimalistic, beautiful and lets the user focus on what’s truly important – Content.

Now, all of this is great, but, there’s one key thing missing here – Extensibility. Being able to extend the functionality of this editor using plugins makes it so much more powerful.

Gutenberg

WordPress’s new text editor is called Gutenberg. It is fantastic. Imagine having the beauty and functionality of Medium’s text editor, along with support for plugins. That’s Gutenberg.

First off, Gutenberg’s UI/UX is amazing. Composing a blog post in Gutenberg feels really fun. It makes you want to write more. It uses this concept of Blocks. Each Block can be an entity in your content. This basically means that a paragraph, image, image gallery, embedded video, embedded audio etc are all Blocks. Here’s how editing a Block looks like in Gutenberg:

Composing this blog post in Gutenberg

The UI looks great and editing Blocks is really simple. Also, the editor comes with a handy shortcut to insert new Blocks. This is activated by typing in “/” anywhere in the compose region of the editor. Here’s how it looks like:

Gutenberg’s shortcut to access various Blocks

The default editor ships with a lot of Blocks. But, there’s a huge community of developers building awesome new Blocks that can be integrated into the editor by installing them as WordPress plugins.

Conclusion

I’m very satisfied with WordPress’s direction to improve the compose experience. I think this is only going to get better and I can’t wait to see what the community comes up with. If you want to give Gutenberg a try, here’s the live link: https://wordpress.org/gutenberg/