ramonjd
commented
3 years ago 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
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:
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.