Gutenberg April Empathy Challenge

“Gutenberg” is the codename for a project to bring a brand new editor to WordPress; an editor that makes it easy to create rich layouts without having to know code. Because usage is like oxygen for fixing bugs and improving interfaces, we run “empathy challenges”. These challenge you to empathize with the people using your interface — that is, you’ve got to use this product you’re building yourself, in order to make something compelling. In this case, we’re busy building a new editor. So can you create rich layouts, easily? In my case I chose to try and replicate this wonderful article by Creative Mornings, Maria Popova on Evergreen Ideas and Rethinking the Meaning of Content. Here’s how that went: As you can tell, there were a few stumbles:

• There was a paste issue where multiple paragraphs turned into one semi-broken paragraph block
• There was a paste issue where a quote wasn’t copied at all!
• The quote on the original post was more of a pullquote, visually, but it wasn’t possible to transform from a quote into a pullquote, I had to delete the quote, insert a pullquote block first, then paste.

Turns out the first item in this list was a non issue, as the source markup simply used double-BR tags to create linebreaks, as opposed to two separate paragraphs. So the paste was correct. In case of the other two issues, those were clearly bugs, and I’ve quickly filed them: copy/paste issue with quote, quote and pullquote enhancements. In my day to day blogging, I use Gutenberg as well. As such I have some past experience blogging with this new editor. But even then, development is moving at a whirlwind of a pace with weekly releases, and there are a ton of little things I’d like to see fixed, such as being able to drag and drop a video file into the editor to upload and insert it (works for images), or some of the intricate details of adding links at the end of a paragraph. I’ve no doubt all this will be fixed and refined soon enough. Had I a magic wand, though, that could be used three times to fix or change three issues in Gutenberg, just like that, here are the three things I’d spend those waves on. Make it easier for themers to load the theme stylesheet into the editor What you see in vanilla Gutenberg, in most cases, is the editor stylesheet. Like a webbrowser that doesn’t load a stylesheet, it’s the base stylesheet that is loaded when the WordPress theme itself doesn’t provide one. This has traditionally been handled by “editor styles”, but Gutenberg goes a step further and allows you to load the theme stylesheet itself into the editor. While this works, it’s not yet ideal, and lots of improvements can be made, including allowing margins to collapse. Work is underway to improve things, but it would be nice if we could snap our fingers and be at a place where themers could paste a line of code into their functions.php file and things just worked. Implement Typewriter scrolling for mobile and desktop When you type on an old-tymey typewriter, you’ll always be looking at the line you’re currently typing. Because whenever you press “Return”, the paper you’re writing on will be rolled the distance matching the lineheight of the typeface built in. This effect can be ported to authoring environments on the web, which essentially means that as you type, we always ensure that you’re looking at the same line of text, managing the scrolling for you so you never end up in a situation with text that’s right at the bottom end of the viewport. Already now, this behavior is being implemented to refine the mobile authoring experience, but I can’t wait for this behavior to hit the desktop breakpoints as well. Improve the in-between inserter to be there when you want it, not when you don’t In Gutenberg, everything is a block. In order to make it as easy as possible to insert blocks, you can use either the plus button to add new blocks, you can insert by typing / in an empty paragraph, or you can hover the mouse between two blocks to insert a space where a new block can be added. The latter, lovingly called the “in-between inserter”, is mighty useful if for example you are putting the finishing touches on a media heavy post, and need to insert a line of text between two images. But it can get in the way when you’re just typing and setting focus in varous text blocks. In this ticket, improvements to this interface are being discussed, these might include making the hoverable area the left side of the space between blocks, not the whole area, and I look forward to this behavior being refined. Although still somewhat rough around the edges, every day Gutenberg inches forward. Even now, I really enjoy how I can paste content from Google Docs or written in Markdown directly into the editor and not have to worry about tag-soup. Even images from the clipboard can be pasted in, which can make for a very fast workflow. Probably everyone will have a different top three list. Have you tried Gutenberg? What’s your top three?