All of Automattic’s designers were recently challenged to try out the upcoming new WordPress post editor, Gutenberg.
The task we were given was to choose a rich media post, such as a longform article from Longreads, and recreate its layout and formatting inside of Gutenberg.
Gutenberg is a very ambitious project that aims to, eventually, completely overhaul the WordPress UX.
Gutenberg defines a new basic unit of content for a WordPress site – the Block.
A block is both a distinct piece of content as well as a dedicated UI for manipulating it.
The stage for composing a Gutenberg post is less of a linear text entry field, and more a freeform artboard. It can contain different kinds of content, shows different tools for adding and editing content.
Some blocks that make up the post you are reading now include the Paragraph block, the Image block, the Horizontal Rule block, and the Verse block.
Here is what that actually looks like, while I’m composing this post:
The above is what I know about Gutenberg from following the project rather loosely, mostly through updates that were shared within Automattic at key check points along the way. I briefly tried it in the past, but this is the first time I’m really using it.
The article I chose to reproduce is Can Kevin Young Make Poetry Matter Again?, from Esquire. It contains some features that are not easy to pull off using the current TinyMCE editor inside of a stock install of WordPress, such as drop caps and pull quotes. But Gutenberg is designed exactly with articles like this in mind (well, also articles like this.)
The first thing I’m noticing with Gutenberg is that it doesn’t fix my main complaint with writing in WordPress: everything is tiny! I didn’t do this in the video I recorded, but when I’m writing now I’m zoomed in to 150%. This way I can comfortably read what I’m writing, but it feels like it throws the proportions out of balance a bit, with the top bar and sidebar becoming pretty distracting.
I start out by pasting the entire article inside the first block. Gutenberg breaks it up into separate blocks and creates blocks for the images. It looks nice in a cursory glance, but some important formatting is missing.
Specifically, image captions are treated as regular paragraph text, so captions aren’t shown with the images they are related to. This is despite the fact that captions in the original article are marked up with the
At some point I switch to using the keyboard only, and I try to avoid the mouse to see how Gutenberg works without it. For the most part, the blocks are pretty transparent. I can get to anywhere in the post using just the arrow keys. And I can get to all the UI controls surrounding the the block using Tab (though I’m not sure how I can reach the Advanced Options in the sidebar.) There are no keyboard shortcuts in the tooltips and I can’t see anything that looks like a shortcut list. The only shortcut I see in the UI is Command+Shift+Option+M to switch between the code and visual editors. I couldn’t find an “official” list of keyboard, but working through this issue helped my find some useful ones. For example it looks like shortcuts for moving and manipulating blocks will soon be added. As I move around with the keyboard I noticed a few issues that come up when the way I expect things to work in more traditional editors doesn’t match the way Gutenberg blocks work. For example, Command+A is limited to the current block only, even if pressed repeatedly. There is no obvious way to quickly do “Select All” and have everything selected. I also can’t find a quick way to move the caret straight to the beginning or end of the document. I tried a few slow ways, but I eventually found the correct way to do this. There’s a More menu in the top right, and it has a Copy All Content option. Selecting text raises some questions about the two selection modes in Gutenberg. When the caret is inside a block, selection works as it would in any text editor. When the caret is on the edge of a block however, it sometimes switches into block selection mode, which is for selecting two blocks or more. When in text selection mode, arrow keys move the start or end of the selection between characters (Or hold down Option to move between whole words, or Command to go straight to the beginning of the line or the beginning of the block.) In Block selection mode, arrow keys move between whole blocks. When using the keyboard, the switch is triggered when you are selecting beyond the boundaries of the current block. But it goes one way: doing Shift+Right Arrow from the end of a block switches into block selection, so whatever I previously had selected inside the block, I now have two whole blocks selected. I expected to be able to “Undo” this by doing Shift+Left Arrow, but in block selection mode that just results in selecting the block before rather than the block after.
Eventually I was able to reproduce most elements pretty reliably. There’s no way to change the color of drop caps, no way to have an image both break the flow of text completely and be aligned to the right at the same time, no way to say that a horizontal rule should be full-width and not just 100px, no way to change font size or color inside a caption, no way to add a vertical border to Verse blocks, and more. By the time I was done, Gutenberg proved to be very messy. I had multiple empty blocks that were added either by accident or as a side effect of some other thing I did, and they were never cleaned up. I can’t imagine they cause any issue, but seeing so many of them makes me trust Gutenberg a little bit less. Here’s a sped-up screencast of the whole thing:
There’s a lot of stuff here because I opened the sidebar to show advanced controls for the current block, and I’m editing a link in one of the blocks. If you just want to write, Gutenberg can also disappear completely, leaving only your content visible.
The first thing I’m noticing with Gutenberg is that it doesn’t fix my main complaint with writing in WordPress: everything is tiny! I didn’t do this in the video I recorded, but when I’m writing now I’m zoomed in to 150%. This way I can comfortably read what I’m writing, but it feels like it throws the proportions out of balance a bit, with the top bar and sidebar becoming pretty distracting.
150% zoom makes type easy to read but seems to throw the scale out of balance.
figcaption tag, which should, I think, indicate to Gutenberg that it is a caption.
The drop caps didn’t make it over either. I remembered seeing a drop cap option in Gutenberg. I expected to be a different type of block, but really it’s a setting of the Paragraph block. Block settings are available in the sidebar, which feels a bit like an inspector in Mac OS. It even has collapsible sections.
I didn’t notice this while working on the post, but another issue is that images from the article are not actually copied over to my post, and instead my post just points to the same image from the original article. If the original images become unavailable, they’ll disappear from my post too.
At some point I switch to using the keyboard only, and I try to avoid the mouse to see how Gutenberg works without it. For the most part, the blocks are pretty transparent. I can get to anywhere in the post using just the arrow keys. And I can get to all the UI controls surrounding the the block using Tab (though I’m not sure how I can reach the Advanced Options in the sidebar.) There are no keyboard shortcuts in the tooltips and I can’t see anything that looks like a shortcut list. The only shortcut I see in the UI is Command+Shift+Option+M to switch between the code and visual editors. I couldn’t find an “official” list of keyboard, but working through this issue helped my find some useful ones. For example it looks like shortcuts for moving and manipulating blocks will soon be added. As I move around with the keyboard I noticed a few issues that come up when the way I expect things to work in more traditional editors doesn’t match the way Gutenberg blocks work. For example, Command+A is limited to the current block only, even if pressed repeatedly. There is no obvious way to quickly do “Select All” and have everything selected. I also can’t find a quick way to move the caret straight to the beginning or end of the document. I tried a few slow ways, but I eventually found the correct way to do this. There’s a More menu in the top right, and it has a Copy All Content option. Selecting text raises some questions about the two selection modes in Gutenberg. When the caret is inside a block, selection works as it would in any text editor. When the caret is on the edge of a block however, it sometimes switches into block selection mode, which is for selecting two blocks or more. When in text selection mode, arrow keys move the start or end of the selection between characters (Or hold down Option to move between whole words, or Command to go straight to the beginning of the line or the beginning of the block.) In Block selection mode, arrow keys move between whole blocks. When using the keyboard, the switch is triggered when you are selecting beyond the boundaries of the current block. But it goes one way: doing Shift+Right Arrow from the end of a block switches into block selection, so whatever I previously had selected inside the block, I now have two whole blocks selected. I expected to be able to “Undo” this by doing Shift+Left Arrow, but in block selection mode that just results in selecting the block before rather than the block after.
Eventually I was able to reproduce most elements pretty reliably. There’s no way to change the color of drop caps, no way to have an image both break the flow of text completely and be aligned to the right at the same time, no way to say that a horizontal rule should be full-width and not just 100px, no way to change font size or color inside a caption, no way to add a vertical border to Verse blocks, and more. By the time I was done, Gutenberg proved to be very messy. I had multiple empty blocks that were added either by accident or as a side effect of some other thing I did, and they were never cleaned up. I can’t imagine they cause any issue, but seeing so many of them makes me trust Gutenberg a little bit less. Here’s a sped-up screencast of the whole thing:
