My Gutenberg Experience

I’ve spent close to an hour today experimenting with Gutenberg 2.6. My goal was to recreate as best as possible this great article published in Longreads.

I had used Gutenberg before, but this was the first time I tried to create something as complex as this. I loved it.

Here’s a screencast of the session (43 minutes):

A lot has been talked about Gutenberg from the user’s point of view, so I will try to keep my comments short and sweet:

Things I loved

  • The blocks. It’s obviously the biggest change and improvement, and a very needed change of paradigm. The old editor followed the logic of regular text editors, but Gutenberg works the same way web pages are built, only making it much easier and natural. I find it way more logical and powerful, and it allows a flexibility and ease of use that is light-years ahead of the old editor. Definitely the future.
  • The shared blocks. I used a couple of reusable blocks (for the three-asterisk separators between sections and the “Buy the book” component) and it was a pleasure. I can’t wait to see what users and developers build using shared blocks. They’re a breeze to create and update, although I couldn’t add them from the /command, which was a tiny bit annoying.
  • Little magic details such as automatically entering the picture caption taking the description directly from the EXIF data, or how well the copy and pasting works. Not just eye candy, but really useful.
  • The demo! I didn’t know how to approach a couple of things and the demo that comes bundled with Gutenberg was an incredible resource to check options and possibilities. Fantastic.

Things I struggled with

  • Finding the correct theme. Even having a huge amount of flexibility, it’s difficult to make something look like you want from the editor itself. I would’ve have to edit the CSS from my theme to make it look like Longreads, which is expected but I still found a big detour from the creation workflow. I struggled to find a theme compatible with Gutenberg to the extent I needed, and once I found it I realized it would take me a great amount of time to tweak it to make it look like Longreads and fix the incompatibilities it still had. It actually looked much better in the editor itself than when I previewed the post. In the end, I felt that how good the post looks depends too much on how well the theme is built, regardless of how much effort you put on the content. Luckily this is something that is being worked on really hard, which makes me really happy. I’m looking forward to Gutenberg customization and everything related that will come in the future.
  • At first I found a bit inconsistent the + button at the end of the existing content. It took me a while to realize that the button only appears when there’s a line break, so you just need to press enter at the end of a paragraph to make it appear. Since I was copying and pasting the text, I sometimes copied the last line break and sometimes didn’t, so the + button seemed kind of random. I wonder how it would feel if the button was always there.
  • I also found the UI a bit noisy sometimes, specially when there were a few consecutive small blocks. More than once the floating menus, buttons and block-type tags seemed to be blocking the content, but it’s something that didn’t really affect me working. Also, I think than in a regular workflow (where you actually write in the editor, and not just quickly copy and paste) it would be much less noticeable.

Overall, I’m still amazed with Gutenberg and the incredible work that has been done. It really is the future and a turning point in the WordPress world.

By Eduardo Villuendas

Designer at Automattic, horrible cook.