Improve discovery of Woo Blocks and their purpose via the block inserter.

[haszari]

Describe the bug
There are a quite a few Woo blocks now - 19 in total! Within this we have various kinds of blocks:

• standalone blocks for showing products, e.g. hand-picked products
• standalone blocks for showing other content, e.g. reviews
• family of so-called "atomic" blocks for custom shop page layouts, e.g. all products + filter by price

Currently these are all in one group in the block inserter, and it's not clear that the atomic blocks are different.

Expected behavior
There are lots of ways we could improve this, here are some ideas.

• Add more Woo groups for different categories, e.g. Woo – Products, Woo – Other, Woo – All products (these names are tricky!)
• Use icons or imagery to subtly indicate groups/types of block.
• Use name prefix/suffix to group blocks, e.g. all products atomic blocks.
• Add more info to description/preview to indicate "atomic" / relationship between blocks.
• Add documentation explaining the different blocks.

Even just documenting the current blocks would probably help. (There's some info in WCCOM blog posts already.)

Note that there are proposals/work underway to add more capabilities to the block inserter in core. We should keep this in mind and feed our needs into that discussion – this issue is focused on small tweaks and improvements we can make with current Gutenberg APIs.

Related info:

• Block Directory inclusion explorations (Design & Technical) #975
• Block Idea: Shop Directory Block #1261
• Re-grouping Editor Inserter Menu WordPress/gutenberg#11406 (comment)
• Allow customization of InnerBlocks block library inserter WordPress/gutenberg#17280
• Improvements to Block Manager WordPress/gutenberg#15121
• Add block collections WordPress/gutenberg#17609
• p9Jlb4-13I-p2
• p6riRB-4NT-p2

[issue-label-bot]

Issue-Label Bot is automatically applying the label type: feature request to this issue, with a confidence of 0.57. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[haszari]

When I was screenshotting this I noticed the blocks change order in the inserter, most recent goes to the top. Is that a core Gutenberg feature? If so then we can't use spatial layout or order for this :)

[nerrad]

most recent goes to the top. Is that a core Gutenberg feature?

Yes.

[nerrad]

Keep in mind that eventually it's likely some of the atomic blocks we've created that currently do not appear in the top-level inserter (ProductTitle, ProductPrice etc) will eventually be available here when we make them context aware. Currently they are registered as inner-blocks only for the All Products block, but some ideas for homepage templates may make them available (while being aware of context) else-where.

Another consideration, is that when we start introducing curated blocks (like what is suggested in #1261) that introduces a whole other layer of block type that is distinct from the current blocks we have (although one could argue blocks like Handpicked Products could become a curated block that is composed of atomic blocks like the ProductTitle etc.

I say all this, because we I think we should also consider how we categorize or expose collections of blocks beyond just whether it's "product" related or not. Would there be value in grouping them by type? In keeping with a proposal on the WordPress design blog, this could mean we have blocks that serve as patterns, blocks that serve as layouts, and then just blocks that are the lego pieces used in patterns or layouts.

I'd like to see us both contribute to and take some cues from the WordPress direction on some of these issues as it'd be super useful to have a common language/taxonomy that all plugins in the WordPress ecosystem could adopt that would ultimately benefit the user.

In the meantime however... I agree that we should focus on how we can improve discoverability and organization with what is available now. I'm just wary of establishing muscle memory in users prematurely in a space that is still evolving.

[haszari]

Here's a mockup from @jwold for one approach:

[haszari]

I took a look at all the blocks we have, to see if any categories emerged. Here are some potential categories/groupings:

• Blocks for shop page (all products + filters) (4 blocks)
• Self-contained blocks displaying products (9 blocks)
• Blocks displaying reviews (3 blocks)
• Product metadata or search (3 blocks)

[jwold]

I've thought about a few ways we could organize the block library. This only takes into account how things function from a design perspective, I don't know what's actually possible from a development perspective. My guess is all of these ideas would involve actual changes to Gutenberg.

All of these ideas involve splitting the (currently) 19 blocks up into separate categories.

Idea 1

Using what I hope would be some simple visual separation, we'd introduce the concept of groups within WooCommerce. This one is pretty simple, as we'd give a separate title to each category and split them out with a horizontal ruler.

Idea 2

This follows a pattern I saw with CoBlocks. Technically they do this by having two separate plugins, but I wonder if we could do this with a single plugin and split our products into two groups. This particular idea is one of the simpler paths forward as it doesn’t seem to require any UI changes in the block inserter. I'm just not sure if we could do it from a single plugin.

Idea 3

Tab up all the things. This would require some major changes to how the inserter works, and we'd run into issues with internationalization, spacing, etc. For instance, what happens if we want to have 4 categories - do we insert arrows to slide over the next category? To me this seems like a less than ideal solution.

Idea 4

The idea is to use a different style of icons for two categories of blocks. So, similar to how Material icons have different icon themes. The problem we'd run into is this would start looking really strange with four separate categories. After revisiting this, I don't think it's a good idea.

Idea 5

As Rua shared above, this creates the idea of child and parent categories. For instance, we could have a parent Product Lists block, and inside of it would be all of the various product blocks we've created.

A similar concept was shared on Gutenberg a while back, and I think it's an idea worth considering.

At this point I'd love to hear some thoughts on what's the most technically feasible option, and then we could perhaps discuss ways to proceed.

[haszari]

My guess is all of these ideas would involve actual changes to Gutenberg.

@jwold Idea 2 - add new categories – is totally doable with current Gutenberg, and current (single) blocks plugin. I did a really hasty prototype (pretty sure we can make custom category icon purple, since we did that for main category). Variation: use consistent Woo icon for all categories and just use wording to distinguish.

the idea of child and parent categories

Note on this, for our child blocks (are we calling these atoms), there is native Gutenberg support for specifying that a block is only available as a child of container block X. Here's an example from WCCOM blocks - Logo is a child block of Logo Group and is only available within that container block.

[jwold]

Note on this, for our child blocks (are we calling these atoms)

You're right! I forgot about this. We could definitely consider grouping some of the blocks together like this. Reviews (3 blocks) and Product Lists (9 blocks I think) are a good candidate.

Regarding the naming, we've been calling them atomic blocks. Not sure if that's the best term?

[nerrad]

There is also the block collections api that could help with this, however I think it's only be available in WP 5.4+ so we'd have to do it as a progressive enhancement somehow.