It's trivial to add inline editing to your blocks. This is totally separate from ACF.
<EditableText />#The most common inline editing function will of course be the ability to edit text in your block. The <EditableText> component does just this! Keep in mind, this can only be used on blocks, or components which are used within a block.
<div>
<EditableText as="h2" id="title" placeholder="Enter a title" />
</div>
When the above code runs in the WordPress editor, an author can click on that element and type into it directly.
Note that you can have as many <EditableText> components as you want, however each id must be unique, since each value is stored as a key/value pair.
The as prop is required, and can either be an element type (p, h1, h2, etc.) or a component.
useInlineEditableValue#The useInlineEditableValue hook is the foundation of all inline editing in our system — it works a lot like useState, except that the content is saved to the block when saving the page, and restored again when the page is loaded.
Much like EditableText, the hook requires a unique id to identify the value.
You can store any kind of data, including objects and arrays.
const [title, setTitle] = useInlineEditableValue('title');
return <input type="text" value={title} onChange={e => setTitle(e.currentTarget.value)}>