A Closer Look at New Features in Advanced Custom Fields 6.0

Comments Off on A Closer Look at New Features in Advanced Custom Fields 6.0, 08/10/2022, by , in Wordpress

Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.

Powered by RedCircle

Doc Pop: You’re listening to Press This, a WordPress community podcast on WMR. Each week, we spotlight members of the WordPress community. I’m your host, Doc Pop, I support the WordPress community through my role at WP Engine and my contributions over on TorqueMag.io. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download episodes directly at wmr.fm. 

In this episode we’re sitting down with Iain Poulson from Delicious Brains and now WP Engine to talk about the recent launch of Advanced Custom Fields 6.0 and a bunch of cool new features his team released with that launch. Ian, thank you so much for joining us today.

Iain Poulson: Thank you. It’s great to be here.

DP: I’m so happy to have you here. And I feel like I know a little bit about this but I’d like to hear in your own words. What is your WordPress origin story?

IP: Yeah, so I was introduced to WordPress back in 2009. I quickly realized how great it was and started to build a few sites for friends and family, and got my own blog up and running. And then I was doing an IT unrelated job that got sort of more serious, when at one point, my wife and I moved to London, and we’d both come off Facebook, and we’d set up this photo-sharing site that I think it was a private WordPress blog that only our family could look at. But my wife was just getting obsessed with Instagram and wasn’t very keen on manually sort of saving images from Instagram and putting them onto the web, onto the WordPress website in a kind of a different, you know, it wasn’t very easy. So yeah, it just precipitates me building my first-ever plugin to automatically pull in the content from her Instagram to the website. And I just got the bug, like, just working out how to do something within WordPress, build a custom plugin and get it kind of bending to your will was really good.

And so yeah, I’ve been developing free and premium plugins ever since really. And I ended up moving out of my sort of IT role that I was doing around 2013 to try and go all in full-time on WordPress trying to build plugins and I ended up bouncing around doing a bit of freelance work for an agency in London and then kind of in the meantime, found the role at Delicious Brains. This was 2014, I think because I was freelancing, and my son was due in the November, and I saw the job pop up for Delicious Brains in like August or September time. It just felt like, maybe I should have a bit more stability in my life, bringing a child into the world. It’s one of these things where you think, the rest is history, because I’ve been with Delicious Brains and now WP Engine ever since, and it’s been one of the best things ever. So yeah, it was a good decision back then. And yeah, it’s definitely been a long and good WordPress journey.

DP: I love to hear the stories about how people got started with a need and it seems like a lot of folks started off with photo blogs. I was already blogging back in like 2010, but I got hooked on Instagram, and there’s a good chance that I was using, I think Integrate is your plugin for Instagram integration. I’m not sure which of the ones I used, but I kind of have a feeling that might have been the first one I hooked up to my blog. So I appreciate what you did there.

IP: It’s just crazy isn’t it? It’s a small world of the internet.

DP: Yeah, and I also want to give just one more shout-out to one of the other projects you’re working on Flip WP which is just another great tool you have a bunch of really cool projects you’re working on, but we’re gonna talk about your current role with what you’re working on now at WP Engine. Can you tell us about like, where you now and what you’re doing now?

IP: Yeah, so obviously with the Delicious Brains acquisition of the plugins and moving across to WP Engine I am the product manager for ACF and I was doing that at Delicious Brains but with the numerous other sort of roles as well. But I’m focused on ACF, working with the team at WP Engine, and we’re continuing to grow and look after ACF. We’re stewards of the plugin. It’s one of these things it’s been around for so long, it’s moved from the original author Elliot, who, just massive kudos to him, shout out, because the plugin is just amazing. I’ve been a long-term user, I’ve developed for it, and I’ve loved it ever since.

So through Delicious Brains and now with WP Engine we are looking after this plugin and we have a responsibility to make it better, to keep making it more awesome, and just a kind of responsibility to the community because there’s so many people that love it out there. And you know, there’s millions of users who are using it. So yeah, within WP Engine, that’s my main focus, and it’s good to be actually focusing down on that and looking after it.

DP: How big is the A-Team [laughter] the Advanced Custom Fields team. The A-Team [laughter] y’all show up in your van and you’re like, let’s customize some fields. How big is the team right now?

IP: So right now it’s bigger than it was, which is nice because at Delicious Brains, it was generally a small company anyway, obviously in comparison to the WP Engine scale of things. But we had two developers on the product, and obviously myself, who was kind of product manager but managing the developers as well. We had a designer who was part of a small marketing team, but they worked on other plugins within Delicious Brains, so it wasn’t just a designer dedicated to ACF, or a marketing team dedicated to ACF. But now we’ve got, at WP Engine, the engineers have joined an existing team within the Atlas team and they’re now seven strong, which is great.

We also get the benefit of having a dedicated marketing team and a much wider team of folks to call on when we need it, which is amazing, because when you’re in a small company, you wear many hats, and actually, the beauty of having WP Engine looking after ACF now means we can call on more resources. So I’m really excited to see how you know how it can grow under that situation.

DP: How would you describe the ways developers and other users might use Advanced Custom Fields?

IP: Yeah, it’s a funny one because it’s ubiquitous, everybody sort of knows it. They use it. It’s a Swiss Army Knife that can be kind of used in different ways because it effectively is a great extension of WordPress. It’s one of these things that I think a lot of people over time have gone, “it probably should have been in core.” WordPress is not just a blogging platform, and obviously it’s tried to position itself as more than a blogging platform for a long time. But as a true CMS, it kind of falls down and I think ACF just makes it a CMS. It makes it a powerful sort of web framework where people can just go and create their own bespoke content management systems for their clients. It’s that powerful.

Because of that flexibility, we definitely see such a wide range of usage for ACF. You’ve got people who will install it because they’re creating a brochure theme for a client and they’re adding a couple of extra fields to the About Page or something like that, or the Contact Page, or they’re adding an Options page for global settings that are used across the site. But then you’ve got people on the other end of the spectrum who are using it to power huge websites that are pretty much like web apps at this point, because they’re leaning in on WordPress’s user management or authentication. They’re adding custom post types to do things and adding all the fields and, you mentioned FlipWP before, it’s like a marketplace website, and it’s built with WordPress and ACF and other things.

It powers some bigger things than you’d think and we’ve got some case studies now coming out of the ACF blog about companies that are using ACF on larger-scale sites or interesting use cases. Because, I think that’s the thing—it’s hard to understand how powerful ACF is until you use it and it’s a challenge from a marketing point of view, because when you look at the documentation site, it’s quite—it’s dry unless you know the reasons behind using these features. But the case studies are amazing because they kind of go into, this is what the site is trying to achieve, and this is how it looks, and this is what it needs to do. And this is how ACF is actually helping the site developer to do this, and the actual users to add content and, you know, the most recent one is a donation-type site. So yeah, it’s definitely worth checking out some of those posts and we’ve got more coming, because it really highlights how diverse the use cases are. Even simply, there’s definitely a large user base of people using ACF with page builders like Elementor, building sites. So it’s not just classic WordPress with a few custom fields here and there and then adding them to your template. It’s much more than that.

Even moving on from the classic side of ACF, the block editor, now in WordPress and Full Site Editing. We’ve got ACF users who are using the block editor, but they’re using the ACF blocks feature, which is part of the PRO plugin, but it allows people to easily use their ACF fields and the PHP templating language that they know, and they’re used to within ACF, but to create custom blocks. And they don’t have to up-skill straightaway and learn all of the JavaScript and the React tooling required to create custom fields. So it allows them to seamlessly bridge between what they know and love about block-based development and it gives their clients the ability to create content within the block editor, which is becoming more and more heavily adopted. But their development is aided by ACF. So yeah, there’s definitely a big spectrum, there’s a lot of demographics and types of users, but it’s fun because we’ve got to kind of help everybody using ACF in those ways.

DP: And we’ll talk more about the new block features and what’s coming and what’s come out in Advanced Custom Fields 6.0 after the short break.

DP: You’re listening to Press This a WordPress community podcast on WMR. My name is Doc Pop. I’m here with Iain Poulson from Advanced Custom Fields telling us now about what’s new in Advanced Custom Fields 6.0, which launched a couple weeks ago. Iain, can you tell us about some of the new features?

IP: So yes, 6.0 is a big release, really, it’s big in a number of ways. It was started before the Delicious Brains plugins were acquired by WP Engine. And its main focus has been a UI refresh. It’s been long in time and long in scope and it’s felt long, because we kind of had this transition in between, right. So it’s definitely been a long time coming. But yeah, the main focus has been, we’ve been given the old plugin UI—so the admin of ACF where users will go and add their field groups, and add their fields to the field groups, and get everything kind of defined—that admin UI has been given a reskin. And we’ve tried to stay close to the original. I mean, original ACF looks like WordPress in the admin. We’ve tried to stay along those lines, but tried to refresh it.

We’d already been rolling out updates to the other Delicious Brains plugins with refreshed UIs slightly differently, you know, slightly more modern. And so it was kind of following along with that. But it’s not just a UI change. We’ve tried to tackle user experience issues with the plugin when editing fields. So yeah, I think we’ll talk about that later. There’s not necessarily a theme to the release, it’s been a collection of things and UI has been a big part. We’ve also kind of, you know when ACF, especially with ACF blocks, it’s very tied to what WordPress does. So when WordPress changes things like Full Site Editing, for example, you kind of have to roll with that and and try and keep in line, so sometimes our releases are slightly dictated to, to how we need to improve, and how we integrate with WordPress and ACF blocks is a big part of that. And that’s another big example of what’s in that release.

DP: So I know that the updated UI was kind of a passion project for you, but it’s not a total overhaul. It’s just kind of fixing some problems that you’ve had for a while or making things easier to find?

IP: Yeah, it was a combination of this sort of light reskin, refresh to try and make it look a bit more modern and bring it in-line with our other plugins to a degree, but it was also a great time to tackle some user experience issues and shortcomings that were there, that I think because ACF has been around for so long, there are a lot of things that you just kind of accept that are there. And there’s definitely some nuances to the user experience that for first-time users aren’t great. Obviously, we’ve got a lot of existing users that are very used to the way of doing things, but we tried to try to tackle a number of things. The big thing that hits me every time—I still use ACF for my personal sites, for other things, and we use it for the Delicious Brains website and the Advanced Custom Fields website.

So we’re users of our own product, but it hits me every time when I go in a field. And as soon as I click on the field to change the settings, it opens the field drawer, and it kind of takes up the whole page, because you’ve got the whole kitchen sink approach to showing all of the settings for the field. It’s pretty hard to then navigate around because you’re kind of lost with this complete takeover of the screen from just that one field. So it’s hard to then go and find the next field or you know, add the next field or go back up to a previous one. So we tried to reduce the kind of vertical height that everything was taking up within the admin screen.

So the biggest thing around that is we’ve taken field settings that were previously just laid out, one after the other, which increased that length of the page. And we’ve logically grouped the settings together and put them behind tabs. So, the improvement to the vertical spacing is huge there, because the field settings are just naturally a lot smaller. So you can you can see probably three field settings on a normal size, MacBook screen or whatever. But also, it’s not overwhelming to new users who come in and want to add a new field and then suddenly have all of this stuff thrown at them. They can make their way through the tabs in a logical order to think, “right, well you know, these are my base settings for the field type, the field name, the label key, and then let me think about validation. Do I want it to be required? Do I want some conditional logic to this?” And it’s guiding them through the experience of creating fields a lot more than it perhaps was before.

And yeah, just another thing when you’re in that field editing screen and you see lots of things open, it’s very hard to then think, how do I close that? How do I get back to more of a confined space so I can then add or find the Add New Field button. So we’ve kind of improved where you can click to close the field drawer. There’s a little arrow like a chevron that shows if it’s open or collapsed. And all of that is now clickable, whereas before it was pretty finicky to find how to close it up. And we’ve got this toolbar at the top that will stay sticky on scroll. So it’ll always be at the top, wherever you are on the page, which will have the Save Field Group button. So you don’t have to scroll all the way back up to the top to save changes. You’ve got an Add Field button so it’s always there when you need to add a new field, you don’t have to kind of fight with the layout and the UI just to kind of do some basic things. So yeah, we hope that a lot of these things that maybe in themselves seem small but put together there’s there’s definitely some improvements, you know, in total.

DP: That was the Repeater Pagination that you’re talking about, right?

IP: So that’s its own separate feature that’s come in 6.0. But it was more just like, when you’re editing a field group, and you’ve got, say 100 fields in this field, or you know, 10 Fields even in this field group. And this is where you’re defining the fields, and you’ve clicked on one to open it, and it just takes up the whole screen. And then you’ve got to go find, “well now I want to change the settings of the one below it.” And it’s quite hard to kind of navigate around, and that’s just the field definitions, which are part of the plugin admin.

But yeah, the Repeater Pagination is a good callout though, because that is a big part of the 6.0 release as well. So just some context behind this, the Repeater Field, which is part of the PRO plugin, which allows users to kind of define a field of the repeater type, and add sub fields to this repeater. So, say for example, you’ve got a very simple agency website and you want to display all of the members of staff, but someone’s got to enter that data. And it could be 10, 20, 30 or whatever members of staff. The Repeater Field gives you that ability to say, right, this field is going to contain the data for the staff list, and the sub fields would be “name.” It’d be a text field.

The next thing might be “position,” and that could be a drop down, a set of data, a list of positions, and then there might be an image for their avatar or the headshot. So when, you’re now on the About Page, for example, and you’re editing the About Page in the WordPress admin, you’ve got this meta box that contains this repeating set of data. So you’ll go in and say, add new member of staff, and then you can fill out the name and all the fields that we defined. And then obviously on the front end that will be rendered in whichever way the designer wants to render it—in a grid or list view or whatever. And that’s the power of the Repeater.

And it’s amazing, but, of course, the use cases again with ACF vary, so people store five different rows of data in a repeater field, but sometimes people use it to store thousands of rows of data, just depending on what it is. And the biggest problem with that kind of usage of the Repeater, is that in pre-6.0, in ACF 5 and below, when you’re editing a page that has the Repeater Field data in it, it loads every row of data, and that makes the whole loading of the page slow.

There’s definitely sometimes issues with timeouts and similarly, when you’re adding data or editing data in Repeater and you hit “Save Post,” it has to send all of that data back to save it. So you’re then sending back thousands of rows with, you know, maybe five, maybe 10 subfields. So you’ve got lots of inputs of data that are going to potentially cause performance issues on the site, and it might fail to load, or it might fail to save. And, you know, people have, I mean, this is this is something we’ve had for a long time, people coming to support with issues because it’s a problem. And so, what we’ve tried to do is to sort of mitigate those issues for those types of Repeater Fields. It’s not going to work in the example or—it’s not even needed in the example that I gave with the members of staff, if you have 20 members of staff, because it’s going to load quickly and it’s not a ton of data to save.

But for the users that have large data sets, the Repeater Pagination setting that we’ve added to 6.0 is a way to sort of get around this. One of the Repeater Layout settings is like a table grid, and basically, the Repeater Pagination setting, once you toggle that on—and you can say how many rows per page should we show—so when the content editor is editing that data within a post or page edit view, once they load the page, it will only load the first 10 records for example, which is going to be ridiculously quicker than loading 1,000 records.

And they can page through to the next page and get the last page back because all of this sort of stuff. And it will load the data on the fly, so it’s not holding them up on loading. And one of the biggest parts of it is also how we then save the data. Instead of sending all of the rows back, regardless of if they’ve changed when you hit save post, we will only send the data that’s actually changed. So new records, deleted records, and updates to existing records. So the saving is going to be much quicker as well. It’s one of these things that you’re probably not going to need it unless you need, it if that makes sense. But it’s a godsend for people with large bits of data.

DP: Absolutely. I definitely want to get more into this but we’re gonna take a short break and then we’re going to come back and talk to Iain Poulson from Advanced Custom Fields about how Full Site Editing has changed things over at ACF. So stay tuned.

DP: You’re listening to Press This, a WordPress community podcast on WMR. I’m your host Doc Pop here with Iain Poulson from Advanced Custom Fields, which just launched ACF 6.0 with a lot of big improvements. We just talked about what’s happening over on the UI and some big changes happening on that side. One of the things that comes up a lot, Iain, is Full Site Editing and its effect on WordPress. And I’m kind of wondering with a giant plugin like Advanced Custom Fields, what is the effect that Full Site Editing is having on ACF?

IP: Yeah, I think it’s definitely had an effect and obviously because we’re catering for block editor development with ACF blocks, it’s been something that we’ve had to try and keep on top of and try and keep making sure that we’re compatible with.

It’s funny though, before Full Site Editing came in, I can’t even remember which version of WordPress that is, but before that came in, ACF was kind of impacted a little bit earlier, because the block type of the Query Loop block was released, I think in WordPress 5.8, potentially. So that was before Full Site Editing, but we needed to make ACF blocks compatible with that. They also introduced the block-powered widget editor instead of like the classic widgets, so we had to make sure that everything ACF block-related was going to work with that.

So yeah, we’ve made a huge amount of improvements to how ACF blocks works. And people who are using it quite heavily, like the idea of InnerBlocks with ACF. 6. So it’s making sure that ACF users who are leaning into the block editor with ACF blocks, kind of get the best possible experience with the Full Site Editor and WordPress development, Gutenberg, as it’s known as the plugin, and the block editor has changed rapidly and it’s changing all the time. So we kind of have to keep up with that. We’re always talking about it internally, but also on the blog post, 6.0 is almost ACF blocks version two, we’ve given a new way for developers and people to to register ACF blocks, so they can now utilize the block dot JSON format for registering their ACF blocks, which is more aligned with how WordPress, how people register their custom blocks with WordPress natively.

But it means, with doing that, we can get all of the benefits that WordPress gives to that block dot JSON format. So, any new features that are added for blocks, kind of automatically get passed down to ACF blocks, because we’re using the same way of registering the blocks. There’s definitely been more work than I think we thought to kind of keep ACF blocks and ACF in line with Full Site Editing and the block editor but yeah, knowing how our users are using that and kind of loving ACF blocks, it’s worthwhile, but yeah, Full Site Editing is pretty major for sure.

DP: Yeah, absolutely. And that’s interesting to think of ACF 6.0 is basically, you know, version two of ACF blocks. There’s a lot we didn’t get to talk about yet. There’s a lot of changes. And at the end of the show, we’ll let people know how they can find out more about you and what you’re working on and ask any questions. I’m just wondering quickly, what is the one feature you’re most excited about in this new version of Advanced Custom Fields?

IP: I think it’s probably, personally, the Repeater Pagination feature, just because it’s one of these things that if you’ve been hit by it, then it’s going to really improve your sort of quality of life. But it also, it’s one of these things that we’ve come across ourselves. We’ve been using the Repeater Field on the deliciousbrains.com site where you know, it’s something that I’ve heavily used in the past. But we’ve been hit by this exact same sort of problem, and we’ve had to hack around it. And we’ve seen the performance issues. So this pagination setting is just great to be able to say to the developers working on our site, “do you want to just go check out the ACF 6.0 build and see if this improves?” And it’s like “yeah, wow, that’s taking care of a lot of problems that we had.” So yeah, that’s a personal one.

DP: Well, like I said, there’s a lot we didn’t get to talk about. There’s a lot of new things coming into Advanced Custom Field 6.0. Iain, I appreciate your time today. If people want to learn more about what Iain is working on, they can visit him on Twitter @polevaultweb or you can go to advancedcustomfields.com to learn more about Advanced Custom Fields.

Thanks for listening to Press This WordPress community podcast on WMR. You can follow my adventures on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm. I’m your host Doctor Popular, I support the WordPress community through my role at WP Engine, and I love to spotlight members of the community each week on Press This. Thanks for listening.


About Vikram Rout

Vikram Rout has been a blogger, digital marketer and an SEO expert at Pixxelznet.com, one of the fastest growing custom design crowdsourcing platforms. Over the years, he has been helping small businesses and startups improve website design and SEO strategy, content marketing and user experience. You can engage with him on here.