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.Create a Publishing Task List With the Todo List Block

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 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

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.jsonCreate a Publishing Task List With the Todo List Block

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.

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.Create a Publishing Task List With the Todo List Block

Share this:

Click to email this to a friend (Opens in new window)

Click to share on Facebook (Opens in new window)

Click to share on Twitter (Opens in new window)

Click to share on Telegram (Opens in new window)

Click to share on WhatsApp (Opens in new window)

Click to share on Pocket (Opens in new window)

Click to share on Reddit (Opens in new window)

Like this:

Like

Loading...