CodeMirror with ACF Textarea

[riemerta6]

I have a Textarea field that I've created with Advanced Custom Fields. I have to so that the Textarea is replaced with a CodeMirror field (using plugin ACF Code Field). When I "Update" with the Gutenberg editor, it does not save the contents of the CodeMirror field. I have a feeling this is because the actual Textarea is not being saved. It does save when I'm not using Gutenberg. I submitted a note to the plugin creator about this, but I thought I would also post something here.

To Reproduce
Steps to reproduce the behavior:

1. Create ACF Code Field

2. Edit ACF Code Field on Page

3. Update page with Gutenberg active
   / breaks here

4. Create ACF Code Field

5. Edit ACF Code Field on Page

6. Update page without Gutenberg active

7. Field is updated!

I've tried this in the latest versions of Firefox and Chrome

Gutenberg Version 3.7.0

[designsimply]

Thank you for posting! Would you mind sharing the link where you reported the issue to the plugin creator so we can follow along or did you report that via email or through a private support system that you can't link to?

[riemerta6]

https://wordpress.org/support/topic/not-saving-with-gutenberg/

[youknowriad]

Is this still an issue? I know both ACF and Gutenberg have been updated to fix conflicts.

[riemerta6]

Hey Riad, This is still an issue on Gutenberg pages. I think it has to do with how the plugin uses CodeMirror. It creates a textarea field then replaces that field with a CodeMirror field. Works fine when Gutenberg isn't being used. Thanks for the follow-up! *Troy Riemer* *703.786.8658* *redclaycreative.com* <https://redclaycreative.com/> *schedule a meeting* <https://calendly.com/troy-riemer> *join occasional newsletter* <https://redclaycreative.us18.list-manage.com/subscribe?u=21b64e71ea119c297a0c3413a&id=24b23c2592> ᐧ

…

On Tue, Dec 25, 2018 at 4:29 AM Riad Benguella ***@***.***> wrote: Is this still an issue? I know both ACF and Gutenberg have been updated to fix conflicts. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#9768 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ApJyThWr8hRKTLHCo7OyCU7RJWVrraJsks5u8e_fgaJpZM4WiERx> .

[youknowriad]

Thanks for the heads-up, make sure to follow up with in the ACF repo as well. More insights might help us see how we can provide compatibility for this if needed.

[riemerta6]

I wanted to follow up on this issue. After digging deeper, I have realized it doesn't have anything to do with ACF or the plugin mentioned above. It has to do with how CodeMirror is initialized (by replacing textarea/metabox). Any ideas on how to save the edits to the metabox when CodeMirror is being used and Gutenberg is active on the page? What if everything typed in CodeMirror was copied to textarea using JavaScript?

[t-hamano]

I have to so that the Textarea is replaced with a CodeMirror field (using plugin ACF Code Field).

If you mean this by a plugin called ACF Code Field, it looks like this plugin is already closed.

Instead I tried Advanced Custom Fields: Extended which allows us to add the code editor field. (This plugin requires ACF Pro version, but luckily I had a permanent license)

From what I've tried with this plugin, it appears to apply CodeMirror to the field and persist code changes even after I save the post and reload the browser.

In any case, I think this issue is an implementation issue when applying Codemirror to Metabox, so I would like to close this issue.