This filter allows developers to modify the list of ACF field types that will receive a wider popover when used within an ACF Block with toolbar inline editing. This is particularly useful for fields with more complex user interfaces that require additional horizontal space.

By default, the gallery, relationship, wysiwyg, and google_map fields are configured to use a wide popover.

Changelog

• Added in version 6.7

Parameters

• $field_types (array) An array of field type names.

Return

(array) The filtered array of field type names.

Example

This example demonstrates how to add the 'taxonomy' field type to the list of fields that should receive a wide popover.

<?php
/**
 * Adds the 'taxonomy' field to the list of fields needing a wide popover.
 *
 * @param array $field_types An array of field type names.
 * @return array
 */
function my_acf_add_taxonomy_to_wide_popover( $field_types ) {
    $field_types[] = 'taxonomy'; // Add the 'taxonomy' field type.

    return $field_types;
}
add_filter( 'acf/blocks/fields_needing_wide_popover', 'my_acf_add_taxonomy_to_wide_popover' );

The post acf/blocks/fields_needing_wide_popover appeared first on ACF.

This filter allows developers to modify the array of field types that, when utilized within an ACF block’s inline toolbar, will trigger the expanded editor interface upon interaction. By default, Repeater and Flexible Content fields open in the expanded editor.

Changelog

• Added in version 6.7.

Parameters

apply_filters( 'acf/blocks/fields_to_open_in_expanded_editor', $field_types );

• $field_types (array) An array of field type names.

Return

(array) The filtered array of field type names.

Example

This example demonstrates how to add the Group field type to the list of fields that open in the expanded editor, alongside the default Repeater and Flexible Content types.

<?php
/**
 * Adds the 'group' field type to the list of fields that open in the expanded editor.
 *
 * @param array $field_types An array of field type names.
 * @return array
 */
function my_acf_add_group_to_expanded_editor( $field_types ) {
    $field_types[] = 'group'; // Add the Group field type.

    return $field_types;
}
add_filter( 'acf/blocks/fields_to_open_in_expanded_editor', 'my_acf_add_group_to_expanded_editor' );

The post acf/blocks/fields_to_open_in_expanded_editor appeared first on ACF.

This filter allows you to add fields to the top toolbar of a specific ACF Block, enabling direct editing from the block’s header in the editor.

When a field is added to the toolbar, it appears as a button. Clicking this button opens a popover containing the field’s input, allowing for a more streamlined and integrated editing experience.

Changelog

• Added in version 6.7.

Parameters

apply_filters( 'acf/blocks/top_toolbar_fields', $fields, $block, $content, $is_preview, $post_id, $wp_block, $context );

• $fields (array) An array of fields to be displayed in the toolbar. Defaults to an empty array.
• $block (array) An array of block properties.
• $content (string) The block’s inner content.
• $is_preview (bool) A boolean that is true when the block is being rendered for editing preview.
• $post_id (int) The ID of the post being edited.
• $wp_block (WP_Block|null) The WP_Block instance, or null.
• $context (array) The block context.

Return

(array) The modified array of fields.

Example

This example demonstrates how to add an image field to the toolbar of the ACF Block:

function my_block_top_toolbar_fields($block_top_toolbar_field_names, $block) { 
    // If the block in question is our block.
    if ( 'acf/my-acf-block' === $block['name'] ) {
        // Make some ACF fields show in the primary block toolbar.
        return array( 'my_background_image_field', 'my_background_color_field');
    }


    // If the block in question is not our block, just pass the variable as is.
    return $block_top_toolbar_field_names;
}
add_filter( 'acf/blocks/top_toolbar_fields', 'my_block_top_toolbar_fields', 10, 2 );

The post acf/blocks/top_toolbar_fields appeared first on ACF.

Helper function that returns the HTML attributes required for toolbar inline editing as a string, escaped and ready for output.

It is used within ACF Block render templates to make an HTML element show a popup toolbar when clicked, allowing authors to edit multiple fields at once.

Changelog

• Added in version 6.7

Parameters

acf_inline_toolbar_editing_attrs( $fields, $args = array() );

$fields

(array) Required A list of the fields, each of which will be displayed in the popup toolbar.

Each field can be passed as:

• A string (e.g. ‘my_field_name’)
• An associative array with specific keys:
  • field_name: (string) The name of the field to display in the toolbar.
  • field_icon: (string) (Optional) An HTML tag, can be an SVG, to be used as the toolbar icon. If not passed, the icon of the first field will be used.
  • field_label: (string) (Optional) A string to use as the label for the button in the toolbar.
  • popover_min_width: (string) (Optional) Minimum width of the popover, defaults to ‘300px’
  • use_expanded_editor: (bool) (Optional) If true opens field editing in the Expanded Editor Panel, false uses the popover. Defaults to false/.

$args

(array) (Optional) An array of arguments for customizing the inline text editing behavior. The available keys are:

• toolbar_icon
  (string) (Optional) An HTML tag (e.g., SVG) to be used as the toolbar icon.
• toolbar_title
  (string) (Optional) A string to be used as the toolbar title.
• uid
  (string) (Optional) A unique identifier that isn’t used by any other inline fields in this block. Pass if you have 2 elements that conflict.
• render
  (bool) (Optional) True if it should return the output, false if it should return an empty string.

Return

(string) A string containing the required HTML attributes ready to be placed inside an HTML tag. The returned output is already escaped.

Examples

Customizing the icon in the toolbar to edit an Image field type, with a custom field label (used as a tooltip)

<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
    array(
                 ‘field_name’ => ‘my_image_field’,
                 ‘field_icon’   => ‘your svg html here’,
                 ‘field_label’ => ‘My custom field label’
            )
) ); ?> />

You can also customize the title and icon of the whole toolbar by passing a second array. For example:

<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
    array(
                 ‘field_name’ => ‘my_image_field’,
                 ‘field_icon’   => ‘your svg html here’,
                 ‘field_label’ => ‘My custom field label’
            ),
),
            array(
                 ‘toolbar_icon’ => ‘your svg html here’,
                 ‘toolbar_title’ => ‘My custom toolbar title
            )
); ?> />

You can ensure specific fields open in the expanded editing panel:

<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
    array(
                 ‘field_name’ => ‘my_image_field’,
                 ‘use_expanded_editor’   => true,
            ),
) ); ?> />

You can define the minimum width of the popover:

<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
    array(
                 ‘field_name’ => ‘my_image_field’,
                 ‘popover_min_width’   => ‘500px’,
            ),
) ); ?> />

The post acf_inline_toolbar_editing_attrs() appeared first on ACF.

Helper function that returns the HTML attributes required for inline text editing as a string, escaped and ready for output.

It is used within ACF Block render templates to make an HTML element directly editable, primarily for Text and Text Area fields, allowing authors to type content directly into the block preview area.

Changelog

• Added in version 6.7

Parameters

acf_inline_text_editing_attrs( $field_name, $args = array() );

$field_name

(string) The name of the ACF field that will be updated when the user types into the HTML element..

$args

(array) (Optional) An array of arguments for customizing the inline text editing behavior. The available keys are:

• toolbar_icon
  (string) (Optional) An HTML tag (e.g., SVG) to be used as the toolbar icon.
• toolbar_title
  (string) (Optional) A string to be used as the toolbar title.
• placeholder
  (string) (Optional) A string to be used as the placeholder text when the field is empty.

Return

(string) A string containing the required HTML attributes ready to be placed inside an HTML tag. The returned output is already escaped.

Examples

Making a text field used in an h3 element text editable:

 <h3 <?php echo acf_inline_text_editing_attrs( 'my_text_field' ); ?>>
   <?php echo esc_html( get_field( 'my_text_field' ) ); ?>
</h3>

To customize the experience even further, you can control the icons used in the toolbar, or the placeholder text shown when a field is empty. For example:

<?php echo acf_inline_text_editing_attrs(
    'my_text_field',
    array(
         'toolbar_icon'  => 'your svg html here',
         'toolbar_title'   => 'My custom toolbar title',
         'placeholder'   => 'Type to edit...'
    )
); ?>

The post acf_inline_text_editing_attrs() appeared first on ACF.

Inline Editing is a new feature of ACF Blocks that allows authors to edit block data directly within the block preview area, offering a more native Gutenberg-like experience without extra code.

Text and Toolbar editing

The helper functions for inline text and toolbar editing have various arguments you can use to customize the experience.

Check out the documentation for each function:

• acf_inline_text_editing_attrs()
• acf_inline_toolbar_editing_attrs()

Custom Icons

When adding custom icons using SVGs, we recommend taking from the native WordPress block editor iconset.

Add ACF Fields To Primary Block Toolbar

You can also add ACF fields to the Primary Block Toolbar, which allows you to bring ACF fields to the preview area for things which aren’t visual or clickable. This might be something like a background color or image.

To add ACF fields to the primary block toolbar, use the acf/blocks/top_toolbar_fields filter. For example:

function my_block_top_toolbar_fields($block_top_toolbar_field_names, $block) { 
    // If the block in question is our block.
    if ( 'acf/my-acf-block' === $block['name'] ) {
        // Make some acf fields show in the primary block toolbar.
        return array( 'my_background_image_field', 'my_background_color_field');
    }


    // If the block in question is not our block, just pass the variable as is.
    return $block_top_toolbar_field_names;
}
add_filter( 'acf/blocks/top_toolbar_fields', 'my_block_top_toolbar_fields', 10, 2 );

Custom Icons

Just like with the other helper functions, you can customize the icons used for each ACF field placed into the main block toolbar as well, by passing an array instead of just the field name as a string. For example:

function my_block_top_toolbar_fields($block_top_toolbar_field_names, $block) { 
    // If the block in question is our block.
    if ( 'acf/my-acf-block' === $block['name'] ) {
        // Make some ACF fields show in the primary block toolbar.
        return array(
            'my_background_image_field',
            array(
                'field_name' => 'my_background_color_field',
                'field_icon'   => 'your svg html text here',
                'field_label'  => 'My custom field label'
            )
        );
    }


    // If the block in question is not our block, just pass the variable as is.
    return $block_top_toolbar_field_names;
}
add_filter( 'acf/blocks/top_toolbar_fields', 'my_block_top_toolbar_fields', 10, 2 );

The post Customizing the Inline Editing Experience appeared first on ACF.

Inline Editing is a new feature of ACF Blocks that allows authors to edit block data directly within the block preview area, offering a more native Gutenberg-like experience without extra code.

In order to use the Inline Editing feature, blocks must be running version 3 of ACF Blocks.

Learn how to upgrade to v3.

Automatic Inline Editing

To experience inline editing in your ACF block you can simply set autoInlineEditing set to true in your block.json file, and that’s it!

Block.json Example

{
    "name": "acf/testimonial",
    "title": "Testimonial",
    "description": "A custom testimonial block that uses ACF fields which are inline editable.",
    "style": [ "file:./testimonial.css" ],
    "category": "formatting",
    "icon": "admin-comments",
    "keywords": ["testimonial", "quote"],
    "acf": {
        "blockVersion": 3,
        "renderTemplate": "testimonial.php",
        "autoInlineEditing": true
    },
    "supports": {
        "align": false
    }
}

With that enabled, ACF will automatically apply inline editing functionality to any HTML elements where an ACF field’s value is the only thing within it.

For example, if you have a paragraph tag with only an ACF field value in it, it will be editable automatically.

The same goes for HTML attributes. For example, if an img tag’s src attribute has a value that comes directly from an ACF field, it will automatically be editable.

Limitations

The Repeater and Flexible Content fields are the only ones which will not be automatically editable, but they can be manually set to be editable, just like any HTML element. Just note that this supports editing the top-level repeater field as a whole, not the individual sub-fields.

It’s worth noting that if you use a field type that returns an array (like the Image field type does by default), autoInlineEditing won’t make that field editable inline.

For example, if using an image field, you’ll either want to make the field’s return format be “url”, or use one of the helper functions to make the field editable (see “Manually Controlled Editing” below).

Manually Controlled Inline Editing

There are 2 helper functions which can be used in your block render template to make any HTML element editable inline.

Text Editable

The acf_inline_text_editing_attrs() helper function can be used to make it so that you can type directly into an HTML element as if it were a text field.

For example, to make it so you can type directly into an h3 tag:

<h3 <?php echo acf_inline_text_editing_attrs( ‘my_text_field’ ); ?>>
    <?php echo esc_html( get_field( ‘my_text_field’ ) ); ?>
</h3>

Note

It is not recommended to use a <p> paragraph tag as a text editable element wrapper. This is because when a user types “enter” to make a new line, browsers add a <div> tag, and div tags are not allowed as children for a paragraph tag.

Toolbar Editable

The acf_inline_toolbar_editing_attrs() helper function will make any HTML element pop-up a toolbar of ACF fields when clicked or focused.

For example, to make an image tag editable:

<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
    ‘my_image_field’
) ); ?> />

This will make it so that a pop-up toolbar appears when the element is clicked, where each field in the array is a button in the toolbar, allowing it to be edited.

Mix and Match

While you can mix both auto and manual fields in your render template, if you wish to completely control which elements are inline editable manually, in your block.json file set autoInlineEditing to false, and use acf_inline_toolbar_editing_attrs and acf_inline_text_editing_attrs on your desired HTML elements, as described above.

Next Steps

Next, we’ll look at how to fully customize the experience for content editors by making use of the helper functions for inline editing..

Next: Customizing the Inline Editing Experience

The post Enabling Inline Editing appeared first on ACF.

Types of Inline Editing

There are two main kinds of inline editing:

1. Text Editable: Offers the most native-like feel, allowing editors to type directly into an element within the block preview area. This functionality is primarily available for Text and Text Area fields.
2. Toolbar Editable: Used for most other supported field types. When a field is clicked, a pop-up toolbar appears where the content can be edited using the familiar ACF field editing UI.

Field Type Support

Here’s a breakdown of what editing experiences are available for each field type. We plan to improve the inline editing experience for fields that have subfields like the Repeater. The Expanded Editing Panel was introduced in ACF 6.6 to replace ‘Edit’ mode for blocks and to improve on the sidebar editing experience.

Field Type	Text Editing	Toolbar Editing	Expanded Editing Panel
Text
Text Area
Number
Range
Email
URL
Password
Image
File
WYSIWYG Editor
oEmbed
Gallery
Select
Checkbox
Radio Button
Button Group
True/False
Link
Page Link
Post Object
Relationship
Taxonomy
User
Google Map
Date Picker
Date Time Picker
Time Picker
Color Picker
Message
Accordion
Tab
Group
Repeater
Flexible Content
Clone

Note: Inline Editing is only available to ACF Blocks using version 3. Fields with sub-fields (Repeater, Flexible Content) are not directly editable inline, but the Expanded Editing Panel is always available.

Next Steps

Next, we’ll look at how to enable Inline Editing for your ACF Blocks, either automatically or customizing your block’s render PHP template.

Next: Enabling Inline Editing

The post Inline Editing for ACF Blocks appeared first on ACF.

Used to opt all of your ACF Blocks into a specific version.

Changelog

• Added in version 6.6

Example

functions.php

function my_custom_function_to_bump_the_block_version( $version, $block ) {
     return 3; // Use v3
}
add_filter( 'acf/blocks/default_block_version', 'my_custom_function_to_bump_the_block_version', 10, 2 );

Notes

If you have defined the ‘blockVersion’ specifically in your block.json file, the filter will not override that.

The post acf/blocks/default_block_version appeared first on ACF.

Important Warning

Pre-release versions are not recommended for production sites. Please use a development or staging environment for all testing.

1. How to Install a Pre-Release Version

Access to pre-release versions is available exclusively to active ACF PRO license holders.

1. Log In Log in to your ACF account.

2. Go to Licenses Navigate to the “Licenses” page in your account dashboard.

3. Find Pre-Releases On this page, you will find an “Install pre-release version” tab or a dropdown menu next to your license key.

4. Download Select the latest available pre-release version (e.g., ACF PRO 6.x.x-beta1) to download the plugin’s .zip file.

5. Install in WordPress Go to your WordPress admin dashboard, navigate to Plugins > Add New, click Upload Plugin, and select the .zip file you just downloaded.

2. How to Activate the Plugin

After installation, the activation process is the same as for any other version of ACF PRO.

1. Activate Plugin Once the plugin has been installed from the .zip file, click the Activate Plugin button.

2. Verify Your License To ensure you receive all future pre-release updates and that all PRO features are enabled:

• Go to ACF > Updates.

• Enter your ACF PRO license key and click Activate.

3. Enabling Automatic Pre-Release Updates

To automatically receive update notifications for pre-release versions directly in your WordPress dashboard, you need to define the ACF_UPDATE_CHANNEL constant in your wp-config.php file.

This setting ensures that ACF checks for updates beyond the stable releases.

How to Set the Update Channel

Add the following code snippet to your WordPress installation’s wp-config.php file, ideally before the line that says /* That's all, stop editing! Happy publishing. */.

You have two options for the channel value:

• For Beta versions (Less stable, earliest access to features):

define( 'ACF_UPDATE_CHANNEL', 'beta' );

• For Release Candidate versions (More stable, closer to final release):

define( 'ACF_UPDATE_CHANNEL', 'RC' );

Remember to clear any caching on your site after making this change to ensure WordPress immediately recognizes the new setting.

4. How to Provide Feedback

Your feedback is essential to refining the release. We have two primary channels for you to share your thoughts, depending on the type of feedback you have.

Bug Reports

If you encounter a bug, an error, or something that seems broken, please contact our support team directly. This is the fastest way to ensure our developers can investigate and resolve the issue.

Feature Requests

If you have ideas for improvements, new features, or suggestions on the new functionality, the best place to share them is on our official feedback board.

Stay Informed

Want to stay in the loop? Sign up for the ACF Beta News email list to hear about future pre-release versions.

The post Testing Pre-Release Versions of ACF PRO appeared first on ACF.