In this members-only tutorial, we'll go through a code example of registering a new gutenberg block with ACF Pro, using a custom plugin. We'll be adding multiple style variations to the block to give content editors more layout/style options.
Style variations allow us to provide more out-of-the-box versions of blocks without needing to lots of settings. It's also a nice alternative to just adding a class to a block as there's an actual UI with visual previews of the variations.
Call to Action Block
This simple example will be for a call to action block with custom fields for the title, text and a button link. We'll then add three extra style variations for content editors to choose from when adding the block. The previews inside the editor will automatically show the variations with the CSS we have applied for each version of the block.
We'll use the my custom functionality plugin to register our new block, build the block template and for the CSS we need for the block and it's variations.