13 Dec

ACF 6.0.6 Release – Improved Flexible Content Layout UX, Disable Field Settings Tabs and More

By Iain Poulson

Advanced Custom Fields version 6.0.6 is now available! 🚀🎉

In our last release of 2022, we bring you a festive release of bug fixes (turkey) sandwiched between a couple of huge UX improvements. So just call me Santa, and let’s get into it!

Improved Admin Experience of Flexible Content Layouts

The Flexible Content field is one of the more powerful and complex field types ACF PRO has to offer. As a layout builder it has many uses for site development, and more often than not, ACF developers use it to create a page builder experience for their clients, like we saw with the recent Rareloop case study.

However, the user experience of adding and editing layouts hasn’t always been great for such an important field. When you have a large number of layouts, it can be hard to navigate and find the layout you need to edit.

For example, here is the UI in ACF 5.0:

Flexible Content field layouts on ACF 5

We gave the field a design refresh as part of the ACF 6.0 release but it just highlighted the issues with the UI and UX further:

Flexible Content field layouts on ACF 6.0

We’ve listened to some excellent feedback from our lovely customers and the team’s been hard at work designing and implementing a much improved experience when adding and editing layouts. With this release we’ve added:

  • The layout name now appears at the top of the layout, making it easier to identify each layout.
  • The ability to collapse layouts so you can easily see the other layouts you are working on.
  • All layouts are collapsed by default to help regain some screen real estate and make it easier to navigate and reorder.
  • Layout actions are now buttons that are always visible, instead of hidden links only revealed on hover, for deleting, duplicating, and adding layouts.

Let’s see how that looks now:

Flexible Content field layouts on ACF 6.0.6

Which makes it so much easier to use:

Editing Flexible Content field layouts with ACF 6.0.6

If you prefer your layouts to be open by default, as they were previously, then you can use the acf/fields/flexible_content/layout_default_expanded filter to enable that:

add_filter( 'acf/fields/flexible_content/layout_default_expanded', '__return_true' );

We hope this is a welcome change to the Flexible Content field user experience, and allows you as developers to define layouts faster and easier. 🙌

Disable Tabbed View for Field Settings

Our 6.0 release came with a fresh new UI and we acknowledge this was a big change for many of our users. One of the biggest challenges that our more experienced users found with the release was the reorganization of the field settings into different tabs. Although this logical grouping of the field settings makes it easier for some users to create and edit fields, and reduces the vertical height of the field settings panel, it did impact the workflow of others – something we most certainly didn’t want to do.

We have listened to user feedback and as of this release there is a new ‘Screen Options’ setting to turn off the field settings tabs, which puts all the field settings in one large panel like it was in ACF 5.0:

Disabling the tabbed view for field settings in the ACF field editor

For those users who want to remove the tabs programmatically on all their websites, the acf/field_group/disable_field_settings_tabs filter is your friend:

add_filter( 'acf/field_group/disable_field_settings_tabs', '__return_true' );

Faster Loading of the Field Group Editor

As part of our continuous improvement of the 6.0 UI, we’ve changed how the field JavaScript is initialized which resolves performance issues in the Field Group editor when fields have numerous subfields. This was especially evident for Safari users.

🙌 Thanks to everyone who helped make this release possible.

Are you excited about the new improvements to the Flexible Content field UI or anything else in 6.0.6? Let us know in the comments below or on Twitter.

Changelog

  • New – Flexible Content field now has a new admin user experience when editing layouts
  • New – Tabs for field settings in the field group editor can now be disabled via a new “Field Settings Tabs” screen option or with the new acf/field_group/disable_field_settings_tabs filter
  • Improvement – General field settings tab now selected by default when a field is opened
  • Fix – Sub fields are no longer initialized by their parent, resolving performance issues when field groups contain many nested sub fields
  • Fix – Frontend forms now disable the submit button after click to prevent multiple submissions
  • Fix – Unknown field types no longer display broken HTML in the field group editor
  • Fix – Returning an empty string via the acf/blocks/no_fields_assigned_message filter will no longer result in blocks without fields assigned having an extra wrapping div
  • Fix – Sites with WPML enabled no longer experience failed ACF updates due to license errors
  • Fix – Buttons featuring icons no longer have display issues when using RTL languages

About the Author

For plugin support, please contact our support team directly, as comments aren't actively monitored.

  • Tom Hole says:

    My immediate feedback was why can’t this just added as a filter so I can include on my boilerplate theme!?!

    Then I realised you guys had thoughtfully done that. Thanks!

  • TΘΒIΛS FΞLD says:

    Hi Iain, thank you for this update 🙂 Are there any plans to enable composer installation of acf pro on a similar way how it is already possible like wp migrate? This would be awesome!

  • Richard says:

    Wow awesome work, I remember talking to Elliot about this feature at a Wordcamp once and finally we have it, love the UI

  • Justin says:

    Yes! I’m now totally on board with the UI update 🙂 Thanks team!

    My biggest requests as of today:

    • Copy field names to clipboard when clicked within flex/repeater (I know it’s on the radar but it’s such a nice touch I’ve gotten used to)
    • Looking at my collapsed flex rows, what I want to see is the names I’ve given them (so I can sort alphabetically or logically) but the word "Layout:" before each one is a bit overwhelming. Would be great if you could fade it back or remove it or somehow change it visually
    • Luca Mattiuzzo says:

      I agree, the "Layout:" label is redundant, as the Flexible layout field can only contain…layouts 😉

    • Liam says:

      Hey Justin,

      Copying field names inside flexible content and repeaters should work now… I think we fixed that back in 6.0.5! What’s happening for you when you mouse over the field names?

      I totally agree on the layout name being redundant – that’s kinda a hang up from when layouts were expanded by default and it was easier to scan… I’ll raise this as something to change in our next release!

      • Justin says:

        Ohhhh. This seems to be an issue on my end. I see copy-to-clipboard actually isn’t working on any field names for me! The span around the field name has the classes copyable copy-unsupported. Digging deeper, this is only happening on my local server spun up by Codekit (grey.local:5757, used for CSS injecting) — my standard localhost (through Local) and any real domains work fine.

        I’d say it’s not your problem, though if you can think of anything that might cause that I’m all ears! Thanks so much Liam.

        • Liam says:

          Hey Justin,

          My guess would be that your local server on Codekit isn’t over SSL? We use the modern browser standards for clipboard interactions, which for security are only available over SSL – so copy-unsupported means the browser has told us the clipboard isn’t available!

    • Iain says:

      Hey Justin, we just shipped 6.0.7 with the "Layout:" prefix removed 🙌

  • Ben Adam says:

    Please add ability to disable all this new UI. let us use the old and perfect wordpress like ui.

  • sale says:

    Perfect! Just what I needed! Both disabling tabs and collapsible flex content are very useful! Great work, thank you!

  • Monolit says:

    The new interface makes me stagnate and go into depression 👎 🙁

  • bosettiandrea says:

    Hi team! Happy holiday and thank you for trying to listen the community feedback: i’m sure we all appreciate all the efforts you are doing. I still have to say that honestly i think this new interface is bad and -in my opinion- chaotic. I think an option to switch to the classic WP-like UI would be much appreciated 🙂 thanks!

  • TwistedAndy says:

    The new UX is much worse than before. The problems are apparent:

    1. Inefficient space usage
    2. Smaller control elements and labels
    3. Insufficient contrast

    The new plugin developers at WP Engine probably do not use their product and can’t see those problems.

    I took two screenshots for the same field group: https://ibb.co/QJMpWDP (ACF 6) https://ibb.co/NY9KxJ2 (ACF 5)

    Even on those pages, the differences are obvious:

    1. Field names are smaller. Actually, they are too small and barely readable on the default page scale.
    2. At the same time, the number of fields on the page is smaller 21 vs 18
    3. Please take a look at tab fields. They add a small space to distinguish tabs visually
    4. The contrast is also better on ACF 5, which makes the text more readable.

    The field settings have all those issues as well with and without tabs enabled.

    I decided to continue using ACF 5.12.4 as long as possible.

  • ginsterbusch says:

    Why one would destroy a totally perfect product to "put ones stamp on it" is totally beyond me. Resources flushed down the drain that could have gone in much better improvements sighs

    Guess its time I’m trying out what I’ve been pondering since this horrid UI desaster was released: Build an "ACF Classic UI Restorer" plugin, similar to the famous Firefox extension ("Classic Theme Restorer"), that reversed most of the inane "we need to compete with chrome, but worse" crimes on UX decisions.

    cu, w0lf.