Create a Guide for using the Block Styles API

[fabiankaegy]

Discussed in https://github.com/10up/gutenberg-best-practices/discussions/1

^{Originally posted by fabiankaegy October 8, 2021}
The block styles API allows you to quickly add style variations of a block. They have a nice visual preview in the Settings Sidebar and allow you to easily switch between styles in the Block Switcher.

API

There is a PHP and a JS way to register the styles. There isn't a clear winner for best approach but for consistency sake we should decide on the standard way to make it easier to be consistent between projects.

Issues

The issue with them is, that you cannot combine multiple block styles. You can only select one. This leads to many projects endding up with manny manny block styles because they start out with lets say 3 styles and the client then want's to be able to combine these styles and so you very quickly have to add styles of combinations and therefore now have n^3 styles.

For many things it would be easier and better to add toggles to allow you to change things.

What exactly the factors to go with either option are still up for discussion.