WordPress 5.0 ships with a new editor called Gutenberg. Here at WebDevStudios, we’re excited to build custom editorial solutions using Gutenberg and to see how the experience evolves from the classic editor.
With that said, we’re huge fans of Advanced Custom Fields (ACF). It provides a robust set of field types that enables us to create flexible and friendly content management solutions for our clients. The time we save from writing, testing, and maintaining code with ACF makes it worth paying for an ACF PRO license. Our wd_s starter theme includes commonly-used content blocks built on ACF.
ACF and Gutenberg
- ES6, the right parts by Kyle Simpson
- React for Beginners by Wes Bos
- Comprehensive List of Resources from Frontend Masters
You will be recreating a simpler version of the hero area that is included with wd_s. This is the end result of the custom Gutenberg block that you will create:
- Gutenberg (WordPress 5.0)
- Advanced Custom Fields PRO 5.8.0
Step 1: Register the Hero Block
acf_register_block function with 5.8, which you will be using to register a custom Gutenberg Hero Block.
The example below shows how to register the hero block. You can drop this function in the
functions.php file of your theme.
To learn more details about each parameter of the
acf_register_block function, visit the official documentation.
Step 2: ACF field group for Hero Block
A field group is a set of fields that can be assigned to a WordPress post, page, widget, etc., and now a custom Gutenberg blocks registered with
Next, you’ll add a new field group for the Hero Block from the Custom Fields page.
The basic field requirements for this block are:
- Tab field: Block Content
- Title field
- Text field
- Button text field
- Button URL field
- Tab field: Background Options
- Background image field
Next, assign the field group to the Hero Gutenberg Block.
To reiterate, Block is a new rule type in ACF which refers to all Gutenberg blocks registered with
Save your changes!
This is how these fields will display in Gutenberg:
Step 3: Set up the Hero Block template
Custom Gutenberg Block created with ACF will use a template file to display it within the Gutenberg editor and on the frontend.
Create a template file
template-parts/gutenberg/hero.php within your theme’s folder to match with
render_template parameter of
acf_register_block defined in Step 1.
The template file will contain HTML markup to add layout and return data from the fields.
get_field function from ACF is used to get data from the ACF fields.
This is how the block looks within the Gutenberg editor:
Step 4: Styling the Hero Block template.
The final step is to style your Gutenberg Block.
To do this, you will be using the
enqueue_block_assets action. This hook is used to enqueue assets for Gutenberg’s editor and frontend. If you want to have a separation between frontend and backend styling, you can use
enqueue_block_editor_assets to enqueue assets only within the Gutenberg editor.
Drop the following code in your
functions.php file to enqueue the stylesheet for your custom Gutenberg Hero Block:
gutenberg.css in the root of your theme’s folder and drop the following code for styling the block:
CSS is compiled from
And this is how it will look on the frontend:
acf_register_block is extremely powerful considering that a filter can be added to settings array to be used by other themes and plugins to make it even better (or worse).