New Progress Bar block (or a core-blocks approach to building a progress-style block pattern)

[andrewserong]

What problem does this address?

Many different types of sites use a progress bar or progress meter of some kind to communicate progress toward a goal, that is difficult to recreate using core Gutenberg blocks.

Examples of use cases for a progress bar include:

• Number of signatures for a petition
• Number of donations for a fundraising campaign
• Number of words to a word count target (think a NaNoWriMo-like writing competition)
• Current step in a process (e.g. page 4 of a 10 page tutorial)

While many dedicated progress bar plugins exist, it would be great to be able to create the above kinds of block patterns using core blocks, so that the pattern can be easily shared. The solution to this would likely need to be general to allow the above patterns to be designed with core blocks, and users needing a more bespoke or tailored solution for their use case could look to plugins instead.

Examples of progress bars from elsewhere on the web

Change.org

Australian Cultural Fund

Example from an existing plugin (Sensei LMS)

What is your proposed solution?

In the examples above, most of the other text and parts of the pattern can be recreated using paragraph, heading, social links, and buttons blocks, however the progress bar itself doesn't appear to be something we can build using core blocks (though please do comment if you can think of a clever workaround!).

Ideally we'd have a generic block that allows a progress bar to be created with custom background color, gradients, border, border radius, etc. Then, plugins and themes should be able to extend this with additional styles.

For the purposes of this issue, the goal is to be able to create the above kinds of patterns, whether or not it involves a dedicated "progress bar" block.

This idea was initially raised here in the WordPress.org support forums.

[ramonjd]

Great idea! 🍺

<meter /> might be an appropriate element to exploit (MDN).

Even if it were a component so folks could compose custom progress blocks and patterns.

Styling <meter /> always been tricky if I remember though. I suppose it's improved in the intervening years 😆

[mgozdis]

+1 from other users that would like this to be a core block/functionality.

[Mamaduka]

Related #58773. A niche block like this probably doesn't meet the 80/20 requirement.

cc @Infinite-Null

[Infinite-Null]

Hi @Mamaduka,

Thank you for the feedback! I believe a progress bar block could actually serve a wide range of common use cases that many WordPress users encounter, such as Course/Learning Progress, Goal Visualization, Content Engagement, etc.

Looking at popular WordPress themes and plugins, progress indicators are commonly implemented but often require custom code or additional plugins. A core block would provide a standardized, accessible solution that integrates seamlessly with the block editor.

I would love to hear more thoughts on this, and I'm open to adjusting the implementation to better serve the broader WordPress community.

[Mamaduka]

@Infinite-Null, the progress bar can be considered a niche block, so I think its inclusion in the core depends on #58773.

[Infinite-Null]

Hi @Mamaduka,

Should I proceed with closing the PR or pause my work on it for now? Additionally, I noticed this comment with a list of blocks. Would it be possible for me to contribute by adding one of those blocks? I’d be happy to assist.

[Mamaduka]

@Infinite-Null, there's no need to close the PR. I mentioned there might be a new way to ship niche and small blocks instead of including them in the core.

I think the comment in question also lists blocks similar to Progress Bar for block directory consideration. I would say those are low priority at the moment.

[TheJeffr0]

I would like to see this implemented as a Progress or Step Indicator. For example https://designsystem.digital.gov/components/step-indicator/