Create a Publishing Task List With the Todo List Block

Rich Tabor, the Senior Product Manager of WordPress Experience at GoDaddy, has been on a bit of a publishing productivity and workflow kick as of late. The co-creator of the Iceberg Editor plugin released a Markdown Comments block last month, allowing users to write editor-only notes. Last week, he launched the Todo List Block plugin.

The latest plugin is yet another simple, editor-only tool. The goal is to allow publishers to create and keep track of tasks on a per-post basis. It is essentially a way to create a publishing checklist directly in the editor’s content canvas.

Adding the Todo List block and several items to an example WordPress post.
Adding a Todo List to a post.

For solo writers, it should work well as a standalone plugin. Larger teams might consider coupling it with a plugin like Post Descriptions for a more robust solution.

One annoyance when using the block is that clicking the Enter button twice on the keyboard does not break you out of the Todo List. This is how lists work in core WordPress, allowing users to create a new paragraph or add a different block. I am not sure how to move out of the Todo List via the keyboard.

The issue could be related to how the plugin builds the list. Technically, it creates two separate blocks. The Todo List block is a wrapper for individual Todo Items. However, I am generally a fan of this approach because it allows developers to create block options for each item (e.g., different colors for each), a feature I have needed on occasion with the core List block.

Plugin + Theme Integration

Screenshot of a code editor with theme.json code to integrate with the Todo List block plugin.
Theme JSON integration.

One of the hardest things about developing plugins in past years was having no standardized method for themes to style plugin output. Every plugin author had their own system, which would often change from version to version, and theme authors had to keep up.

Tabor may have just struck the perfect balance with the Todo List block. It defines its own styles but leans on the new theme.json standard available since WordPress 5.8.

Almost anything a theme designer might want to style is easily configurable via JSON, and the plugin has an example bundled within it. Theme authors can simply copy the code wholesale, paste it, and modify it to suit their design. Or, they can just use the bits they want. I only wanted to change the text color, so it was as simple as plugging in a single custom value.

This is the sort of forward-thinking that we need in this new era of blocks. And, this solution might just be the standard that other plugin authors should follow. It provides themers with an uncomplicated method for customizing plugin output and does not require nested styles to overwrite rules with high specificity.

A Checklist Block Type in WordPress

My initial interest in the Todo List Block plugin was its similarity to checklists (also called task lists). Essentially, these are unordered lists with a checkbox input for each item.

For transparency, I mostly just want to build a recipe block pattern with a checklist. This would let readers check each step in the instructions as complete.

Recipe instructions list that site visitors can check off as they move through the list.
Creating a task list of recipe instructions.

It is a relatively standard feature in Markdown editors to be able to create checklists by typing something like the following:

- [ ] Incomplete task.
- [x] Completed task

There is a ticket to bring a similar feature to the Gutenberg plugin. It was opened in 2019. However, other than a few people chiming in, it has not seen much traction in the two years since.

Gutenberg project lead Matías Ventura shared a concept he had tried out early in the ticket:

Given the similarity with the Todo List block, maybe we can give Tabor a little nudge and have him bring a checklist solution to the masses.

5

5 responses to “Create a Publishing Task List With the Todo List Block”

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.