There has been a lot of excitement building in the WordPress community about a plugin called Gutenberg. The plugin offers a new publishing experience that promises to transform the way people create content and build websites. With the first official release around the corner, a challenge was issued for all the designers at Automattic to try it out and share their thoughts. As part of the challenge, we were asked to replicate any post featured on the Editor’s Picks of the Discover Blog with Gutenberg. I picked Evergreen Ideas and Rethinking the Meaning of Content by Maria Popova because I liked its featured image.
First impressions
Eager to get started, I installed the plugin on one of my existing sites thanks to the WordPress mobile app. The Gutenberg editor wasn’t available in the app yet so I had to switch over to the browser on my phone to create my first post. Having worked with lots of different content management systems, I immediately noticed how simple Gutenberg looked. Most other editors bombard you with palettes, buttons, or fields when you open them up. Gutenberg on the other hand greets you with a friendly prompt to “Write your story”.
Poking around
I typed two paragraphs and then wanted to add an image but it wasn’t immediately clear to me how to do that. Nothing changed in the interface after I started typing so I then tried to press the big plus button at the top left of the screen but that didn’t do anything either. My next guess was to tap one of the paragraphs and when I did, a new set of controls appeared. In addition to some text formatting options there were also buttons to move, edit, delete, or add new content.
After I pressed the add button, a modal filled the screen and presented me with a group of suggested blocks. Some of the choices included a heading, paragraph, image, quote, and gallery. I tapped the image and a new block was added to my editor with options to add an image from the media gallery or upload a new one The process felt seamless and I was happy to see that I could upload my own image because it wasn’t very long ago that you couldn’t do that from a browser on a phone.
The image pulsed until it was fully loaded and it offered me a space to write a caption. I was curious to see if I could add some “alt” text and reached over for the settings button but accidentally pressed the delete button. I looked around to see if there was a way to undo what I just did but couldn’t find anything so I took it as a sign to get started on my challenge and created a new post.
Completing the challenge
I visited my post on the Discover blog and copied and pasted it right into Gutenberg. To my surprise everything made it over just like in the original post. I checked the preview and confirmed that all the images and text formatting remained intact — it was like magic. With the post looking good on my phone, I wanted to see what it looked on a bigger screen and switched over to my computer.
Looking at the two posts side by side, I noticed some minor formatting discrepancies that needed to be fixed up so I hopped into Gutenberg on my computer. I needed to center align the headers but couldn’t find any text alignment options in the formatting options for the Header Block. After a little poking around I eventually found what I needed in the side bar settings and centered my headings. With the titles centered, I had completed my challenge and began writing about it in a new post.
Writing this post
The block concept in Gutenberg took some getting used to when I began actually writing the content for this post. I have been typing on computers for most of my life but never really learned how to type “properly”. Over the years, I have developed all kinds of weird and quirky habits. In most editors, these habits aren’t an issue because all the text fits into a single container but with these blocks, I ran into some hiccups because they’re all separate from each other.
The first one I encountered was when I tried to use the “command + A” keyboard shortcut. Rather than selecting all the text in the post, it only selected the paragraph I was working on. The other issue popped up when I tried to select text from two paragraphs. Starting with with my keyboard, I wanted to select the last sentence from one paragraph along with the first sentence of the next but ended up selecting both paragraphs the instant I transversed out of the first paragraph. I then tried with my mouse which yielded the same results. With a little extra effort I did what I needed to do so it didn’t bother me too much.
And that’s a wrap
Considering Gutenberg is still under development, my experience using it for the first time got me very excited for the future of WordPress. The long term vision for Gutenberg is for it to become more than just an editor. The Gutenberg team is already exploring different ways of using it to fully power site customization in themes. From what I’ve seen, there’s a lot of potential for it to grow and I can’t wait to see where it goes.