Building Gutenberg Blocks with Advanced Custom Fields
What is Advanced Custom Fields?
Advanced Custom Fields is a plugin for building additional content editing fields throughout the WordPress interface. You can build custom metaboxes, site options, user profile fields, and term metadata. See this presentation for more information on ACF.
With the introduction of blocks with WordPress 5.0, you can now use ACF to build custom blocks as well.
Examples of custom blocks
The homepage is built with the following custom blocks: header, industries, client logos, recent projects, and features.
I built a Table of Contents block that dynamically lists and links to the headings in the current article.
How to build custom blocks with ACF
I’ll walk you through building a simple “Team Member” block that includes a name, title, photo, and description.
Purchase and download ACF
Advanced Custom Fields is a premium plugin, so you’ll need to purchase a license from their website. The developer plan is a one-time fee of $100 for lifetime updates and unlimited websites, which is a great deal.
As of right now, version 5.8 of ACF (with block building functionality) is still in beta so follow these steps to download:
- Go to AdvancedCustomFields.com and log into your account.
- Under “Licenses and Downloads” click “See all versions”
- Download the most recent version (currently 5.8.0-beta3)
- On your website, go to Plugins > Add New > Upload to upload and activate the plugin.
Register the block with PHP
Build the block editor
Once the block has been registered, you can now go to Custom Fields in the admin and create your block editor. It works just like a standard metabox built in ACF. Under the location rules, select “Block” is equal to “Team Member”.
Build the block markup
The final step is to write the markup for the block. I created a template partial in
/partials/block-team-member.php , matching the
render_template parameter I specified when registering the block. My template partial looks like: