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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: