12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Apr 8, 2020

Adding Style Variations & Previews to ACF Blocks via Plugin

David Browne

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.

Register the Custom Block

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.