ACF 5.9.0 Release – Inner Blocks, UI Improvements and Exciting Features

Advanced Custom Fields version 5.9.0 is now available! 🚀🎉 This release celebrates new features and improvements across the entire plugin to help developers and content creators build anything with WordPress.

With so much to cover, I’ll keep this introduction short and say just this; We’re really excited to share with you these new features and thank you all so much for the amazing support!

👨‍💻 Please find the release notes below. And for the latest ACF news, follow us on Twitter @wp_acf.

Refreshed Admin

Say hello to the all new Field Groups admin page! We’ve made a bunch of changes to this screen, which you can explore in detail below.

1. Navbar

Kicking things off is our new navbar! Added to the top of all ACF admin pages, this element aims to introduce a subtle identity and sense of place when navigating around the ACF plugin.

As always, we do our best to keep things looking as WordPress-like as possible. This design was highly inspired by the Site Health page added in WordPress 5.2.

2. Search

Previously, the search field was hidden and required a toggle action to be shown. We can only apologize for implementing such an unnecessary and unfriendly experience in the past. Search is now always visible.

3. Bulk Actions

Even the Bulk Actions drop-down has received some love ❤️. A new option for “Sync changes” makes it possible to bulk sync multiple Local JSON Field Groups from the main admin page without needing to visit the “Sync available” tab.

4. Layout

Have you noticed something missing? We removed the sidebar! 🙊

Early on in the redesign process, we identified this element as a non-essential component of the Field Groups admin page. Removing the sidebar not only frees up a lot of real-estate for new table columns, but also improves the UI for mobile devices.

5. Columns

With all this extra space for activities, our Field Groups list can now display more information! Here’s a quick explanation behind each column.

• Title The title column remains relatively untouched, but with a new way to distinguish disabled Field Groups in a more WordPress-like manor, similar to locked or private posts.
• Description Previously appended to the Field Group Titles, descriptions will now appear in their own column. This column acts as a nice breathing room when left blank, so don’t feel obligated to start adding descriptions to all Field Groups.
• Key Similar to Fields, each Field Groups are given a unique key. This information may be handy for debugging purposes or when writing custom functionality. 🤷‍♂️ Don’t need this column? No worries, simply hide it from the “Screen Options” settings.
• Location This is one of the more impressive features packed into version 5.9. The new Location column provides a simple and intuitive visualisation of the connected Object Types. Field Group location rules can get quite complicated, especially when introducing multiple groups, but we are proud-as-punch to report that this column can handle anything thrown at it without any performance tax.
• Local JSON This new column will only show for users who are making use of our Local JSON feature. It aims to help raise awareness of unsaved Field Groups, and highlight those that are available for sync. We also added quick links to sync and review changes without the need to first navigate to the “Sync available” tab.

6. Local JSON Review Modal

From the new Local JSON column, it is now possible to review changes prior to sync. It’s always a good idea to double or even triple check something before merging it into production, and we hope this new feature contributes in some small way to a healthier workflow. 🙌

Duplicate Rows

Get ready for speedy content creation with new duplication functionality for both the Repeater and Flexible Content fields! We know you and and your clients have been asking about this feature for a while now, and we’re glad to have finally added it in!

👨‍💻 Note: When editing a Repeater field, the “Add row” and “Duplicate row” icons toggle between each other by holding the “Shift” key.

Block Editor Validation

This release also contains support for metabox validation in the block based [Gutenberg] editor. This missing feature may have taken a little longer to resurrect than expected, but we’re sure glad to have it back!

👨‍💻 We plan to begin work on supporting Block validation shortly, but this will come in a later update.

Inner Blocks

We are super excited to announce that ACF PRO version 5.9 includes support for inner blocks! This means it is now possible to edit content within a dynamic ACF Block without any separation from the block editor UI.

This enhancement represents a monumental leap forward in functionality for our PHP based block framework. It blurs the lines between dynamic PHP and static JSX block types, cherry picking the benefits from both to offer an immersive content editing experience with little barrier to entry.

We threw together a little example to demonstrate how you might use the InnerBlocks component to create a date restricted block with only basic PHP.

add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // Register a restricted block.
        acf_register_block_type(array(
            'name'              => 'restricted',
            'title'             => 'Restricted',
            'description'       => 'A restricted content block.',
            'category'          => 'formatting',
            'mode'              => 'preview',
            'supports'          => array(
                'align' => true,
                'mode' => false,
                'jsx' => true
            ),
            'render_template' => 'template-parts/block-restricted.php',
        ));
    }
}

<?php
/**
 * Restricted Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create class attribute allowing for custom "className" and "align" values.
$classes = '';
if( !empty($block['className']) ) {
    $classes .= sprintf( ' %s', $block['className'] );
}
if( !empty($block['align']) ) {
    $classes .= sprintf( ' align%s', $block['align'] );
}

// Load custom field values.
$start_date = get_field('start_date');
$end_date = get_field('end_date');

// Restrict block output (front-end only).
if( !$is_preview ) {
    $now = time();
    if( $start_date && strtotime($start_date) > $now ) {
        echo sprintf( '<p>Content restricted until %s. Please check back later.</p>', $start_date );
        return;
    }
    if( $end_date && strtotime($end_date) < $now ) {
        echo sprintf( '<p>Content expired on %s.</p>', $end_date );
        return;
    }
}

// Define notification message shown when editing.
if( $start_date && $end_date ) {
    $notification = sprintf( 'Content visible from %s until %s.', $start_date, $end_date );
} elseif( $start_date ) {
    $notification = sprintf( 'Content visible from %s.', $start_date );
} elseif( $end_date ) {
    $notification = sprintf( 'Content visible until %s.', $end_date );
} else {
    $notification = 'Content unrestricted.';
}
?>
<div class="restricted-block <?php echo esc_attr($classes); ?>">
    <span class="restricted-block-notification"><?php echo esc_html( $notification ); ?></span>
    <InnerBlocks />
</div>

Since releasing our PHP block framework in version 5.8, we have received an overwhelming amount of requests for this feature, and can’t wait to see the amazing block types you create with it!

For more technical information, please read the new InnerBlocks section in our documentation.

Alignment Controls

Inner Blocks aren’t the only new feature for ACF Blocks. Developers will be glad to hear we have added in two new settings to the acf_register_block_type() settings array.

1. Align Text

Block scoped text alignment is now possible via the align_text support flag. Enabeling support for this feature will add a new alignment toolbar button similar to that seen when editing a paragraph of text. You can event set an initial value too!

<?php 
acf_register_block_type( array(
    'name'              => 'test_alignment',
    'title'             => 'Test Alignment',
    'align_text'        => 'left', // Specifies the default attribute value.
    'supports'          => array(
        'align_text' => true // Enables the feature.
    ),
    'render_callback'   => function( $block ){
        echo '<div class="align-text-' . esc_attr( $block['align_text'] ) . '">';
            echo '<p>' . esc_html( $block['align_text'] ) . '</p>';
        echo '</div>';
    }
));

2. Align Content

You can now also control the vertical position (y), or matrix position (xy) of your block content via the align_content support flag. Enabling support for this feature will add a new alignment toolbar button similar to that seen when editing a core “Cover block”. This new support flag is also customizable, allowing you to choose between a vertical toolbar button or a 3×3 matrix grid toolbar button (requires WP 5.5+).  You can also set an initial value too.

<?php 
acf_register_block_type( array(
    'name'              => 'test_align_matrix',
    'title'             => 'Test Align Matrix',
    'align_content'     => 'top left', // Specifies the default attribute value.
    'supports'          => array(
        'align_content' => true // Enables the feature.
    ),
    'render_callback'   => function( $block ){
        echo '<div class="is-position-' . esc_attr( $block['align_content'] ) . '">';
            echo '<p>' . esc_html( $block['align_content'] ) . '</p>';
        echo '</div>';
    }
));

Developer Treats

Version 5.9 also includes a bunch of tasty treats for ACF developers too. 🍭

• ACF_Location The ACF_Location class has received some major improvements allowing for custom location rules to be defined easier than ever before. We also updated our Custom location rules documentation to explore the new API in detail!
• Javascript files During development of the new Field Groups admin page, we found ourselves needing access to some parts of the ACF JS library, but didn’t want to enqueue the entire “acf-input.js” file – most of which would be unused. In light of this, we have extracted the core components from “acf-input.js” into a separate “acf.js” file.
• Icons For quite some time, ACF has included a custom webfont generated by fontello. Upon review, we found that the dashicons library was more than adequate for our interfaces, and have dropped the custom webfont in favour of WordPress’ own dashicons webfont.
• Local JSON save to source Previously, our Local JSON feature would always save changes to a .json file defined by the “save_path” setting. This caused many headaches for developers who use a custom theme or plugin folder to store JSON files. Now, no matter where the .json file was loaded from, it will be updated when making changes to a Field Group.
• Quick Delete In version 5.6 we introduced confirmation tooltips to avoid the accidental removal of fields, rows and layouts. These tooltips have saved a lot of potential headaches, but have also introduced a slowdown to the workflows of many developers. Well, you can now bypass that confirmation by holding the “Shift” key for a quicker delete action.

Changelog

* Enhancement - New Field Groups admin.
    * Added toolbar across all ACF admin pages.
    * Added new table columns: Description, Key, Location, Local JSON.
    * Added popup modal to review Local JSON changes before sync.
    * Added visual representation of where Field Groups will appear.
    * Added new help tab.
    * Simplified layout.
* Enhancement - New ACF Blocks features.
    * Added support for <InnerBlocks /> component.
    * Added new "jsx" setting.
    * Added new "align_text" settings.
    * Added new "align_content" settings.
* Enhancement - Added duplicate functionality for Repeater and Flexible Content fields.
* Enhancement - Added PHP validation support for Gutenberg.
* Enhancement - Added ability to bypass confirmation tooltips (just hold shift).
* Enhancement - Local JSON files now save back to their loaded source path (not "save_json" setting).
* Tweak - Replaced all custom icons with dashicons.
* Tweak - Changed custom post status label from "Inactive" to "Disabled".
* Tweak - Improved styling of metaboxes positioned in the block editor sidebar.
* Fix - Improved AJAX request efficiency when editing block className or anchor attributes.
* Fix - Fixed bug causing unresponsive WYSIWYG fields after moving a block via the up/down arrows.
* Fix - Fixed bug causing HTML to jump between multiple instances of the same Reusable Block.
* Fix - Fixed bug sometimes displaying validation errors when saving a draft.
* Fix - Fixed bug breaking Image field UI when displaying a scaled portrait attachment.
* Fix - Fixed bug in Link field incorrectly treating the "Cancel" button as "Submit".
* Fix - Fixed bug where a sub field within a collapsed Repeater row did not grow to the full available width.
* Fix - Ensured all archive URLs shown in the Page Link field dropdown are unique.
* Fix - Fixed bug causing incorrect conditional logic settings on nested fields when duplicating a Field Group.
* Fix - Fixed bug causing license activation issues with some password management browser extensions.
* Dev - Major improvements to ACF_Location class.
* Dev - Refactored all location classes to optimize performance.
* Dev - Extracted core JavaScript from "acf-input.js" into a separate "acf.js" file.
* Dev - Field Group export now shows "active" attribute as bool instead of int.
* Dev - Added filter "acf/get_object_type" to customize WP object information such as "label" and "icon".
* Dev - Added action "acf/admin_print_uploader_scripts" fired when printing uploader (WP media) scripts in the footer.
* Dev - Added filters "acf/pre_load_attachment" and "acf/load_attachment" to customize attachment details.
* Dev - Added filter "acf/admin/toolbar" to customize the admin toolbar items.
* Dev - Added new JS actions "duplicate_fields" and "duplicate_field" fired when duplicating a row.
* i18n - Changed Croatian locale code from "hr_HR to "hr".
* i18n - Updated Portuguese translation thanks to Pedro Mendonça.
* i18n - Updated French Canadian translation thanks to Bérenger Zyla.

Looking ahead 🌟🔭

The future is looking bright for Advanced Custom Fields. This release isn’t just about new and shiny features – although there are a lot of them – it’s about paving the way forward for what’s next to come.

We’re hoping to take some of the ideas in version 5.9, such as the new ACF_Locations class used to display the admin table “Location” column, and utilize that new logic to empower a native REST API solution, boost field lookup performance, and ultimately a way to remove reference values completely!

For now, let’s enjoy duplicating Repeater rows, building bespoke JSX blocks and creating custom fields in a nicer admin area 👋.

About the Author

Elliot is a web developer working "down under" on the Advanced Custom Fields WordPress plugin in Australia. Having a previous life in design, Elliot is passionate about all things interactive. Enjoys skateboarding, coffee and building things.