Customizing the Inline Editing Experience

Documentation ACF Blocks Customizing the Inline Editing Experience

Last updated Dec 3, 2025

Overview

Customizing the Inline Editing Experience

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 );

Related

• ACF Blocks: Inline Editing for ACF Blocks
• ACF Blocks: Enabling Inline Editing
• ACF Blocks: acf_inline_text_editing_attrs()
• ACF Blocks: acf_inline_toolbar_editing_attrs()
• Filters: acf/blocks/top_toolbar_fields