As I mentioned last week in my 2017 Year in Review post, I’ve been learning quite a lot about how WordPress themes will interface with Gutenberg and developing Gutenberg blocks myself. Sure, there are a number of unknowns surrounding the project, but if you’re still worried about the pending release of WordPress 5.0 and Gutenberg, now is a better time than ever to start educating yourself.

I had the idea for a content spacer block as I was having a tough time creating ample spacing between even the simplest Gutenberg blocks. So I built the GutenKit Spacer Block, a nifty block plugin for Gutenberg that lets you easily add white space between content blocks.

Capitalizing on UX

I first built the block using an Inspector Control range input, with a corresponding range slider that appeared as the block was focused on. The block worked fine, though the user experience wasn’t quite up to speed. That’s where Gutenberg is supposed to shine, right? So I threw it in the bin and started over.

I built the second version using Re-Resizable, a resizable component for React. It’s actually the same component used by the core Gutenberg image block. This new rendition made the block much more natural to use. Now, a user simply drags the block to the vertical space you’d like to add. That’s it.

The whole point of the Gutenberg editor is to improve the user experience of creating content. There’s so much to be gained by taking a good hard look at the user experience of any future blocks you may create for Gutenberg. I personally challenge developers to build Gutenberg blocks that capitalize on UX and take advantage of what the new editor offers. If you’d like to learn more, you can find the GutenKit Spacer Block on GitHub, as well as download it from WordPress.org.

It’s an exciting time to be a WordPress developer

Having dabbled in Gutenberg block development a bit, I now have a much better feel for the new editor. Gutenberg has the capability to fundamentally change WordPress as we know it. I’m excited. Are you?