Gutenberg is a codename for the project focusing on the entire publishing flow of WordPress. The first phase of this is the editor. For those of you that don’t know, Gutenberg works with everything being a block. Content is added by choosing block types, for example it could be an image, a gallery, a paragraph along with a lot of other formats. You can learn more about Gutenberg here. Gutenberg is going to allow people to easily create rich content posts, this is an exciting step for WordPress.
At Automattic we run frequent empathy challenges. An empathy challenge is a chance to experience and get outside your headspace. Potential empathy challenges could be performing a task or exposure to a group of people. With all the work that’s been done on Gutenberg, the time was right for a challenge to be set for all designers to write a post from Longreads.
The post
@melchoyce recommend the perfect cup of tea post for me and this is the story of my experience. I’d highly recommend checking out her challenge also here. The post to recreate was titled ‘Home is a Cup of Tea‘, beautiful illustrated and written by ‘Candace Rose Rardon’. I am slightly obsessed with tea and the time had come to put ‘a brew on’ and get into creating this post.
The creating
I want to be upfront and say that I am work daily on Gutenberg, I also blog using it. In total my creation of this was only just over 14 minutes and I suspect some things were simply easier as I knew them. That all said, there were some interesting findings I stumbled into along the way I want to share. You can view a speeded up (5x) version of my creation here:
Experience wise everything went pretty well. The post I selected was mostly images, this was an interesting creating challenge. I was incredibly glad of the ability to just drag and have images upload.
The theme
I chose to use my own version of the Gutenberg theme, that I run on my own site and is available here. I wanted to get the post as close to the block design, so using this theme meant I could do that. Because the way WordPress themes work, depending on the theme the styling of the output from Gutenberg may look different. This theme is designed to only have minimal color changes and be as close as it can be to the block’s styling.
Hitch one: floating images
I won’t claim there weren’t any hitches to my flow. There absolutely were some and possibly the biggest of this was trying to float an image to the side of text. I had a series of awkward experiences here:
- I found matching the paragraph background hard as no color picker from backgrounds and only hex support.
- Floating was making the image bigger than it was, only on resizing did it pop back.
Here is the video of me trying to float the image:
There is an experimental columns feature allowing you to have different types of blocks, you can see that here:
However, as that didn’t let me do that background color or resize columns, my thinking was the route I tried would be the better option. It wasn’t, but that’s a good learning lesson.
Hitch two: Multiple images at once
This post was a stress case all of it’s own, being made just of images. I was face with having to upload one by one. Part way through I had a 💡 moment and thought I’d add a gallery. Unfortunately, despite having an order in the files, they uploaded out of order. Something a little frustrating to experience but an issue before Gutenberg.
After adding all images I had this idea to then use the ‘transforms’ function and go back to each image. This worked well, I could then reorder each one, a little tedious but easier because of the way I could just move up. It’s worth noting I totally forgot I could drag and drop this. A good reminder that even if experienced at using something, when you’re not thinking you fall into the same patterns as any user.
Hitch three: changing multiple blocks
Part way through I thought I would move into changing the width of the blocks. I remembered you could select all blocks. This went well and I pretty easily selected all the images. However, upon doing this I couldn’t then change their widths as those options which were available as individuals were not to me. This felt to me like something should be offered, after all they are the same type of block. Here is the experience of that:
Hitch four: uh oh I went into CSS
The empathy challenge was set for us to make as much of the page as possible up in Gutenberg. I took this literally and began looking at how I could style links and change fonts. This rapidly got out of control and as I dove deeper into Custom CSS, I backed myself out deciding to just close having made the post.
My 3 wishes
If I could have 3 things that would change about the experience they would be these:
- Move rapidly into the layout phase of Gutenberg.
Whilst the editing was great, I couldn’t get past just the basic post format without stumbling into the Customizer and adding custom CSS. I long for a time this isn’t the case. Gutenberg has me craving the same easy experience to add a menu. I really don’t want to have to add CSS just to do simple things like change a font or color of link. - Guide me more.
I am not suggesting we need a Clippy level of guidance or any wizards, but the default experience of Gutenberg is not at all communicative. There are things I could have been guided to that would have made things easier. If I feel that as someone that both writes and works on Gutenberg, then others must be. Gutenberg has no conversational UI and it would benefit from a little warmth. - Distraction free.
I realise this is a total personal feeling but whilst Gutenberg does provide a lot less on the screen than the current editing in WordPress, I find myself craving distraction free. I adore the experience of just writing, often choosing apps that allow me to do that. I look forward to this being a plugin option as I’m not sure it’s worth adding to the core product.
Hitches to report
As with any test, reporting things is always great. I plan on making issues on the Gutenberg GitHub repo for the following things:
- Image having to be resized to float at right size.
- Multiple selected blocks of the same type should be able to be aligned or have their toolbar interactions.
- A color picker that allows you to pick from any element in the editor.
- Add alignment options to the ‘Subhead’ block.
Try it out today
Gutenberg is available to try today and I’d love to hear what your 3 wishes would be for things to change. As you can see I was able to create a really content rich post pretty easily. Just imagine what you can create today using Gutenberg.
#gutenberg
Automattic Design 