Wibble have been using a hugely powerful tool in their web design and development processes for around five years now called Advanced Custom Fields (ACF) – it is an advanced tool for WordPress developers “to take full control of your WordPress edit screens & custom field data”.
We do not start a web site design and development process without considering the role that ACF will play in the project – we have repeatedly said that ACF was the tool that made WordPress the CMS of choice for us as a studio as it took WordPress from a simple blogging set up to a full blown content management system.
ACF and Gutenberg
Wibble have been blogging and experimenting with Gutenberg for quite some time now, we wrote posts on The Gutenberg Editor, coming with WordPress 5.0 and also on Gutenberg: An Overview of the Interface to cover a number of the new features that were being brought into WordPress with the move to 5.0.
Register a Block
The process for setting up an ACF Gutenberg block is fairly simple. I’ve outlined this below:
Time needed: 1 hour and 30 minutes.
Creating Gutenberg Blocks using Advanced Custom Fields (ACF) 5.8 Beta
- Register an ACF Block
First off, you’ll need to make sure you’re running the ACF 5.8 Beta. This is required for now if you want to experiment with ACF Blocks. Once that’s in place, you’ll start by registering your block.
You’ll need to start with using acf_register_block(); This is a function that’s similar to the register_post_type() function, you’ll need to specfiy some key values. This includes: name, title, description, render_callback, category, mode, icon, keywords and supports.
These values line up with the WordPress documentation for creating custom Gutenberg blocks, so if you’re not sure about the values, you can actually refer to that.
- Create the ACF fields
This is standard practice for creating your standard ACF fields. Go to Custom Fields > Add New, and configure some custom fields. Then, where you would usually specify page rules for where the fields show up, you simply select ‘Blocks’ from the first dropdown. Then, you can choose the block that you registered.
- Setup the block files
The next thing you’ll need to do is setup the block files. You can create a folder for the different blocks you plan to made. Using the function below, ACF can link to that folder and find all the blocks. Then, in the file, you can use PHP to create your block, instead of React. It’s much easier this way.
In the acf_register_block function, one of the items in the array is ‘render_callback’. This points to a function that controls what the block actually does on the front-end of the website. As you may have multiple blocks with many lines of code, it’s best to put these in a separate place. In this example, I’m pointing to the assets folder I created. Inside that folder, I’ve created another folder to contain block assets. Then inside the blocks folder, we point to the PHP block file. If we were only going to create one block, we could just put the full path in. But because we may have many different blocks, we’re using the block name as a variable to point to the different block files that we will create.
- Create the block
To most of our clients and users of our sites, this new feature won’t effect their website or web app directly as we manage the process and take care of all the development requirements directly.
However, we feel it demonstrates Wibble’s approach to our development process and we are happy to help other web design and development studios with the above demo of how to implement it. We keep up-to-date with how WordPress is developing and we actively update and manage all our web design clients and their web projects who avail of our managed WordPress support.
This engagement of ACF with Gutenberg is certainly a positive for the WordPress community, we see this as a huge step forward for the new editor and are excited to see when ACF takes their plugin over the next 12 months.