On April 30, 2020, I learned...

There’s a difference between WordPress block styles and block variations

The concepts are similar, but they’re quite different.

This is how the WordPress Block Editor Handbook describes block styles:

Block Style Variations allow providing alternative styles to existing blocks. They work by adding a className to the block’s wrapper. 

Compare that to how the Make WordPress blog post introducing block variations explains them:

Just as you can declare a block’s style variations when you register a block, a block type can define block variations the user can pick from. The difference is that, beyond changing the look, this field offers a way to apply initial custom attributes and inner blocks at the point of insertion.

The answer is in that last sentence. Even though both introduce variations of a particular block, block styles are selected from the Block settings panel and block variations can be dropped into the post editor using the Block Inserter.

The syntax fore registering a block style:

wp.blocks.registerBlockStyle(
  'core/quote', 
  {
    name: 'fancy-quote',
    label: 'Fancy Quote'
  }
);

And here’s the syntax for a block variation:


wp.blocks.registerBlockVariation(
  'core/quote',
  {
    name: 'fancy-quote',
    title: 'Fancy Quote',
  },
);

The documentation for block variations is lacking at the moment (which is odd for WordPress), but the Make WordPress post outlines the full set of available parameters that are available to pass in there.

Leave a Reply

Markdown supported