Preparations for Bulk Editing

One of our overarching goals for the end of the year here at Automattic is to “close the gaps” between our modern Calypso interface and the classic /wp-admin/ interface. Its been nearly 2 years since we first announced Calypso, but there are still some things missing. One of these “gaps” is bulk editing of your blog posts.

Here’s a side-by-side comparison of my blog posts for this site in Calypso (left) and wp-admin (right).

The first thing you’ll notice in Calypso (once your eyes adjust to all that blue) is that I can only see one of my posts. In wp-admin, I’m able to see all my posts—and there are some handy checkboxes to let me select one or more posts.

An Existing Pattern

Fortunately, Bulk Editing isn’t a new concept in Calypso. Its used in a few places like managing your site’s comments.

The pattern involves a button in the section’s navigation toolbar to enable bulk edit mode, which then adds a checkbox to each item in the list, and a clear set of actions to the toolbar.

However, since we only see one blog post at a time in Calypso, selecting multiple posts is going to involve a lot of scrolling—maybe even to the point where it becomes unusable for some.

Before we can fill the “gap” for bulk editing, we need to rethink the way we display blog posts in Calypso.

Consistency

Calypso displays posts, and post-like things, in a few different ways. Reader does one thing, the pages and posts lists each do their own thing, and custom post types does something else entirely. This inconsistency is concerning for a few reasons, two main ones being:

• We have multiple pieces of code which display similar information, but require separate maintenance, testing, and fixing.
• Our customers are required to learn multiple ways of interacting with the same or similar content.

After reviewing all these variations for posts and post-like things in Calypso, reusing the React components for custom post types (like Portfolio, or Testimonial) seemed to make the most sense. Here’s what the custom post type for x.design.blog looks like:

Its a simple and straightforward list of items. There’s room for a title, some meta information (date, and author in these case), an image, and then the ellipsis “more” menu. All these things make for a very flexible row item which can work with all post-like items “out of the box.”

The plan is to reuse this existing component for Blog Posts and Pages, giving us a consistent design for listing posts and post-like things in Calypso. Yay! Not only does this mean that users will only need to learn a single UI, it reduces the technical debt of maintaining multiple components, and allows us to integrate our new bulk edit feature for all post types. Yay, again!