Editable text-fields in block preview-mode

[eoutvik]

Any way to make this work? Feels kinda counter-intuitive to have to edit text in the right column when headings, paragraphs etc can be edited directly in Block editor.

[elliotcondon]

Hi @eoutvik

This is one of the limitations in ACF Blocks. I hope that as we continue work on ACF Blocks, we are able to find a way to adopt the native react elements, but until then, ACF Blocks will use it's own basic HTML element types.

Please note that you can switch between "edit" and "preview" mode if you would prefer the input fields to be inline with the content (not in the sidebar).

If you are looking for a 100% seamless editing solution with Gutenberg, ACF Blocks won't be able to provide that just yet - it is a stepping stone for PHP developers which sacrifices UX for flexibility.

[eoutvik]

Thank you for the reply @elliotcondon. I see how this is not a straight forward request and the inline edit-mode is very useful for advanced blocks with multiple inputs 👍

I guess not every field type should be inline editable in preview-mode but maybe a solution could be to add some custom attributes to the render-output and hook on to that for some contenteditable data -binding magic?

Just thinking out loud here. Really liking the stuff you are doing with ACF Blocks. Makes adding advanced functionality to content blocks a breeze 🥇

[youngmicroserf]

As I come across this a year after the op, I can't help but wonder: has there been any development in this respect? If not, any chance for it? Thanks!

[eoutvik]

Not as I'm aware. I will typically make "native" react blocks for simple input/image/select stuff, but supply with the power of ACF for more advanced blocks that require stuff like relations, galleries, repeaters, etc.

[elliotcondon]

@youngmicroserf Unfortunately, this is not an area we are currently focusing on.

I do believe as time goes on, our integration into the React component library will become deeper, allowing us to provide a more seamless editing experience :)

Lots to look forward to.

[mohamedyassin07]

Any updates :) and if not done yet. Any guides to make it through normal JS code? like make it editable in the editor and once edited it will change the ACF block side field value?

[facu-gamond]

Hi everyone,

I've developed a BETA version of a plugin designed to enhance this behavior. I've also written a detailed blog post explaining how to use it.

This plugin also adds the ability to resize the block sidebar, which can be particularly useful for cases where repeaters look messy.

I would appreciate it if you could give it a test and provide any feedback. Soon, I'll be opening a comment section on my webpage for further discussions and will likely create a public repository for collaborative development.

Thank you!