Displaying Posting and Reading Times via WordPress Blocks – WP Tavern

A few weeks ago, Rich Tabor announced a GitHub repository which lists all of its block plugins. These were already available to the public. However, some had not yet landed in the WordPress plugin directory. As a fan of his simple approach to block design, I quickly started tinkering with them.

One of these projects, Post-modified time block, landed on WordPress.org yesterday. With the still out Post-read time block (available on GitHub), the two are a pair of post-meta extensions that should be useful to many users.

Both blocks are meant to be used in conjunction with a pole rather than being randomly left on site. Typically, users would place them in one or more of their templates through the site editor (which requires a block theme). As the following screenshot shows, I added them to the post header area in Archeo:

Added post update and reading times to post header.

Although WordPress never had a “read time” template tag, it does have a post-modified time feature. However, there is no equivalent block. There is a recent ticket to choose between the date/time published or modified via the Post Date block.

Until that lands in WordPress, which almost certainly won’t happen in the current 6.0 release cycle, users can rely on Tabor’s Modified Time block.

Adding it is as easy as inserting any other block. I chose to paste it next to the publication date in the “Single” template of my theme.

The WordPress site editor focused on the post header in the single template.  The Modified Time block is highlighted.
Insertion of the modified Time block.

The most immediate thing I missed was the new date formatting options available in the Post Date block of the Gutenberg plugin. With the recent version 12.9 update, users can choose from a default set of formats taking into account the locale or customize it. The experience is much better than before, and I hope Tabor adopts the new component when WordPress 6.0 is released.

The Time Modified block will only display anything if the post has been updated and is older than 24 hours. Depending on the design of the site or theme, conditionally displayed blocks can be problematic. For example, if you place one in a row next to other post-related blocks and separate them with a character, sometimes the “separator” is alone when the block displays nothing, as shown below :

Published by {author} | Published on {date} | 

This problem was simple to fix in classic PHP-based themes. However, there is no standard for handling it with blocks. This is not a Tabor plugin specific issue but something to keep in mind.

Playtime plugins cost a dime a dozen. They seem to have been around for as long as I can remember, but most are starting to show their age. Either they rely on shortcodes or they automatically inject their output onto the page, leaving the user without control. Tabor’s Reading Time block brings the functionality to the block editor.

Users will mainly add it to one or more templates through the site editor, like the first block. I’ve pasted it under posted and edited times for display on single posts:

The WordPress site editor focused on the post header in the single template.  The Play Time block is highlighted.
Insertion of the Reading time block.

The block worked well. My only complaint is that it doesn’t have text formatting options. By default, it displays “X min read”. I wanted to display “Estimated Play Time: X” instead.

The block doesn’t break down times into hours for a long time—long time—the shape works. This would be a welcome addition for the much rarer use case of displaying those times in hour + minutes format.

Simple blocks like these may not earn a developer fame or fortune. These are not the gigantic projects around which you can build a business. However, they are necessary. Our developer community needs to take the reins and fill in the gaps that WordPress has yet to fill.

I would like to see more companies and developers contributing to such blocks. It’s a way to pay it forward while gaining real-world experience by leveraging the block system. And the opportunities abound. Search the WordPress source code for functions or template tags that have no block equivalent. For example, where is the “List of Authors” wrapper for wp_list_authors()? There are also many plugins built on the old shortcode system that need a port.

Esther L. Gunn