Block Style variations that share the same name can overwrite each other

[skorasaurus]

If you are using multiple blocks that have the block style variation name, their styles will be reproduced on other blocks, leading to unintentional styling conflicts on blocks.

Right now, block style variations are used to provide styling variations that would slightly modify an entire block (like background-color, border colors) of a particular block. Block Style Variations can be applied on blocks within Gutenberg and custom blocks from 3rd-party developers that a user may install.

These block style variations create classes whose names are fixed: 'is-style' followed by the name of that the developer gives to the variation class. Some of these variation names can have generic names.
e.g. if you have a style variation named secondary, the class generated named is .is-style-secondary

Because block style variations rely on a single class name and users will have multiple blocks from multiple sources on their websites, it will be inevitable that users that have style variations with the same name.

These styling conflicts/leaks will occur within the editor even if only one of the blocks is present on a page.
These styling conflicts/leaks will occur across different themes if the plugins' blocks have style variations with the same name.

To reproduce
Steps to reproduce the behavior:

1. Install Rich Tabor's coblocks (Not to pick on you Rich, it's just an example of a popular block plugin that also has somewhat common style variation names). It has an 'alert' block with a style variation named 'success'

2. Install my example plugin. https://gitlab.com/cpl/cpl-example
   The cpl-example block has a block style variation of the quote block named 'success' (https://gitlab.com/cpl/cpl-example/-/blob/master/src/index.js#L17)

3. activate both plugins

4. create a page that contains an alert block from coblocks

This first image is when the coblocks plugin is installed., the block displays with the style that the block author has intended. This is before my plugin is activated.

After activating my plugin, you'll see a result similar to the image below; where the font-size and the border of my block variation style leaks into the coblock because they both share the same class, .is-style-success

Examples of where this occurs or was mentioned:
CakeWP/block-options#249 (comment)

[skorasaurus]

Thinking aloud, this can be resolved by a couple ways:

• requiring to use a namespace or prefix at the beginning of the class name
• enabling Custom class names for block style variations - Allow custom style variation classNames #11763

[carolinan]

I agree with this, developers use a unique namespace and prefix, -even for custom image sizes and script handles, so they need to adopt it for the styles and block patterns too.

[gziolo]

@youknowriad, what would be your preferred approach to mitigate this issue?

[youknowriad]

enabling Custom class names for block style variations - #11763

I think one would be good to have regardless. So I'd favor this approach personally.

[peterwilsoncc]

This was discussed in the #core-editor triage session.

It was decided to close this as a duplicate of #11763 as both can be resolved with the same approach: allowing plugin and theme developers to specify class names that include a prefix, as suggested both above and in the linked ticket.