Reinitialize the iframe after the parent block is moved around (#21916)

* Reinitialize the iframe after the parent block is moved around

* Apply eslint

packages/components/src/sandbox/index.js

@@ -26,6 +26,18 @@ class Sandbox extends Component {
 
 	componentDidMount() {
 		this.trySandbox();
+		this.trySandboxWithoutRerender = () => {
+			this.trySandbox( false );
+		};
+		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
+		// after reordering the containing block. See these two issues for more details:
+		// https://github.com/WordPress/gutenberg/issues/6146
+		// https://github.com/facebook/react/issues/18752
+		this.iframe.current.addEventListener(
+			'load',
+			this.trySandboxWithoutRerender,
+			false
+		);
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -34,6 +46,13 @@ class Sandbox extends Component {
 		this.trySandbox( forceRerender );
 	}
 
+	componentWillUnmount() {
+		this.iframe.current.removeEventListener(
+			'load',
+			this.trySandboxWithoutRerender
+		);
+	}
+
 	isFrameAccessible() {
 		try {
 			return !! this.iframe.current.contentDocument.body;
@@ -233,7 +252,6 @@ class Sandbox extends Component {
 				title={ title }
 				className="components-sandbox"
 				sandbox="allow-scripts allow-same-origin allow-presentation"
-				onLoad={ () => this.trySandbox( false ) }
 				onFocus={ onFocus }
 				width={ Math.ceil( this.state.width ) }
 				height={ Math.ceil( this.state.height ) }