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
figcaptiontag, 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: