ACF 6.7 Inline Editing: Streamlining Custom Block Development

Building custom ACF blocks often means toggling between preview and edit modes, interrupting the content creation flow. ACF 6.7 changes that with inline editing, letting users modify text directly in the editor without touching the sidebar. This tutorial walks you through enabling inline editing, migrating existing V2 blocks to V3, and using InnerBlocks for flexible layouts. By the end, you’ll have the tools to create blocks that feel native to the WordPress editor.

What’s New in ACF 6.7

ACF 6.7 introduces inline editing as an opt-in feature for ACF Blocks V3. Instead of editing field values through sidebar panels, users can click directly on text elements and start typing.

Two Editing Modes

ACF provides two inline editing modes, each designed for different field types:

• Text Editable: Direct inline typing for simple text fields. Users click on the element and start typing immediately without any toolbar or modal. This mode works well for headings, labels, and short text snippets.
• Toolbar Editable: A floating toolbar appears when users click on WYSIWYG fields, providing formatting options like bold, italic, links, and lists. This mode preserves the rich text editing capabilities while keeping the experience inline.

Requirements

Before implementing inline editing, verify your environment meets these requirements:

• ACF PRO 6.6 or higher (ACF Blocks are a PRO-only feature)
• WordPress 6.2 or higher
• Blocks registered using the V3 block.json format

If you’re running older versions, update before proceeding. Inline editing won’t function on V2 blocks or older WordPress installations.

Enabling Inline Editing

You can enable inline editing through two approaches: automatic mode for quick setup or manual mode for granular control.

Automatic Mode

The simplest approach uses the autoInlineEditing property in your block.json file. ACF automatically applies the appropriate editing mode based on field type.

{
  "name": "acf/hero",
  "title": "Hero Block",
  "acf": {
    "mode": "preview",
    "autoInlineEditing": true,
    "renderTemplate": "blocks/hero/hero.php"
  },
  "supports": {
    "anchor": true,
    "jsx": true
  }
}

With autoInlineEditing: true, ACF scans your template for field outputs and wraps them with the correct editing attributes. Text fields get direct inline editing, while WYSIWYG fields receive toolbar editing.

Manual Mode

For precise control over which fields support inline editing, use ACF’s helper functions in your PHP template:

<h1 <?php echo acf_inline_text_editing_attrs('heading'); ?>>
    <?php echo esc_html(get_field('heading')); ?>
</h1>
<div <?php echo acf_inline_toolbar_editing_attrs('content'); ?>>
    <?php echo wp_kses_post(get_field('content')); ?>
</div>

The acf_inline_text_editing_attrs() function adds attributes for direct text editing, while acf_inline_toolbar_editing_attrs() enables toolbar editing for rich text fields.

Manual mode gives you control over exactly which elements become editable, useful when you want some fields to remain sidebar-only. You might use this approach for blocks where certain fields require validation or have dependencies that make inline editing impractical.

Migrating from V2 to V3

If you have existing ACF blocks built with V2, migrating to V3 with inline editing requires several changes. Here’s what differs between versions:

V2 (Legacy)	V3 (Current)
Edit/Preview toggle visible	Toggle removed (always preview)
snake_case properties	camelCase in block.json
'mode' => 'edit' common	'mode' => 'preview' default
No inline editing	Inline editing opt-in

Migration Checklist

Follow these steps to upgrade a V2 block:

1. Create a block.json file in your block directory
2. Move registration parameters from PHP to block.json
3. Convert snake_case properties to camelCase (render_template becomes renderTemplate)
4. Set "mode": "preview" in the acf object
5. Add "autoInlineEditing": true if you want inline editing
6. Remove the Edit/Preview toggle handling from your template

Before and After

V2 PHP Registration:

acf_register_block_type([
    'name' => 'hero',
    'title' => 'Hero Block',
    'render_template' => 'blocks/hero/hero.php',
    'mode' => 'edit',
]);

V3 block.json:

{
  "name": "acf/hero",
  "title": "Hero Block",
  "acf": {
    "mode": "preview",
    "autoInlineEditing": true,
    "renderTemplate": "blocks/hero/hero.php"
  }
}

The V3 approach keeps configuration declarative and enables inline editing with a single property. Notice how the V2 registration used 'mode' => 'edit' as a common default, while V3 assumes preview mode. This shift reflects the new editing paradigm: users stay in preview mode and edit content inline rather than switching to a form view.

Using InnerBlocks

InnerBlocks let you nest other WordPress blocks inside your ACF block. Combined with inline editing, this creates flexible content areas.

Requirements

To use InnerBlocks, add jsx: true to your block.json supports:

{
  "supports": {
    "jsx": true
  }
}

Adding InnerBlocks to Your Template

In your PHP template, include the <InnerBlocks /> component:

<section class="hero-block">
    <h1 <?php echo acf_inline_text_editing_attrs('heading'); ?>>
        <?php echo esc_html(get_field('heading')); ?>
    </h1>
    <InnerBlocks allowedBlocks='["core/button", "core/paragraph"]' />
</section>

The allowedBlocks attribute restricts which blocks users can insert. Without it, users can add any block type.

Limitation: ACF blocks support only one <InnerBlocks /> component per block. If you need multiple content areas, consider using separate ACF fields or nested child blocks. This is a WordPress core limitation, not specific to ACF.

You can also use the template attribute to pre-populate InnerBlocks with a default structure:

<InnerBlocks
    allowedBlocks='["core/button", "core/paragraph"]'
    template='[["core/paragraph", {"placeholder": "Add your content here..."}]]'
/>

Best Practices

When to Use Automatic vs Manual Mode

Use automatic mode when:

• You want inline editing on all text-based fields
• Your block has a straightforward template structure
• You’re building new blocks from scratch

Use manual mode when:

• Only certain fields should be inline-editable
• You need to exclude specific fields from inline editing
• Your template has complex conditional logic

Performance Considerations

Automatic mode scans your template on each render to detect fields. For blocks with many fields or complex templates, manual mode offers slightly better performance since ACF doesn’t need to parse the output.

What’s Next

ACF 6.7’s inline editing removes friction from the content creation process. Users edit text where they see it, without sidebar distractions. For developers, the migration from V2 to V3 is straightforward: move configuration to block.json, switch to camelCase properties, and add autoInlineEditing: true.

If you’re maintaining legacy blocks, prioritize migration for blocks with heavy text content. The improved editing experience makes a noticeable difference for content teams.

---

Sources: ACF 6.7 Release Notes, Enabling Inline Editing, ACF Blocks V3 Documentation