Empathetically Challenging Gutenberg

For this challenge I dug up an interesting article from Longreads called “Welcome to the Center of the Universe” and tried to recreate it using our Gutenberg plugin. Here’s a screen capture of how it went:

It took about 26min to complete which is pretty quick by my standards.

Much of the article’s content in the original Longreads post was very easy to replicate with Gutenberg. Blocks for paragraphs, full/wide width images, galleries, and blockquotes were very easy to find and tweak to make it look like the Longreads post. It was almost as simple as selecting the block and then copy/pasting the content as you’ll see frequently in the screen capture above.

There was also a few areas where I couldn’t find a block that perfectly matched the content in the Longreads post. One example of this was the “Member Promo” call-outs that appeared throughout the post. I couldn’t find a block that matched this perfectly, so I used an alternative display of the blockquote block to achieve a similar call-out area. It’s missing an image field, so it’s lacking the icon, but it looks fairly similar.

I also experienced this with the varying separators I found in the Longreads post. The default separator block that comes with Gutenberg worked well for the first separator, but all others used a triple asterisk (***) separator which wasn’t available as default block. To achieve this effect, I created a new center-aligned paragraph block and added 3 stars to it. I then saved it as a shared block, so that I could re-use the block in other places.

It’s a really useful feature but I can imagine being confused by the name “shared block.” If I were someone new to blocks, I’d expect to be able to share this block on social media, or add a social sharing block to my article. I wonder if something like “DIY block” or “repeatable blocks” might communicate how to use it a bit better. I was also pretty disappointed that the related posts block didn’t support featured images although I’m sure it’s something being worked on.

Block Limitations

Beyond that, there were a few areas that were simply not achievable with the available blocks that currently come with the Gutenberg plugin. Subscription forms, and more complex list generators weren’t available as blocks so I had to skip over many of those areas.

Also, Gutenberg is currently limited to just the_content() area, which meant that I couldn’t manipulate page headers or footers with my own block. I believe this will come with Gutenberg page templates in the near future but for now it isn’t possible to make global changes as you might expect.

Sorting Blocks

There were a couple of odd instances where certain blocks, like the blockquote block would get automatically moved to the top after I created it. You’ll see this happen a few times in the video above. It wasn’t hard to fix this, since all I needed to do was click the up/down sorting arrows to the left of the blocks. I’m still not sure why this was happening, but it’s definitely an awkward experience.

Overall, I’m very happy with what Gutenberg will bring to the experience of using WordPress, and with a few improvements I’m confident this will be a game changer for the community at large.