Enabling Inline Editing

Documentation ACF Blocks Enabling Inline Editing

Last updated Dec 4, 2025

Overview

Enabling Inline Editing

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

Related

• ACF Blocks: Inline Editing for ACF Blocks
• Functions: acf_register_block_type()
• ACF Blocks: Customizing the Inline Editing Experience
• ACF Blocks: ACF Blocks V3
• ACF Blocks: acf_inline_text_editing_attrs()