Freeform: Unrecoverable error if embed present

[mcsf]

Issue Overview

Opening a classic post containing an embed with Gutenberg leads to a broken Freeform block.

Steps to Reproduce (for bugs)

1. Start a new post with the classic editor.
2. Insert a paragraph of text, then add a line break.
3. Paste an embeddable URL, e.g. https://wordpress.tv/2017/12/04/matt-mullenweg-state-of-the-word-2017/ or https://www.youtube.com/watch?v=e-QFj59PON4. An embed should correctly appear.
4. Add a new paragraph beneath it.
5. Save the post, as draft or published.
6. Open the post with Gutenberg.

Expected Behavior

The original post should appear, looking more or less the same, contained in a Freeform block.

Current Behavior

No content appears, and a TypeError is logged:

TypeError: self.editor.iframeElement is undefined in mce-view.js:866:5

Possible Solution

History bisection suggests this isn't a recent regression — has it always been around? Error originates in Freeform > OldEditor > wp.oldEditor > TinyMCE. Not clear yet if error lies only in TinyMCE or in the interaction with OldEditor.

Further debugging shows that regular blocks still work and that the error is properly contained inside the Freeform block, even though the BlockCrashWarning isn't always shown:

Screenshots / Video

Related Issues and/or PRs

Todos

• Tests
• Documentation

[mcsf]

Note that this change in core fixes the issue for me:

diff --git a/wp-includes/js/mce-view.js b/wp-includes/js/mce-view.js
index f5aa2337ea..12bbdd1d4b 100644
--- a/wp-includes/js/mce-view.js
+++ b/wp-includes/js/mce-view.js
@@ -862,7 +862,7 @@
 			}
 
 			// Obtain the target width for the embed.
-			if ( self.editor ) {
+			if ( self.editor && self.editor.iframeElement ) {
 				maxwidth = self.editor.iframeElement.clientWidth - 20; // Minus the sum of horizontal margins and borders.
 			}

[mcsf]

Hack in Gutenberg instead:

diff --git a/blocks/library/freeform/old-editor.js b/blocks/library/freeform/old-editor.js
index f38f4856..2148303e 100644
--- a/blocks/library/freeform/old-editor.js
+++ b/blocks/library/freeform/old-editor.js
@@ -89,6 +89,14 @@ export default class OldEditor extends Component {
 		const { attributes: { content }, setAttributes } = this.props;
 		const { ref } = this;
 
+		// Stub iframeElement in case plugins expect it there. See
+		// https://github.com/WordPress/gutenberg/issues/4125 for an example
+		// involving WordPress's audio/video views
+		// (wp-includes/js/mce-view.js).
+		if ( ! editor.iframeElement ) {
+			editor.iframeElement = false;
+		}
+
 		if ( content ) {
 			editor.on( 'loadContent', () => editor.setContent( content ) );
 		}

[mcsf]

This was fixed in core 8 days ago:

• WordPress/WordPress@fe2fda8
• https://core.trac.wordpress.org/ticket/40854

Closing this issue. :)