From 2c0c13e4c5c6fd193ce4b2acac2e0df2e274f1b5 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Thu, 14 Dec 2017 13:27:48 -0500
Subject: [PATCH] Embeds: Detect focus on embed sandbox

---
 blocks/library/embed/index.js |  7 ++++++-
 components/sandbox/index.js   | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
index 9b53cf9a111164..0b1d014a08efcc 100644
--- a/blocks/library/embed/index.js
+++ b/blocks/library/embed/index.js
@@ -205,7 +205,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
index e77fd8a06adf6d..d37206ff0b4831 100644
--- 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() {