Gutenberg: ACF (Free) fields not displaying properly

[maddisondesigns]

Issue Overview

I created three simply custom fields. An input field, a text area and a TinyMCe field. The TinyMCE field isn't displaying correctly. There's no toolbar buttons displaying. Not only that, but the field is incredibly long.

There are also adhoc icons displaying at the bottom left-hand of the screen. I don't know if these icons are from the TinyMCE field or whether they're from Gutenberg

Steps to Reproduce (for bugs)

1. Install ACF
2. Add new Field Group
3. Create a TinyMCE (WYSIWYG) field
4. Set Field Group to display on Pages
5. Edit a page and view the custom fields that don't display properly
   

Expected Behavior

I expect to see all my ACF fields being displayed properly

Current Behavior

Not all ACF fierlds are being displyed properly

Related Issues and/or PRs

3728

_Firefox Quantum 57.0
Gutenberg Version 1.8.1
macOS Sierra 10.12.1_

[chthonic-ds]

Related: https://github.com/WordPress/gutenberg/issues/3302

This display issue with a TinyMCE/WYSIWYG field occurs for the Pods and Custom Field Suite plugins as well.

[youknowriad]

Yes I think it's a duplicate of #3302 Most TinyMCE fields don't display properly because TinyMCE is not used the same way in Gutenberg compared to the classic Editor.

Using the same version for TinyMCE for Gutenberg and those fields (we're temporarily using the most recent TinyMCE for Gutenberg compared to Core's version) might improve the situatation here. But I still expect some TinyMCE metaboxes to be incompatible with Gutenberg and should be marked as such to fallback to the classic editor.

[maddisondesigns]

So you're saying that because you've implement TinyMCE differently, this one field is going to force any use of ACF, PODS and CFS to revert back to the classic editor?

[youknowriad]

I'm saying, most likely no since I suspect that using the same version of TinyMCE might fix these fields. But some metaboxes using the global TinyMCE and old selectors might break and we have two options for these:

• Mark them as incompatible with Gutenberg and fallback to avoid breakage
• Update them slightly (which probably means, changing some Javascript method calls and update selectors) to make them work with Gutenberg.

[maddisondesigns]

Thanks for clarifying that