Gutenberg Test Drive

I spent 30 minutes trying to re-create a Buzzfeed post in order to test drive the Gutenberg editor (v 2.5). Here is a video of the process:

Stumbling blocks

  • It appears that .webp images are not supported, and that stumped me for awhile. I tried to drag an image into the media library and it didn’t work.
  • If you have Yoast installed, the initial writing area is extremely small and cramped. It’s very busy. Reminds me of the old editor. I also wish there was a fullscreen option so I wouldn’t have to worry about hitting the links in the left sidebar.
  • I somehow created several empty lines or blocks, and it wasn’t obvious how to get rid of them:screen-shot-2018-04-03-at-2-45-13-pm.png
  • The inserter “line” is hard to see and not very obvious. The fade animation takes a long time to reach 100% opacity.
  • I somehow got into weird states that displayed confusing UI. A bunch of lines and icons that were confusing. I didn’t know what was going on.
Screen Shot 2018-04-03 at 2.01.49 PM.png
Above is an image gallery followed by some mystery UI below.
  • Apparently there is no way of creating pull quotes that are not 100% width. In my case, I needed to create a quote that was about 40% width, left aligned. I expected to be able to resize the block, just like images. For left aligned, floated images, you can just use the resize handles.
  • I could not find a way to make the pull quote style regular text instead of italic.
  • I could not find a way to make image captions not centered text.
  • It was great that I could drag an image onto a gallery to add it to the gallery, but the UI is confusing. Several things are highlighted in blue, no one which leads me to believe that dragging the image will work:
Screen Shot 2018-04-03 at 3.00.25 PM.png
Dragging an image from desktop to an image gallery.
  • Adding text to the right of a floated image was actually really hard:
Screen Shot 2018-04-03 at 3.03.47 PM.png
Trying to add text to the right of an image.
  • I found myself at the bottom of the post in the editor, and apparently the only way to add a block is to click on the little inserter line? I guess I could click the add button in the toolbar, but that is a pain.

Screen Shot 2018-04-03 at 3.06.17 PM.png

By Dave Whitley

Designer at Automattic


Great post, I wanted to loop back on a few points:
Floating images around text is an issue that for me on one point already is better with the recent work done, however a constant point and one to consider grid for.
Regarding .webp images there is a trac ticket relating: to worth following on that.

Comments are closed.