An Hour with Gutenberg to Create an Image-Rich Story

Today, I spent an hour recreating a post from Longreads in the Gutenberg publishing experience to gain some empathy for our customers.

Here’s what I learned:

General thoughts

I used the Fashion Blog theme by Automattic, an in progress, experimental theme made with Gutenberg in mind.
I picked the post I did because it had a lot of images and some challenging pull quotes and other textual elements.
The video clocks in an just under an hour, but it was more like 30 to 40 minutes since I spent some time writing notes as I went along. I also tried to be deliberate about exploring the interface.
It’s an interesting shift taking WordPress from a publishing platform to also one where you design around what you’ve published. There’s tension there that Gutenberg won’t solve when it’s released. I’m excited to see how that evolves though.
I had a lot of fun creating this page, and can see even with simple customization options, how powerful Gutenberg will be for people.

Making wide images! It’s amazing what some strong visuals do to a page.
Having alignment options for paragraphs. It’s simple, but when you combine it with image options, you can do all sorts of things.
Placeholders, showing me some level of what I need to put in a block.
I got pretty close without much effort. I saw opportunities for more blocks though, like footnotes and pull quotes with different styles.

The post I recreated used what was a cross between blockquotes and footnotes. Essentially, they were footnotes, but floated to the left or right so the reader could read them in flow of the full story. I made these all blockquotes. At one point, I looked for footnotes, but didn’t see them. Then later, I discovered I could position paragraphs to the right or left. So I changed the font size and text color to more closely align with the original post’s design. It proved hard to switch contexts between the block writing options and the block settings. Also, my theme didn’t show the aligned paragraphs the same way they appeared in the editor.
I had some issues selecting blocks that were near or following blocks that were aligned left or right. Also, if you align a paragraph block to the left or right, the editor inserts another block in the space the that the other block previously occupied. So you have to remove blocks as you go sometimes, which isn’t ideal.
While moving blocks around, I hit a point where text floated over the top of another block, and was clearly a bug. I haven’t been able to reproduce it, but will try.
I found hovering over blocks jarring when the visual labels kept popping up.
Having to go down to the bottom of the post to insert a new block seemed to be my preferred method. That was slow. So I wonder if there’s a keyboard shortcut, or a quicker way beside that, clicking a divider or the “add block” button?

I really wanted to have the same layout/options in the “Block” panel on every block. Being able to align blocks and change their text color and background color universally would be nice, and bring more consistency across most blocks.
In addition to the theme colors, also show the last one I used.
The placeholders work as a way to give people a good idea of what goes into a certain block, but I wondered with some of the more visual blocks – is there a good way to display what it might look like before you insert something… That way, you get a better idea of what a block will do. Maybe a preview image in the block panel?
I could see a future where based on the content inserted, an AI system suggests different layouts or block combinations. If you just dumped some images and an article into Gutenberg, it would decide what image is featured, which ones to in a gallery, what becomes a pull quote, etc. Help me make good design decisions.