I have been on the hunt for a decent progress bar solution for a while now. Most of them are bundled in large block libraries, requiring me to install another 20 or 30 blocks in which I have no need. Others seem to miss the mark entirely with odd configurations and block options. Some of the remaining plugins still use shortcodes and widgets, but it is 2021. I am looking for a block.

A couple of days ago, the Tiles Progress Block landed in the directory. It seems to be a smaller piece of a larger project named Tiles. I have been keeping an eye on the team’s work since its initial design and patterns framework plugin launched last week. That project is still in beta, and only time will tell if it becomes a competitive project in the block space.

However, the team’s new progress bar block was just what I was looking for. Other than one bug, which I reported to the developer, I found no serious issues.

The plugin does what it says on the tin. It registers a Progress Bar block:

Out of the box, it includes Small and Large styles, allowing the user to adjust the size of the bar.

Its strength is that — I cannot stress this enough — the block’s content is editable within the editor canvas area. This includes the label and percentage. This is a refreshing change from the many others that require users to jump back into the block options sidebar to change simple text. Because the block uses Rich Text fields for its label and percentage, end-users can use inline formatting tools like bold, italic, and more.

The block also uses the standard typography and color palette controls from core WordPress. This provides access to the theme’s font sizes and colors.

Plus, users can choose wide and full-width layouts, an often overlooked feature in block plugins.

Overall, I am digging this block plugin. If I had one feature request, it would be to add a border-radius option. By default, the progress bar is rounded, but some users might prefer squared corners.

Extending the Block

In theme previews, I almost always see progress bars showcased alongside how much PHP, HTML, and JavaScript the demo’s faux developer has learned. It is rarely a real-world representation of progress bars. How do you quantify how much of a coding language you have mastered? I have been doing this for nearly two decades and cannot answer that.

Progress bars should be of measurable things. For example, steps someone has taken in an online learning course, percentage of total donations received, and any number of things that can be counted are far more realistic.

My favorite use of progress bars also happens to be on my favorite novelist’s website. I like to keep an eye on Brandon Sanderson’s work, looking forward to getting my next literary fix (yes, I am a fanboy).

Currently, Tiles Progress Block does not handle that exact layout. However, because it is built on the block system and does not do anything out of the ordinary, theme authors can change that with custom styles.

And that is just what I did. My Sanderson-esque book progress bars (rough, unpolished code available as a Gist):

The thing I love about the block system is that themers can extend blocks in this way. There is no needless checking for active plugins, loading additional per-plugin stylesheets, or figuring out each plugin’s unique system.

If a block is coded to the current standards, theme authors merely need to hook in with their own styles. Users can then select those styles via the editor and even make them the default.

I want to see more of this from the block plugin ecosystem.