Overview
ACF Inline Editing is a groundbreaking feature for ACF Blocks, allowing authors to edit block data by clicking directly on what they want to edit in the block preview area. This functionality requires no extra code or JavaScript from the block creator, making ACF Blocks much easier to edit and similar to native Gutenberg blocks.
Types of Inline Editing
There are two main kinds of inline editing:
- 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.
- 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 | ❌ | ✅ | ✅ |
| ❌ | ✅ | ✅ | |
| 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.
Supercharge Your Website With Premium Features Using ACF PRO
Speed up your workflow and unlock features to better develop websites using ACF Blocks and Options Pages, with the Flexible Content, Repeater, Clone, Gallery Fields & More.
Related
- ACF Blocks: Enabling Inline Editing
- ACF Blocks: Customizing the Inline Editing Experience
- ACF Blocks: ACF Blocks V3
- ACF Blocks: acf_inline_text_editing_attrs()
- ACF Blocks: ACF Blocks