Back to Childhood: Blocks are the Future

Note: this post was originally published on our new Automattic design blog. Also check out my previous post about the future of site building & customization in WordPress for more context to this post.

Last month, my colleague Joen wrote a great post about blocks and the Editor Focus for WordPress in 2017. Joen designed a fantastic blueprint for blocks in WordPress that the Customization Focus will continue to flesh out and build on over the next year.

Recently, I’ve been starting to look at converting widgets in WordPress to Gutenberg blocks. Widgets are the bits of content you can currently drop into your sidebar or footer in WordPress — like the recently updated image widget, some text, or a search bar.

Updating some of these widgets to use Gutenberg’s block patterns has been quite easy — they are simple blocks of content without a lot of settings. However, some widgets are quite complex. Turning them into blocks has been a challenge.

Take, for example, the Categories widget. It creates a list of all your post categories, and links to the archive pages for those categories. It’s very useful for the large number of bloggers who organize the blog posts on their site using categories. The Categories widget comes with a couple options:

• Display categories in a dropdown, instead of a list.
• Display the number of posts in each category.
• Display category hierarchy, if you have parent and child categories on your blog.

These options are easy to present in a block:

The widget settings work well in the “Inspector” on the right, while the block itself is previewed inside of your post or page editor (and eventually your whole site).

Not all widgets are this easy to turn into blocks. Let’s take a look at Recent Posts widget, which shows a list of your most recently published posts. At first, it seems just as simple as the Category widget, right? Well, what if we took this opportunity to improve the widget while we turn it into a block?

Currently, you can control the numbers of posts listed in the Recent Posts widget, and you can choose to display post dates. That seems like a good start for a sidebar, but what if you wanted to show a list of posts on your homepage? You’ll probably want to show more details about the post.

Looking at popular blogging websites and themes, many include the post’s featured image, and either an excerpt, or the content of the whole post. Let’s add that to our list.

Many sites and themes also show posts as a grid, not a list. What if we gave folks the option of choosing between a list or a grid layout? If we support grids, we’ll likely also want to let people choose how the maximum number of columns in which to display their posts on larger screens.

Now, our feature list looks like this:

• List view or grid view
• Number of posts to show
• Columns (only if grid view)
• Display date
• Display featured image
  • Featured image size (taken from your site settings)
• Display post content
  • Excerpt
  • Full post

More powerful, but also much more complex!

This slideshow requires JavaScript.

Proposed Gutenberg Post Block — Check it out on GitHub

However, the block is still mostly controlled through a list of options in the Inspector. What about a block that you need to build, like the Custom Menu widget?

At its most basic, this could be a simple block. The widget is pretty simple: just choose an existing menu from a dropdown, and it displays that menu in your widget. This isn’t great, though, since you need to know to make the menu first. It’s a pain and it breaks your flow.

In a future where all of the navigation menus on your site are blocks, it seems more important to let you actually build that menu where you’re adding a block. We don’t have any established patterns for a task like menu-building yet, so we need to establish some.

Core contributor Joshua Wold kicked off the brainstorming with a great sketch:

Within the block, you can choose an existing menu, or create a new menu. If you choose to create a new menu, you can drag pages over from the Inspector (or click on them) into the block to build your menu. This is similar to how menus currently work in the Customizer.

Another direction we can take is cutting out the confusion of duplicate menus, and building the block to make one-off menus instead. That could look something like this:

This slideshow requires JavaScript.

Another Proposed Gutenberg Menu Block — Check it out on GitHub

This block is still being explored. If you have ideas, you can post them on the GitHub issue! We’d love to see more folks involved in shaping the future of WordPress.

I hope, by tackling the hard widgets (and shortcodes!) now, we’ll establish all the key patterns and lead the way for other plugins and themes to convert their custom widgets into blocks. I’d like to help create an ecosystem where page builder builders and premium themes can continue to flourish, while remaining consistent and compatible with core WordPress design patterns. Hopefully we’re off to a good start! ?

Thanks to Joen and Tammie for their ongoing support and feedback as I explore these new block designs!