The Gutenberg Editor (or Block Editor), introduced in WordPress 5.0 in 2018, revolutionized the WordPress editing experience when it replaced the Classic Editor as the default option. To further improve the block editing experience, many developers turn to Advanced Custom Fields (ACF). This WordPress plugin allows users to add extra custom fields to WordPress editing screens, extending the Gutenberg editor’s functionality.
Now, in 2023, some developers might question whether building Gutenberg blocks with ACF is still the right move for their web projects. Some have tossed around the idea that it’s better to use native Gutenberg blocks because full site editing is coming.
However, it’s our opinion that ACF is still one of the best ways to develop your custom Gutenberg blocks. In this post, we’ll explain why and highlight some relevant ACF updates.
What are the benefits of using ACF to build Gutenberg blocks?
We can sum up the benefits of building Gutenberg blocks with ACF in three words: simplicity, speed, and familiarity.
Building Gutenberg blocks with JavaScript can be time-consuming and requires many developers to learn a whole new coding language. ACF makes the process much more intuitive, allowing you to create blocks using the familiar coding language many of us have been comfortable with for years — PHP.
Furthermore, using ACF makes the block-editing process much simpler for clients who need to add or update content themselves.
What’s the benefit of creating your own Gutenberg block with ACF rather than using the pre-made options?
Using ACF, you can develop Gutenberg blocks that better suit your unique website needs. You won’t be restricted by the limitations of core Gutenberg blocks or be forced to use one or several plugins to achieve a particular level of custom functionality. This allows you to tailor your website exactly to your (or your client’s) preferences.
What’s new with ACF?
There are plenty of exciting new ACF developments that make the plugin even more beneficial for your development projects.
ACF 6.0 was released in September 2022, unveiling a fresh user interface, greater accessibility, and other new features that offer more flexibility to developers. Here are a few relevant ACF updates to be aware of:
ACF 6.0 Blocks can use block.json
JSON is WordPress’s preferred format for registering blocks. It encapsulates the information WordPress needs to know about each block.
Block.json is new in WordPress and has now been added to ACF. This update makes it even simpler to tell WordPress that the block you’ve created is an ACF block and specify the values you want to add to it.
Here is an example of what your block.json file might look like:
{
"name": "namespace/accordion",
"title": "Accordion",
"description": "A block used to show an Accordion.",
"editorStyle": "file:./editor.css",
"editorScript": "file:./editor.js",
"style": "file:./frontend.css",
"script": "file:./frontend.js",
"category": "block-category",
"icon": "table-row-before",
"apiVersion": 2,
"keywords": [ "accordion", "block" ],
"acf": {
"mode": "auto",
"renderTemplate": "accordion.php"
},
"supports": {
"align": false,
"alignContent": false,
"alignText": true,
"anchor": true,
"color": {
"text": true,
"background": true,
"link": true
},
"customClassName": true,
"fullHeight": true,
"jsx": true,
"spacing": {
"margin": [ "top", "bottom" ],
"padding": true
},
"typography": {
"lineHeight": true,
"fontSize": true
}
},
}
Many of these settings align with the typical settings for registering an ACF block type, with a few changes made to the name, script, and style parameters.
ACF Blocks can inherit Gutenberg controls
Inside block.json, Gutenberg controls were previously only available for JavaScript Gutenberg blocks. You can now apply some of the same controls to an ACF block as well — they can be enabled using the ‘supports’ property.
For example, if you want to allow a user to be able to change the background color of a block, you can add the ‘color’ property, then set the ‘background’ property to ‘true’, as seen above.
With that completed, you will then need to get the property set by the user, like so:
$my_block_classes = [];
if ( ! empty( $block['backgroundColor'] ) ) {
$my_block_classes[] = 'has-background';
$my_block_classes[] = 'has-' . $block['backgroundColor'] . '-background-color';
}
Finally, implode your block classes array into the top level of your block, like below:
<section class="my-block-name <?php echo ( ! empty( $my_block_classes ? esc_attr( implode( " ", $my_block_classes ) ) ) ) : ''; ?>">With that completed, the color your user selects will be applied as a background color to your block. Keep in mind that if the WordPress color palette defaults aren’t overridden in theme.json, those defaults will be the colors available to the user.
You can “scope” block styles and scripts to each block
Along with the block.json update, WordPress is encouraging developers to use the WordPress npm package, wp-scripts (aka @wordpress/scripts), to prepare blocks for rendering on the front end. This allows each block to independently have its own styles and scripts.
WordPress automatically in-lines the styles and scripts for a block, as defined in block.json. This technique can make pages load faster because they will only appear when the block is present. The other major benefit is that if a certain block doesn’t appear on a page, it won’t load that block’s scripts and styles. This can save on your bundle size and will also keep one block’s styles from impacting the others.
ACF 6.0 features significant UI updates
With ACF 6.0 comes a refreshed look for the plugin, with updates made to admin screens such as the field group editor and tools page. For example, ACF has reduced the height of the fields settings screen by grouping settings into tabs.
ACF has also made significant strides toward greater accessibility. Now, users can edit fields using only keyboard navigation. Also, ACF has improved focus styling for keyboard navigation, making it easier to see where you are on the page.
Coming soon: Built-in Custom Post Type and Taxonomy creation
With the expected release of ACF 6.1 in the next few months, ACF users can look forward to custom post type and taxonomy creation within the plugin itself! This is huge news and will help many developers as it might allow them to remove a plugin from a site or allow them to build out custom post types without manual coding. Another nice perk of how ACF is planning to implement this functionality is that all of the Custom Post Type and Taxonomy configuration will be written to local JSON. This means it can be committed to a repository like GitHub, just like the custom field JSON.
Extensions make ACF even more flexible
Dozens of extensions can add supplemental functionality to the ACF framework. One of the most helpful is ACF Extended, an enhancement tool that adds over 100 additional features, such as new fields, new field groups, and bi-directional fields. However, ACFE can be overkill in certain use cases, as all those additional features can add unnecessary bloat. Choose your extensions carefully. There are also plenty of unofficial plugins available that you can use to further build out your web projects with supplemental ACF tools.
The ACF community is growing
WP Engine purchased five popular developer-focused WordPress tools in 2022, including ACF. With this acquisition, the ACF team has become much more vocal, hosting twice-monthly community-oriented ACF Chat Fridays. Follow ACF on Twitter to stay in the know about when these chats take place and the topics they cover.
Wrapping Up
Looking for tips and guidance to help you make the most of your WordPress project? Reach out to Kanopi’s WordPress team or connect with other users via the ACF support page. It’s an exciting time in ACF history, so don’t hesitate to get involved in the community today.
