Block style variations (block styles, for short) let you create alternate styles for individual blocks. Registered styles appear in the user interface, allowing users to quickly switch between the default style and any alternates.
Many features, unfortunately, use the term “variations” in their name. This can be confusing at times. The biggest thing to note is that block style variations are not the same thing as global style variations and block variations.
Often, you will see block style variations referred to as “block styles,” as they are in this article, but this should also not be confused with block stylesheets. The two features can be used to work together, but they are not the same thing.
What are block styles?
Under the hood, block styles are nothing more than CSS classes added to a block’s wrapping element with the name of .is-style-{name}. This allows you to add custom CSS to alter the block’s design in some way.
In this screenshot, you can see multiple block styles registered for the Image block under the Styles panel, and the core Rounded option is selected:
