[Style Book] Allow the possibility to show multiple variations of the same block

[gigitux]

What problem does this address?

In WooCommerce Blocks, there is a block called Filter Wrapper. This block has multiple variations: Filter by Stock, Filter by Attribute, Filter by Rating and Active Filers (source code). As all the variations, based on the attributes, it renders a specific variation.
With the Style Book, it seems there isn't the possibility of showing multiple variations of the same block.

What is your proposed solution?

A good solution is to have the possibility to show multiple variations of the same block on Style Book.

[annezazu]

Great issue! @noisysocks for consideration. I imagine there's not enough time for 6.2 but this seems like a good thing to iterate on for 6.3, especially since you can edit style variations now: #46343

[Aljullu]

I might be confused, but I think you are referring to two different concepts:

• @annezazu I think you make reference to block style variations (ie: Filled or Outlined buttons). Support for these style variations in the global styles UI was added in Edit block style variations from global styles #46343.
• @gigitux I think you are referring to block variations (ie: WordPress, Tumblr, Mastodon... inner blocks under the Social network icons block). Currently, those are not in the global styles UI (related issue: Block variations are missing Global Styles support #47324) neither inside the Style Book (this issue).

If I'm not wrong, they are two different concepts, no?

[gigitux]

Thanks for clarifying, @Aljullu! You are right. I'm referring to block variations.

[noisysocks]

Sounds like a good idea. Should Style Book aways show all block variations? If not, how should blocks opt-in (or opt-out?) of this behaviour?

[noisysocks]

cc. @tellthemachines who I think is the variations expert 😀

[tellthemachines]

I did some work on style variations recently, but I don't think that's what this is about! Not sure how we're listing the blocks for the Style Book... could we look up their variations and render them all? for instance, it would make sense to have Row and Stack but we only have Group.

[bfintal]

I'm looking forward to this too. In my case, I have a Button Group block, that has variations in the inserter for Icon Button and Social Buttons - so they feel like normal blocks because you can insert them like normal blocks and you also have a preview example like normal. It just felt odd that they weren't included in the Style Book also.

@noisysocks the opt-in can be similar to how it's done with normal blocks: if the scope is inserter and there's an example given.

[warudin]

Yeah, I have almost the same situation as @bfintal. I made different blockVariations of the core/button block and supposed them to be available in the Style Book. But at the moment this is not the case, unfortunately. I'm looking forward to any improvements on this, that would be so helpful.

[fabiankaegy]

As stated before there are a few different concepts that can all be used for very different things. Not all block variations should actually show up in the style book because they aren't all related to styling.

When @youknowriad built his Blockbook it came with this cool concept called "stories" which allowed anyone to define different configurations of a block which would the show up in the style book.

I think a mechanism like that would go much further because it would allow extenders and theme developers to also add more complex things like inner block structures in the stylebook so that you can easily see the effects your changes have on these different instances of the blocks.

This concept of Stories comes from Storybook where it is the foundation for all of the elements that get displayed. https://storybook.js.org/docs/react/writing-stories/introduction

[gziolo]

It's potentially related to this issue reported on the WordPress forum: https://wordpress.org/support/topic/wp-social-link-mail-colour/.