Zoomed out view: Display a badge near the pattern category to inform how many patterns have been inserted from each category

[gigitux]

Context

With the Full Composability Project in WooCommerce, we are leveraging a dedicated instance of Gutenberg to create a tool that provides users with the flexibility to design their own homepage. This tool allows users to easily add, remove, shuffle, and rearrange patterns.

As part of this initiative, we are planning to introduce a feature that shows a badge indicating how many patterns have been inserted from each category (see related issue).

Proposal

We propose enhancing the Pattern Inserter in the Site Editor by displaying a badge next to each category, indicating the number of patterns inserted from that category.

Details

• Display a badge: Each category in the Pattern Inserter should display a badge showing the number of patterns inserted from that category.
• Real-time updates: The badge count should update in real-time as users add or remove patterns.
• User Experience: This enhancement aims to provide users with better insights into their pattern usage.

Considerations

One potential challenge is that a single pattern can belong to multiple categories.

It could be part of #50739

[richtabor]

What's the rationale here? Why is it valuable for users to know that they've inserted a particular count of patterns from a category?

[verofasulo]

Hey @richtabor,

Good question!

We tested the flow, and we got very good feedback about the pattern counter:

The number next to each category, indicating how many patterns had been inserted, was seen as a nice addition.

It provided users with a quick overview, even when they closed the panel.

[richtabor]

I think perhaps it's an interesting exploration for when creating new pages. It's tough to account for patterns inserted on a page otherwise.