James Koster

With the advent of the site editor and all of its associated blocks – not to mention the burgeoning catalog of core blocks – the Inserter is starting to feel a little disorganised.

We have block categories for “Theme” and “Design” which feel conceptually at-odds with one another (in case you’re wondering “Theme” blocks are mostly template blocks like Post Title but also include unrelated things like Query variations. The “Design” category has unfortunately become a bit of a dumping ground that contains a number of unrelated blocks like Site Title, Post Tags, Columns, and Buttons).

The “Widgets” category is where block-based versions of legacy widgets live. Since “widgets” is a paradigm that will phase out over time (widgets are really just blocks like any other) this category doesn’t make much sense except as an interim. Especially as the blocks themselves can be quite varied, E.G: Search, Posts List, Shortcode, RSS.

Finally there is a large “Embeds” category which is where blocks that enable you to display third party media live.

Card sorting

The first thing I wanted to do in this exploration was identify which blocks belong only in the post editor, those which belong only in the template editor, and those which are truly global. Once I’d identified this I was able to begin thinking about potential categories within those contexts.

To do this I embarked on a card sorting exercise in FigJam:

Here’s a summary of my observations and organisational changes:

• A surprising number of blocks were consolidated in to several categories within the template editing context.
• There are way more template-only blocks than post-only blocks.
• Embeds and Media have essentially been combined.
• Several widgets moved to an “Internal links” category. I’m not sure what the best name for this is, but most of these blocks focussed on linking to other areas of the site e.g. tag clouds, category links, recent comments, etc.
• The “Design” category was split into more contextual compartments; “Layout”, “Internal post navigation” (more link, page break), and Feeds.
• A number of sections could potentially be de-emphasised in the UI. All the meat exists in Text, Media, and Layout.

Design Prototype

Although I only added one category overall (in the post editing context) one thing that struck me was how broad the block library really is. And this is just when you observe core blocks, an established site may have many more blocks installed via plugins and the block directory.

This got me wondering whether presenting a wall-of-blocks in the Inserter is really the best approach, or whether it might be better to encourage searching, and only list frequently used blocks for quick insertion.

A quick design mockup piqued my interest. I figured we could allow folks to customise how many “Frequently used” blocks to display, and provide access to each of the block categories using the same drilldown pattern as the latest Global Styles designs.

My hope is that this would make the Inserter less overwhelming, and feel more intuitive to use for common tasks.

To try this idea out I made a CodePen prototype and quickly noticed that the drilldown pattern could even be used to expose patterns relating to specific blocks upon insertion.

There’s still some work to be done here. For example I’m not sure how the tabs might interact with this design… the “Reusable” tab feels like it could just be a category within the inserter. And if we’re exposing contextual patterns upon insertion, maybe that tab is superfluous as well?

Where the heck should the Buttons block live?

Scalability is also top of mind, do these categories provide a framework that block authors can intuitively plug into without having to create their own sections?

Finally I need to mockup a version of this for the template editor, which will include a significantly larger catalog of blocks. Maybe the sky falls down in that context.

These are all explorations for another day. For now, feel free to mess around with the prototype here, and as always, do not look at the code 🙂