Merge pull request #4011 from WordPress/update/sandbox-focus

Embeds: Detect focus on embed sandbox
WordPress · Jan 4, 2018 · ba4e71e · ba4e71e
2 parents 91f71ef + 2c0c13e
commit ba4e71e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -196,7 +196,12 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
 							</Placeholder>
 						) : (
 							<div className="wp-block-embed__wrapper">
-								<SandBox html={ html } title={ iframeTitle } type={ type } />
+								<SandBox
+									html={ html }
+									title={ iframeTitle }
+									type={ type }
+									onFocus={ () => setFocus() }
+								/>
 							</div>
 						) }
 						{ ( caption && caption.length > 0 ) || !! focus ? (

diff --git a/components/sandbox/index.js b/components/sandbox/index.js
@@ -6,12 +6,15 @@ import { Component, renderToString } from '@wordpress/element';
 export default class Sandbox extends Component {
 	constructor() {
 		super( ...arguments );
+
+		this.trySandbox = this.trySandbox.bind( this );
+		this.checkMessageForResize = this.checkMessageForResize.bind( this );
+		this.checkFocus = this.checkFocus.bind( this );
+
 		this.state = {
 			width: 0,
 			height: 0,
 		};
-		this.trySandbox = this.trySandbox.bind( this );
-		this.checkMessageForResize = this.checkMessageForResize.bind( this );
 	}
 
 	isFrameAccessible() {
@@ -50,6 +53,7 @@ export default class Sandbox extends Component {
 
 	componentDidMount() {
 		window.addEventListener( 'message', this.checkMessageForResize, false );
+		window.addEventListener( 'blur', this.checkFocus );
 		this.trySandbox();
 	}
 
@@ -59,6 +63,13 @@ export default class Sandbox extends Component {
 
 	componentWillUnmount() {
 		window.removeEventListener( 'message', this.checkMessageForResize );
+		window.removeEventListener( 'blur', this.checkFocus );
+	}
+
+	checkFocus() {
+		if ( this.props.onFocus && document.activeElement === this.iframe ) {
+			this.props.onFocus();
+		}
 	}
 
 	trySandbox() {