From d14f1540655df9438528536e2c3f00d35b4c2078 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Tue, 14 Sep 2021 22:53:30 +0300
Subject: [PATCH 1/4] Rewrite FocusableIframe as hook API

---
 .../src/embed/wp-embed-preview.js             | 100 +++++++-----------
 .../components/src/focusable-iframe/README.md |   2 +
 .../components/src/focusable-iframe/index.js  |  35 ++----
 .../src/focusable-iframe/stories/index.js     |  19 ----
 packages/components/src/sandbox/index.js      |  10 +-
 packages/compose/README.md                    |   9 ++
 .../src/hooks/use-focusable-iframe/README.md  |  29 +++++
 .../src/hooks/use-focusable-iframe/index.js   |  38 +++++++
 packages/compose/src/index.js                 |   1 +
 9 files changed, 126 insertions(+), 117 deletions(-)
 delete mode 100644 packages/components/src/focusable-iframe/stories/index.js
 create mode 100644 packages/compose/src/hooks/use-focusable-iframe/README.md
 create mode 100644 packages/compose/src/hooks/use-focusable-iframe/index.js

diff --git a/packages/block-library/src/embed/wp-embed-preview.js b/packages/block-library/src/embed/wp-embed-preview.js
index f83341853c250f..754853e856e50d 100644
--- a/packages/block-library/src/embed/wp-embed-preview.js
+++ b/packages/block-library/src/embed/wp-embed-preview.js
@@ -1,96 +1,72 @@
 /**
  * WordPress dependencies
  */
+import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
 import { useRef, useEffect, useMemo } from '@wordpress/element';
 
 /** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
 
+const attributeMap = {
+	class: 'className',
+	frameborder: 'frameBorder',
+	marginheight: 'marginHeight',
+	marginwidth: 'marginWidth',
+};
+
 export default function WpEmbedPreview( { html } ) {
 	const ref = useRef();
+	const props = useMemo( () => {
+		const doc = new window.DOMParser().parseFromString( html, 'text/html' );
+		const iframe = doc.querySelector( 'iframe' );
+		const iframeProps = {};
+
+		Array.from( iframe.attributes ).forEach( ( { name, value } ) => {
+			if ( name === 'style' ) return;
+			iframeProps[ attributeMap[ name ] || name ] = value;
+		} );
+
+		return iframeProps;
+	}, [ html ] );
 
 	useEffect( () => {
 		const { ownerDocument } = ref.current;
 		const { defaultView } = ownerDocument;
 
 		/**
-		 * Checks for WordPress embed events signaling the height change when iframe
-		 * content loads or iframe's window is resized.  The event is sent from
-		 * WordPress core via the window.postMessage API.
+		 * Checks for WordPress embed events signaling the height change when
+		 * iframe content loads or iframe's window is resized.  The event is
+		 * sent from WordPress core via the window.postMessage API.
 		 *
-		 * References:
-		 * window.postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
-		 * WordPress core embed-template on load: https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L143
-		 * WordPress core embed-template on resize: https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L187
+		 * References: window.postMessage:
+		 * https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
+		 * WordPress core embed-template on load:
+		 * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L143
+		 * WordPress core embed-template on resize:
+		 * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L187
 		 *
 		 * @param {WPSyntheticEvent} event Message event.
 		 */
 		function resizeWPembeds( { data: { secret, message, value } = {} } ) {
-			if (
-				[ secret, message, value ].some(
-					( attribute ) => ! attribute
-				) ||
-				message !== 'height'
-			) {
+			if ( message !== 'height' || secret !== props[ 'data-secret' ] ) {
 				return;
 			}
 
-			ownerDocument
-				.querySelectorAll( `iframe[data-secret="${ secret }"` )
-				.forEach( ( iframe ) => {
-					if ( +iframe.height !== value ) {
-						iframe.height = value;
-					}
-				} );
-		}
-
-		/**
-		 * Checks whether the wp embed iframe is the activeElement,
-		 * if it is dispatch a focus event.
-		 */
-		function checkFocus() {
-			const { activeElement } = ownerDocument;
-
-			if (
-				activeElement.tagName !== 'IFRAME' ||
-				activeElement.parentNode !== ref.current
-			) {
-				return;
-			}
-
-			activeElement.focus();
+			ref.current.height = value;
 		}
 
 		defaultView.addEventListener( 'message', resizeWPembeds );
-		defaultView.addEventListener( 'blur', checkFocus );
-
 		return () => {
 			defaultView.removeEventListener( 'message', resizeWPembeds );
-			defaultView.removeEventListener( 'blur', checkFocus );
 		};
 	}, [] );
 
-	const __html = useMemo( () => {
-		const doc = new window.DOMParser().parseFromString( html, 'text/html' );
-		const iframe = doc.querySelector( 'iframe' );
-
-		if ( iframe ) {
-			iframe.removeAttribute( 'style' );
-		}
-
-		const blockQuote = doc.querySelector( 'blockquote' );
-
-		if ( blockQuote ) {
-			blockQuote.style.display = 'none';
-		}
-
-		return doc.body.innerHTML;
-	}, [ html ] );
-
 	return (
-		<div
-			ref={ ref }
-			className="wp-block-embed__wrapper"
-			dangerouslySetInnerHTML={ { __html } }
-		/>
+		<div className="wp-block-embed__wrapper">
+			<iframe
+				ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+				title={ props.title }
+				{ ...props }
+			/>
+		</div>
 	);
 }
diff --git a/packages/components/src/focusable-iframe/README.md b/packages/components/src/focusable-iframe/README.md
index 753bd78d6c78f9..a7cd2f0b31b5b4 100644
--- a/packages/components/src/focusable-iframe/README.md
+++ b/packages/components/src/focusable-iframe/README.md
@@ -1,5 +1,7 @@
 # Focusable Iframe
 
+**Deprecated**
+
 `<FocusableIframe />` is a component rendering an `iframe` element enhanced to support focus events. By default, it is not possible to detect when an iframe is focused or clicked within. This enhanced component uses a technique which checks whether the target of a window `blur` event is the iframe, inferring that this has resulted in the focus of the iframe. It dispatches an emulated [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) on the iframe element with event bubbling, so a parent component binding its own `onFocus` event will account for focus transitioning within the iframe.
 
 ## Usage
diff --git a/packages/components/src/focusable-iframe/index.js b/packages/components/src/focusable-iframe/index.js
index f98df583a20166..184912b0fc390a 100644
--- a/packages/components/src/focusable-iframe/index.js
+++ b/packages/components/src/focusable-iframe/index.js
@@ -1,37 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 export default function FocusableIframe( { iframeRef, ...props } ) {
-	const fallbackRef = useRef();
-	const ref = useMergeRefs( [ iframeRef, fallbackRef ] );
-
-	useEffect( () => {
-		const iframe = fallbackRef.current;
-		const { ownerDocument } = iframe;
-		const { defaultView } = ownerDocument;
-
-		/**
-		 * Checks whether the iframe is the activeElement, inferring that it has
-		 * then received focus, and calls the `onFocus` prop callback.
-		 */
-		function checkFocus() {
-			if ( ownerDocument.activeElement !== iframe ) {
-				return;
-			}
-
-			iframe.focus();
-		}
-
-		defaultView.addEventListener( 'blur', checkFocus );
-
-		return () => {
-			defaultView.removeEventListener( 'blur', checkFocus );
-		};
-	}, [] );
-
+	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
+	deprecated( 'wp.components.FocusableIframe', {
+		alternative: 'wp.compose.useFocusableIframe',
+	} );
 	// Disable reason: The rendered iframe is a pass-through component,
 	// assigning props inherited from the rendering parent. It's the
 	// responsibility of the parent to assign a title.
diff --git a/packages/components/src/focusable-iframe/stories/index.js b/packages/components/src/focusable-iframe/stories/index.js
deleted file mode 100644
index 631cd8dc0d5eee..00000000000000
--- a/packages/components/src/focusable-iframe/stories/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import FocusableIframe from '../';
-
-export default {
-	title: 'Components/FocusableIframe',
-	component: FocusableIframe,
-};
-
-export const _default = () => {
-	const source = text( 'iFrame Source', './' );
-	return <FocusableIframe src={ source } />;
-};
diff --git a/packages/components/src/sandbox/index.js b/packages/components/src/sandbox/index.js
index 5a705f0219977a..aeb9de49c2a6ee 100644
--- a/packages/components/src/sandbox/index.js
+++ b/packages/components/src/sandbox/index.js
@@ -7,11 +7,7 @@ import {
 	useState,
 	useEffect,
 } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FocusableIframe from '../focusable-iframe';
+import { useFocusableIframe } from '@wordpress/compose';
 
 const observeAndResizeJS = `
 	( function() {
@@ -238,8 +234,8 @@ export default function Sandbox( {
 	}, [ html ] );
 
 	return (
-		<FocusableIframe
-			iframeRef={ ref }
+		<iframe
+			ref={ useFocusableIframe() }
 			title={ title }
 			className="components-sandbox"
 			sandbox="allow-scripts allow-same-origin allow-presentation"
diff --git a/packages/compose/README.md b/packages/compose/README.md
index 8d918eba025707..d392378713824e 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -209,6 +209,15 @@ _Returns_
 
 -   `import('lodash').DebouncedFunc<TFunc>`: Debounced function.
 
+### useFocusableIframe
+
+Dispatches a bubbling focus event when the iframe receives focus. Use
+`onFocus` as usual on the iframe or a parent element.
+
+_Returns_
+
+-   `Object`: Ref to pass to the iframe.
+
 ### useFocusOnMount
 
 Hook used to focus the first tabbable element on mount.
diff --git a/packages/compose/src/hooks/use-focusable-iframe/README.md b/packages/compose/src/hooks/use-focusable-iframe/README.md
new file mode 100644
index 00000000000000..f2f9f0928698f6
--- /dev/null
+++ b/packages/compose/src/hooks/use-focusable-iframe/README.md
@@ -0,0 +1,29 @@
+# useFocusableIframe
+
+By default, it is not possible to detect when an iframe is focused or clicked
+within. This hook uses a technique which checks whether the target of a window
+`blur` event is the iframe, inferring that this has resulted in the focus of the
+iframe. It dispatches an emulated
+[`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) on
+the iframe element with event bubbling, so a parent component binding its own
+`onFocus` event will account for focus transitioning within the iframe.
+
+## Usage
+
+Use with an `iframe`. You may pass `onFocus` directly as the callback to be
+invoked when the iframe receives focus, or on an ancestor component since the
+event will bubble.
+
+```jsx
+import { useFocusableIframe } from '@wordpress/compose';
+
+const MyFocusableIframe = () => {
+    return(
+        <iframe
+            ref={ useFocusableIframe() }
+            src="/my-iframe-url"
+            onFocus={ () => console.log( 'iframe is focused' ) }
+        />
+    );
+};
+```
diff --git a/packages/compose/src/hooks/use-focusable-iframe/index.js b/packages/compose/src/hooks/use-focusable-iframe/index.js
new file mode 100644
index 00000000000000..3bc38ac5a08374
--- /dev/null
+++ b/packages/compose/src/hooks/use-focusable-iframe/index.js
@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
+/**
+ * Dispatches a bubbling focus event when the iframe receives focus. Use
+ * `onFocus` as usual on the iframe or a parent element.
+ *
+ * @return {Object} Ref to pass to the iframe.
+ */
+export default function useFocusableIframe() {
+	return useRefEffect( ( element ) => {
+		const { ownerDocument } = element;
+		if ( ! ownerDocument ) return;
+		const { defaultView } = ownerDocument;
+		if ( ! defaultView ) return;
+		const { FocusEvent } = defaultView;
+
+		/**
+		 * Checks whether the iframe is the activeElement, inferring that it has
+		 * then received focus, and dispatches a focus event.
+		 */
+		function checkFocus() {
+			if ( ownerDocument && ownerDocument.activeElement !== element ) {
+				element.dispatchEvent(
+					new FocusEvent( 'focus', { bubbles: true } )
+				);
+			}
+		}
+
+		defaultView.addEventListener( 'blur', checkFocus );
+
+		return () => {
+			defaultView.removeEventListener( 'blur', checkFocus );
+		};
+	}, [] );
+}
diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js
index b49d8f5912cf02..8f7a1022cf7b10 100644
--- a/packages/compose/src/index.js
+++ b/packages/compose/src/index.js
@@ -36,3 +36,4 @@ export { default as useThrottle } from './hooks/use-throttle';
 export { default as useMergeRefs } from './hooks/use-merge-refs';
 export { default as useRefEffect } from './hooks/use-ref-effect';
 export { default as __experimentalUseDropZone } from './hooks/use-drop-zone';
+export { default as useFocusableIframe } from './hooks/use-focusable-iframe';

From 09123bdd3bfa1274bce2ecda30d7708e6071d4fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Tue, 14 Sep 2021 23:24:37 +0300
Subject: [PATCH 2/4] Fix sandbox

---
 packages/components/src/sandbox/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/sandbox/index.js b/packages/components/src/sandbox/index.js
index aeb9de49c2a6ee..6b36fe4aa1862e 100644
--- a/packages/components/src/sandbox/index.js
+++ b/packages/components/src/sandbox/index.js
@@ -7,7 +7,7 @@ import {
 	useState,
 	useEffect,
 } from '@wordpress/element';
-import { useFocusableIframe } from '@wordpress/compose';
+import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
 const observeAndResizeJS = `
 	( function() {
@@ -235,7 +235,7 @@ export default function Sandbox( {
 
 	return (
 		<iframe
-			ref={ useFocusableIframe() }
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
 			title={ title }
 			className="components-sandbox"
 			sandbox="allow-scripts allow-same-origin allow-presentation"

From cf772e5e3fc10c8782916b592baef442fe21cd1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Wed, 15 Sep 2021 00:02:17 +0300
Subject: [PATCH 3/4] Fix for e2e test

---
 packages/block-library/src/embed/wp-embed-preview.js      | 2 ++
 packages/e2e-tests/specs/editor/various/embedding.test.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/embed/wp-embed-preview.js b/packages/block-library/src/embed/wp-embed-preview.js
index 754853e856e50d..4ea20951b207da 100644
--- a/packages/block-library/src/embed/wp-embed-preview.js
+++ b/packages/block-library/src/embed/wp-embed-preview.js
@@ -20,6 +20,8 @@ export default function WpEmbedPreview( { html } ) {
 		const iframe = doc.querySelector( 'iframe' );
 		const iframeProps = {};
 
+		if ( ! iframe ) return iframeProps;
+
 		Array.from( iframe.attributes ).forEach( ( { name, value } ) => {
 			if ( name === 'style' ) return;
 			iframeProps[ attributeMap[ name ] || name ] = value;
diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js
index 1bc541ff4bbf83..51dee5fc52f669 100644
--- a/packages/e2e-tests/specs/editor/various/embedding.test.js
+++ b/packages/e2e-tests/specs/editor/various/embedding.test.js
@@ -17,7 +17,7 @@ import {
 const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
 	url: 'https://wordpress.org/gutenberg/handbook/block-api/attributes/',
 	html:
-		'<div class="wp-embedded-content" data-secret="shhhh it is a secret">WordPress embed</div>',
+		'<div class="wp-embedded-content" data-secret="shhhh it is a secret"></div>',
 	type: 'rich',
 	provider_name: 'WordPress',
 	provider_url: 'https://wordpress.org',

From 116ef4886596fcc3317edd2a5b641c9ac368573e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Wed, 15 Sep 2021 00:14:06 +0300
Subject: [PATCH 4/4] Fix rebase error

---
 packages/block-library/src/embed/wp-embed-preview.js     | 5 +++--
 packages/compose/src/hooks/use-focusable-iframe/index.js | 8 ++------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/embed/wp-embed-preview.js b/packages/block-library/src/embed/wp-embed-preview.js
index 4ea20951b207da..0e812ffa647e3e 100644
--- a/packages/block-library/src/embed/wp-embed-preview.js
+++ b/packages/block-library/src/embed/wp-embed-preview.js
@@ -39,14 +39,15 @@ export default function WpEmbedPreview( { html } ) {
 		 * iframe content loads or iframe's window is resized.  The event is
 		 * sent from WordPress core via the window.postMessage API.
 		 *
-		 * References: window.postMessage:
+		 * References:
+		 * window.postMessage:
 		 * https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
 		 * WordPress core embed-template on load:
 		 * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L143
 		 * WordPress core embed-template on resize:
 		 * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L187
 		 *
-		 * @param {WPSyntheticEvent} event Message event.
+		 * @param {MessageEvent} event Message event.
 		 */
 		function resizeWPembeds( { data: { secret, message, value } = {} } ) {
 			if ( message !== 'height' || secret !== props[ 'data-secret' ] ) {
diff --git a/packages/compose/src/hooks/use-focusable-iframe/index.js b/packages/compose/src/hooks/use-focusable-iframe/index.js
index 3bc38ac5a08374..9eb464b4e3e802 100644
--- a/packages/compose/src/hooks/use-focusable-iframe/index.js
+++ b/packages/compose/src/hooks/use-focusable-iframe/index.js
@@ -15,22 +15,18 @@ export default function useFocusableIframe() {
 		if ( ! ownerDocument ) return;
 		const { defaultView } = ownerDocument;
 		if ( ! defaultView ) return;
-		const { FocusEvent } = defaultView;
 
 		/**
 		 * Checks whether the iframe is the activeElement, inferring that it has
 		 * then received focus, and dispatches a focus event.
 		 */
 		function checkFocus() {
-			if ( ownerDocument && ownerDocument.activeElement !== element ) {
-				element.dispatchEvent(
-					new FocusEvent( 'focus', { bubbles: true } )
-				);
+			if ( ownerDocument && ownerDocument.activeElement === element ) {
+				/** @type {HTMLElement} */ ( element ).focus();
 			}
 		}
 
 		defaultView.addEventListener( 'blur', checkFocus );
-
 		return () => {
 			defaultView.removeEventListener( 'blur', checkFocus );
 		};