Building Blocks using ACF and PHP

This presentation was given at WordCamp Greenville in Greenville, SC on March 7th 2020. The slides from this presentation as well as the recording can be found at the end of this post. The GitHub Repo with all code in the presentation can be found in my GitHub profile in the wcgvl repo.

Last year I was selected to speak at WordCamp Greenville 2020 about building for Gutenberg. I had spent the last year or two trying to teach what I know about building blocks using tools like create-guten-block, but the learning curve of React has made that a bit more difficult. I decided to pivot the approach a bit and focus on how you can use Advanced Custom Fields Pro (ACF) to build blocks for the block editor.

The talk briefly went over the benefits of upgrading to the block editor, and how to do some simple modifications. They included restricting the block editor by defining allowed blocks and disabling font size selection and extending the block editor by defining a theme specific color palette. I also mentioned where to start if you wanted to use Javascript and React to build blocks and why you might choose that over using ACF.

On to building blocks using ACF

I framed the talk around a sample block I had already built. I went over the few steps you might take to add fields to the block, the code to register the block using PHP, and the callback function to display the content on the frontend and in the WordPress Admin. With about 15 minutes remaining I took a suggestion from the WordCamp attendees and built a block to show just how easy it could be.

As a bonus I was asked to join the panel at the end of the day to field whatever questions the audience may have had. It was an extremely rewarding experience all around.

Check out the slides below or the accompanying GitHub repo to try it out for yourself!