Skip to main content

New Custom Block-Building Features Released in Advanced Custom Fields 6.3

Over the last couple of years, I’ve attended nearly a dozen events, big and small, where the topic of building custom blocks with Advanced Custom Fields (ACF) has triggered serious interest and excitement amongst the audience.

It’s no surprise that developers are simultaneously excited by the future of the WordPress experience while also wanting to leverage the development workflows they have refined for many years. The ACF team here at WP Engine loves this—it represents the best of what has brought us here, combined with the potential of where we can go!

With this in mind, the ACF team is working hard on a series of releases to enhance custom block building with ACF even further, starting with the just-released ACF version 6.3. These new features and capabilities will help you lean further into modern WordPress while leveraging your skills in PHP. 

Let’s have a look!

Field validation support for ACF Blocks

Restricting what data can be entered into a form field is an important part of a well thought through editing experience in WordPress. 

Validation rules facilitate this in form fields, and although these have been configurable for traditional ACF fields for some time, they haven’t functioned for fields in ACF Blocks. Version 6.3 changes that! You can now set up custom validation rules for your block fields.

Let’s have a look at an example below. I have a custom block that I have built for the hero section of a college website. For the way I want this block to be used I want to make sure that:

  1. The heading is never left blank
  2. The heading does not exceed a certain number of characters

In the field group settings, it’s easy to set the validation rules.

Setting validation rules on a field

Now in the content editing experience, you can see below that when the rules are not met, I see a visual warning for what needs to be done. Additionally, until the rule is met the editor cannot save the post.

Example of validation error notification in the block editor

Storing ACF Block field values in post meta

By default, WordPress stores field data within the HTML comments of a block in the post_content column of the posts table. This works for many scenarios, but there are plenty of occasions where you may want to store and read data from the post_meta table. 

Version 6.3 makes this possible with a new attribute you can include in your block.json file: usePostMeta: true (default false). You can now enter your structured data through the blocks interface rather than deferring to the traditional custom fields interface.

block.json file including new usePostMeta attribute set to true.

New icon picker for custom post types and options pages

The custom post types and options pages you can easily spin up with ACF appear in the sidebar of the WordPress admin area. When working with ACF for this, you have been able to set an icon to sit alongside the text label. 

Version 6.3 introduces a simple icon picker that pulls in the open-source dashicon library. You can still select and set your own, but when you want to work with the native icon library of the WordPress admin, this new icon picker speeds up the experience.

New icon picker within ACF 6.3

For the astute ACF user, you may see this icon picker and think, “Why don’t we make this a new general field type?” Well, we did!

New icon picker field type

Leveraging the good work mentioned above, there is now a new field type: the “Icon Picker” field. When an editor needs to pick a dashicon icon or one from the media library, you can now add an icon picker field. 

Most modern web designs use icons in some way, and ACF users no longer have to leverage alternative field solutions for these. We plan to add extendability to this field type in a future release so that you can easily load other popular icon sets. 

Selecting the icon picker field type in a field group

These were the big headlines for the release, but it also includes a number of other improvements, which you can read about in the full release post from the ACF team

Visit the ACF website if you would like to use ACF to push the boundaries of what you can build with WordPress!

Want to level up your ACF game?

We run several events, community spaces, and content hubs for those who build with Advanced Custom Fields. If you want to learn more and find other like-minded WordPressers, check out
WP Engine Builders.

Wp-dd.com

WordPress Design, WordPress Development, cPanel Hosting, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) and more.