[RNMobile] Embed block: Implement specific Embed preview #33426

fluiddot · 2021-07-14T14:48:06Z

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#3725
WordPress-iOS PR: wordpress-mobile/WordPress-iOS#16866
WordPress-Android PR: wordpress-mobile/WordPress-Android#15051

Description

This PR includes the react-native-webview native module to render the HTML of the embed preview.

Following the implementation of the web version, a native version of the SandBox component has been implemented. In the following sections, I briefly describe the key points of this component and how it has been addressed for the native version.

Details

Embed preview component

Interactive flag and overlay

✅ It doesn't require further implementation.

Related code

gutenberg/packages/block-library/src/embed/embed-preview.js

Lines 45 to 52 in 105dc1d

    
           hideOverlay() { 
        
           	// This is called onMouseUp on the overlay. We can't respond to the `isSelected` prop 
        
           	// changing, because that happens on mouse down, and the overlay immediately disappears, 
        
           	// and the mouse event can end up in the preview content. We can't use onClick on 
        
           	// the overlay to hide it either, because then the editor misses the mouseup event, and 
        
           	// thinks we're multi-selecting blocks. 
        
           	this.setState( { interactive: true } ); 
        
           }

gutenberg/packages/block-library/src/embed/embed-preview.js

Lines 101 to 108 in 105dc1d

    
           	onFocus={ this.hideOverlay } 
        
           /> 
        
           { ! interactive && ( 
        
           	<div 
        
           		className="block-library-embed__interactive-overlay" 
        
           		onMouseUp={ this.hideOverlay } 
        
           	/> 
        
           ) }

This is mainly used to show/hide an overlay view, as far as I checked, the purpose of this logic is to prevent the user to interact with the preview unless the block and the Iframe are focused. In native, this is not necessary as we can easily control the interaction via the pointerEvents prop of the View component and the isSelected prop.

Sandbox classnames

🔧 This will be addressed in this issue: wordpress-mobile/gutenberg-mobile#3284

Related code

gutenberg/packages/block-library/src/embed/embed-preview.js

Lines 81 to 85 in 105dc1d

    
           const sandboxClassnames = classnames( 
        
           	type, 
        
           	className, 
        
           	'wp-block-embed__wrapper' 
        
           );

gutenberg/packages/block-library/src/embed/embed-preview.js

Line 100 in 105dc1d

type={ sandboxClassnames }

I'm not sure if they're required in native, but it would be worth investigating it, maybe we would need them for the alignment.

`WpEmbedPreview` component

🔧 This will be addressed in this issue: wordpress-mobile/gutenberg-mobile#3744.

Related code

gutenberg/packages/block-library/src/embed/embed-preview.js

Lines 92 to 93 in 105dc1d

    
           'wp-embed' === type ? ( 
        
           	<WpEmbedPreview html={ html } />

This PR doesn't support yet WordPress embeds.

Not previewable case

🔧 This will be addressed in this issue: wordpress-mobile/gutenberg-mobile#3277

Related code

gutenberg/packages/block-library/src/embed/embed-preview.js

Lines 122 to 138 in 105dc1d

    
           <Placeholder 
        
           	icon={ <BlockIcon icon={ icon } showColors /> } 
        
           	label={ label } 
        
           > 
        
           	<p className="components-placeholder__error"> 
        
           		<a href={ url }>{ url }</a> 
        
           	</p> 
        
           	<p className="components-placeholder__error"> 
        
           		{ sprintf( 
        
           			/* translators: %s: host providing embed content e.g: www.youtube.com */ 
        
           			__( 
        
           				"Embedded content from %s can't be previewed in the editor." 
        
           			), 
        
           			parsedHostBaseUrl 
        
           		) } 
        
           	</p> 
        
           </Placeholder>

We're currently displaying the unavailable preview fallback, now that we support previews, we should update this component.

Sandbox component

`FocusableIframe` component

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 241 to 249 in 105dc1d

    
           <FocusableIframe 
        
           	iframeRef={ ref } 
        
           	title={ title } 
        
           	className="components-sandbox" 
        
           	sandbox="allow-scripts allow-same-origin allow-presentation" 
        
           	onFocus={ onFocus } 
        
           	width={ Math.ceil( width ) } 
        
           	height={ Math.ceil( height ) } 
        
           />

This component is mainly used in the web version to determine if the Iframe has been focused and notify the embed preview component. In the embed preview, the focus event is used for controlling the preview interaction, as we're going to control it in a different way, implementing this component won't be necessary for the native version.

Resize JS observer

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 16 to 73 in 105dc1d

    
           const observeAndResizeJS = ` 
        
           	( function() { 
        
           		var observer; 
        
           		if ( ! window.MutationObserver || ! document.body || ! window.parent ) { 
        
           			return; 
        
           		} 
        
           		function sendResize() { 
        
           			var clientBoundingRect = document.body.getBoundingClientRect(); 
        
           			window.parent.postMessage( { 
        
           				action: 'resize', 
        
           				width: clientBoundingRect.width, 
        
           				height: clientBoundingRect.height, 
        
           			}, '*' ); 
        
           		} 
        
           		observer = new MutationObserver( sendResize ); 
        
           		observer.observe( document.body, { 
        
           			attributes: true, 
        
           			attributeOldValue: false, 
        
           			characterData: true, 
        
           			characterDataOldValue: false, 
        
           			childList: true, 
        
           			subtree: true 
        
           		} ); 
        
           		window.addEventListener( 'load', sendResize, true ); 
        
           		// Hack: Remove viewport unit styles, as these are relative 
        
           		// the iframe root and interfere with our mechanism for 
        
           		// determining the unconstrained page bounds. 
        
           		function removeViewportStyles( ruleOrNode ) { 
        
           			if( ruleOrNode.style ) { 
        
           				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) { 
        
           					if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) { 
        
           						ruleOrNode.style[ style ] = ''; 
        
           					} 
        
           				} ); 
        
           			} 
        
           		} 
        
           		Array.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles ); 
        
           		Array.prototype.forEach.call( document.styleSheets, function( stylesheet ) { 
        
           			Array.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles ); 
        
           		} ); 
        
           		document.body.style.position = 'absolute'; 
        
           		document.body.style.width = '100%'; 
        
           		document.body.setAttribute( 'data-resizable-iframe-connected', '' ); 
        
           		sendResize(); 
        
           		// Resize events can change the width of elements with 100% width, but we don't 
        
           		// get an DOM mutations for that, so do the resize when the window is resized, too. 
        
           		window.addEventListener( 'resize', sendResize, true ); 
        
           } )();`;

This JS code is used to listen for size changes within the preview, initially, we can use the same version in native. The only tweak I introduced is the object used to notify upstream, on native is ReactNativeWebView.

gutenberg/packages/components/src/sandbox/index.native.js

Line 27 in 0d35c24

window.ReactNativeWebView.postMessage(JSON.stringify( {

Iframe style

🔧 This will be addressed in this issue: wordpress-mobile/gutenberg-mobile#3284

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 75 to 96 in 105dc1d

    
           const style = ` 
        
           	body { 
        
           		margin: 0; 
        
           	} 
        
           	html, 
        
           	body, 
        
           	body > div, 
        
           	body > div iframe { 
        
           		width: 100%; 
        
           	} 
        
           	html.wp-has-aspect-ratio, 
        
           	body.wp-has-aspect-ratio, 
        
           	body.wp-has-aspect-ratio > div, 
        
           	body.wp-has-aspect-ratio > div iframe { 
        
           		height: 100%; 
        
           		overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */ 
        
           	} 
        
           	body > div > * { 
        
           		margin-top: 0 !important; /* Has to have !important to override inline styles. */ 
        
           		margin-bottom: 0 !important; 
        
           	} 
        
           `;

This is the style object used as the base style for the preview. I noticed that it references the class name wp-has-aspect-ratio, we should check what's the purpose of this and if required implement it in the native version.

`isFrameAccessible` function

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 110 to 116 in 105dc1d

    
           function isFrameAccessible() { 
        
           	try { 
        
           		return !! ref.current.contentDocument.body; 
        
           	} catch ( e ) { 
        
           		return false; 
        
           	} 
        
           }

Not required because the webview component is always accessible.

`trySandbox` function

`contentDocument` ref

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 123 to 124 in 105dc1d

    
           const { contentDocument, ownerDocument } = ref.current; 
        
           const { body } = contentDocument;

gutenberg/packages/components/src/sandbox/index.js

Lines 170 to 175 in 105dc1d

    
           // writing the document like this makes it act in the same way as if it was 
        
           // loaded over the network, so DOM creation and mutation, script execution, etc. 
        
           // all work as expected 
        
           contentDocument.open(); 
        
           contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) ); 
        
           contentDocument.close();

It's used for injecting the HTML to the IFrame in the web version, initially, it won't be necessary for the native version as we use the source prop of the webview component.

However, I noticed that the body property is extracted from this value so we should investigate if it's required.

EDIT: This is not required in the mobile version.

gutenberg/packages/components/src/sandbox/index.js

Line 128 in 105dc1d

null !== body.getAttribute( 'data-resizable-iframe-connected' )

`ownerDocument` ref - Language value

🔧 Being addressed in rnmobile/embed-block-preview-locale branch.

Related code

gutenberg/packages/components/src/sandbox/index.js

Line 139 in 105dc1d

lang={ ownerDocument.documentElement.lang }

Used to extract the language from the browser so it's not necessary for the native version. For now, in the native version, the language is fixed to en but we should fetch it from the device via the locale.

gutenberg/packages/components/src/sandbox/index.native.js

Lines 111 to 112 in 0d35c24

    
           // TODO: Use the device's locale 
        
           const lang = 'en';

`data-resizable-iframe-connected` attribute

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 126 to 131 in 105dc1d

    
           if ( 
        
           	! forceRerender && 
        
           	null !== body.getAttribute( 'data-resizable-iframe-connected' ) 
        
           ) { 
        
           	return; 
        
           }

gutenberg/packages/components/src/sandbox/index.js

Line 153 in 105dc1d

data-resizable-iframe-connected="data-resizable-iframe-connected"

gutenberg/packages/components/src/sandbox/index.js

Line 66 in 105dc1d

document.body.setAttribute( 'data-resizable-iframe-connected', '' );

Looks like it's used to know if the resize observer has been initialized, we should investigate if it's required.

EDIT: This is not required in the mobile version.

HTML Doc

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 137 to 168 in 105dc1d

    
           const htmlDoc = ( 
        
           	<html 
        
           		lang={ ownerDocument.documentElement.lang } 
        
           		className={ type } 
        
           	> 
        
           		<head> 
        
           			<title>{ title }</title> 
        
           			<style dangerouslySetInnerHTML={ { __html: style } } /> 
        
           			{ styles.map( ( rules, i ) => ( 
        
           				<style 
        
           					key={ i } 
        
           					dangerouslySetInnerHTML={ { __html: rules } } 
        
           				/> 
        
           			) ) } 
        
           		</head> 
        
           		<body 
        
           			data-resizable-iframe-connected="data-resizable-iframe-connected" 
        
           			className={ type } 
        
           		> 
        
           			<div dangerouslySetInnerHTML={ { __html: html } } /> 
        
           			<script 
        
           				type="text/javascript" 
        
           				dangerouslySetInnerHTML={ { 
        
           					__html: observeAndResizeJS, 
        
           				} } 
        
           			/> 
        
           			{ scripts.map( ( src ) => ( 
        
           				<script key={ src } src={ src } /> 
        
           			) ) } 
        
           		</body> 
        
           	</html> 
        
           );

This is the HTML injected into the webview, the current code is ok but I included the following meta tag to fit the content:

gutenberg/packages/components/src/sandbox/index.native.js

Lines 122 to 125 in 0d35c24

    
           <meta 
        
           	name="viewport" 
        
           	content="width=device-width, initial-scale=1" 
        
           ></meta>

Resize message handling

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 185 to 210 in 105dc1d

    
           function checkMessageForResize( event ) { 
        
           	const iframe = ref.current; 
        
           	// Verify that the mounted element is the source of the message 
        
           	if ( ! iframe || iframe.contentWindow !== event.source ) { 
        
           		return; 
        
           	} 
        
           	// Attempt to parse the message data as JSON if passed as string 
        
           	let data = event.data || {}; 
        
           	if ( 'string' === typeof data ) { 
        
           		try { 
        
           			data = JSON.parse( data ); 
        
           		} catch ( e ) {} 
        
           	} 
        
           	// Update the state only if the message is formatted as we expect, 
        
           	// i.e. as an object with a 'resize' action. 
        
           	if ( 'resize' !== data.action ) { 
        
           		return; 
        
           	} 
        
           	setWidth( data.width ); 
        
           	setHeight( data.height ); 
        
           }

This is the callback used for handling resize events from the resize JS observer. I'd like to note that I removed a part that is used to verify that the origin of the message is the resize observer, in native, this is not really necessary as the resize message it's the only one that we're receiving.

Load event listener

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 215 to 219 in 105dc1d

    
           // 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 
        
           ref.current.addEventListener( 'load', tryNoForceSandbox, false );

The load event is used to call the trySandbox function after the load in the web version, as far as I checked, this is not required but it would be nice to investigate it further.

EDIT: This is not required in the mobile version.

Message event listener

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Line 220 in 105dc1d

defaultView.addEventListener( 'message', checkMessageForResize );

In this case, we use the webview component message system so it's not required.

IFrame extra props

✅ It doesn't require further implementation.

Related code

gutenberg/packages/components/src/sandbox/index.js

Lines 241 to 249 in 105dc1d

    
           <FocusableIframe 
        
           	iframeRef={ ref } 
        
           	title={ title } 
        
           	className="components-sandbox" 
        
           	sandbox="allow-scripts allow-same-origin allow-presentation" 
        
           	onFocus={ onFocus } 
        
           	width={ Math.ceil( width ) } 
        
           	height={ Math.ceil( height ) } 
        
           />

In the web version, we have the following extra props passed to the Iframe:

className="components-sandbox"
sandbox="allow-scripts allow-same-origin allow-presentation"
Size (width and height)

We should verify if they're required in the native version.

NOTE: The size in the native version is handled by passing an inline style with the aspect ratio calculated from the preview size.

gutenberg/packages/components/src/sandbox/index.native.js

Lines 188 to 190 in 0d35c24

    
           style={ { 
        
           	aspectRatio: Math.ceil( width ) / Math.ceil( height ) || 1, 
        
           } }

EDIT: This is not required in the mobile version.

How has this been tested?

Test all providers

Switch to HTML mode
Add the following HTML which includes all providers

HTML code

<!-- wp:embed {"url":"https://www.amazon.com/dp/B086V2NKW6/ref=cm_sw_em_r_mt_dp_T9CZKRCGX4XFCGT31VAM","type":"rich","providerNameSlug":"amazon"} -->
<figure class="wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon"><div class="wp-block-embed__wrapper">
https://www.amazon.com/dp/B086V2NKW6/ref=cm_sw_em_r_mt_dp_T9CZKRCGX4XFCGT31VAM
</div><figcaption>Amazon Kindle instant previews</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://animoto.com/play/sbONyhv5XN2fn26GGA061A","type":"video","providerNameSlug":"animoto"} -->
<figure class="wp-block-embed is-type-video is-provider-animoto wp-block-embed-animoto"><div class="wp-block-embed__wrapper">
https://animoto.com/play/sbONyhv5XN2fn26GGA061A
</div></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://cloudup.com/iGdvFflihj0","type":"rich","providerNameSlug":"cloudup","responsive":true,"align":"wide","className":"wp-embed-aspect-4-3 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed alignwide is-type-rich is-provider-cloudup wp-block-embed-cloudup wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://cloudup.com/iGdvFflihj0
</div><figcaption>CloudUp</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://poll.fm/10575316","type":"rich","providerNameSlug":"crowdsignal","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-crowdsignal wp-block-embed-crowdsignal"><div class="wp-block-embed__wrapper">
https://poll.fm/10575316
</div><figcaption>Crowdsignal</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.dailymotion.com/video/x7zktsb","type":"video","providerNameSlug":"dailymotion","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-dailymotion wp-block-embed-dailymotion wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.dailymotion.com/video/x7zktsb
</div><figcaption>Dailymotion</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.facebook.com/WordPress/posts/10157978031167911?cft_[0]=AZVvIZnOgLmO0aGMW4l_KcldOSSTnnoKogx7sWLpwpMpQjGresqAxd8KVMTBbKyX95DiRBKMPVZKmVUYHpvuK2AK73LkLoLxKRXHhHR73LMAAdy8X13RWJuUbTE4ISBAOQ96wDsk6Fz-VNRLG8Vp-2vJiXSVd4sfYiuGEkNizSmaXg\u0026amp; _tn_=%2CO%2CP-R ","type":"rich","providerNameSlug":"embed-handler","responsive":true,"previewable":false} -->
<figure class="wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler"><div class="wp-block-embed__wrapper">
https://www.facebook.com/WordPress/posts/10157978031167911?cft_[0]=AZVvIZnOgLmO0aGMW4l_KcldOSSTnnoKogx7sWLpwpMpQjGresqAxd8KVMTBbKyX95DiRBKMPVZKmVUYHpvuK2AK73LkLoLxKRXHhHR73LMAAdy8X13RWJuUbTE4ISBAOQ96wDsk6Fz-VNRLG8Vp-2vJiXSVd4sfYiuGEkNizSmaXg&amp; _tn_=%2CO%2CP-R 
</div><figcaption>Facebook</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://flic.kr/p/2h93TrK","type":"photo","providerNameSlug":"flickr","responsive":true} -->
<figure class="wp-block-embed is-type-photo is-provider-flickr wp-block-embed-flickr"><div class="wp-block-embed__wrapper">
https://flic.kr/p/2h93TrK
</div><figcaption>Flickr</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://media.giphy.com/media/1d7F9xyq6j7C1ojbC5/giphy.gif","type":"rich","providerNameSlug":"embed-handler"} -->
<figure class="wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler"><div class="wp-block-embed__wrapper">
https://media.giphy.com/media/1d7F9xyq6j7C1ojbC5/giphy.gif
</div><figcaption>Giphy</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p><strong>Imgur provider doesn’t work:</strong><br />https://imgur.com/gallery/Tfj5BzO</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>https://imgur.com/gallery/Tfj5BzO</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://www.instagram.com/p/Bl6LgZgFDOm","type":"rich","providerNameSlug":"instagram","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram"><div class="wp-block-embed__wrapper">
https://www.instagram.com/p/Bl6LgZgFDOm
</div><figcaption>Instagram</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://issuu.com/sneha-3213/docs/react_native_0.64.2_released_discover_what_s_new_","type":"rich","providerNameSlug":"issuu","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-issuu wp-block-embed-issuu"><div class="wp-block-embed__wrapper">
https://issuu.com/sneha-3213/docs/react_native_0.64.2_released_discover_what_s_new_
</div><figcaption>Issuu</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.kickstarter.com/projects/elanlee/exploding-kittens?ref=discovery\u0026amp;term=exploding%20kittens","type":"rich","providerNameSlug":"kickstarter","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-rich is-provider-kickstarter wp-block-embed-kickstarter wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.kickstarter.com/projects/elanlee/exploding-kittens?ref=discovery&amp;term=exploding%20kittens
</div><figcaption>Kickstarter</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p><strong>Meetup.com provider doesn’t work:</strong><br />https://www.meetup.com/es/The-Reno-WordPress-Meetup-Group/events/smpbksycckblc/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>https://www.meetup.com/es/The-Reno-WordPress-Meetup-Group/events/smpbksycckblc/</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://www.mixcloud.com/maxvibes/nu-jazz-lounge/","type":"rich","providerNameSlug":"mixcloud","responsive":true,"className":"wp-embed-aspect-21-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-rich is-provider-mixcloud wp-block-embed-mixcloud wp-embed-aspect-21-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.mixcloud.com/maxvibes/nu-jazz-lounge/
</div><figcaption>Mixcloud</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.reddit.com/r/reactnative/comments/oovdxz/typescript_or_javascript_for_rn/?utm_source=share\u0026amp;utm_medium=web2x\u0026amp;context=3","type":"rich","providerNameSlug":"reddit","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-reddit wp-block-embed-reddit"><div class="wp-block-embed__wrapper">
https://www.reddit.com/r/reactnative/comments/oovdxz/typescript_or_javascript_for_rn/?utm_source=share&amp;utm_medium=web2x&amp;context=3
</div><figcaption>Reddit</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.reverbnation.com/hmsurf/song/27456133-sids-lesson","type":"rich","providerNameSlug":"embed","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-embed wp-block-embed-embed"><div class="wp-block-embed__wrapper">
https://www.reverbnation.com/hmsurf/song/27456133-sids-lesson
</div><figcaption>Reverbnation</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.scribd.com/document/430258318/Professional-Javascript","type":"rich","providerNameSlug":"scribd","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-scribd wp-block-embed-scribd"><div class="wp-block-embed__wrapper">
https://www.scribd.com/document/430258318/Professional-Javascript
</div><figcaption>Scribd</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.slideshare.net/brianhousand/game-on-iagc-2016","type":"rich","providerNameSlug":"slideshare","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-slideshare wp-block-embed-slideshare"><div class="wp-block-embed__wrapper">
https://www.slideshare.net/brianhousand/game-on-iagc-2016
</div><figcaption>Slideshare</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://soundcloud.com/dillonfrancis/daft-punk-harder-better-faster-stronger-dillon-francis-remix","type":"rich","providerNameSlug":"soundcloud","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-soundcloud wp-block-embed-soundcloud"><div class="wp-block-embed__wrapper">
https://soundcloud.com/dillonfrancis/daft-punk-harder-better-faster-stronger-dillon-francis-remix
</div><figcaption>Soundcloud</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://speakerdeck.com/notwaldorf/how-to-train-your-dragon-web-standard","type":"rich","providerNameSlug":"speaker-deck","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-rich is-provider-speaker-deck wp-block-embed-speaker-deck wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://speakerdeck.com/notwaldorf/how-to-train-your-dragon-web-standard
</div><figcaption>Speakerdeck</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://open.spotify.com/track/5sICkBXVmaCQk5aISGR3x1","type":"rich","providerNameSlug":"spotify","responsive":true,"className":"wp-embed-aspect-21-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://open.spotify.com/track/5sICkBXVmaCQk5aISGR3x1
</div><figcaption>Spotify</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.ted.com/talks/max_hawkins_i_let_algorithms_randomize_my_life_for_two_years?utm_source=tedcomshare\u0026amp;utm_medium=social\u0026amp;utm_campaign=tedspread","type":"video","providerNameSlug":"ted","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-ted wp-block-embed-ted wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.ted.com/talks/max_hawkins_i_let_algorithms_randomize_my_life_for_two_years?utm_source=tedcomshare&amp;utm_medium=social&amp;utm_campaign=tedspread
</div><figcaption>Ted</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.tiktok.com/@25pesetas/video/6946150795909893381","type":"video","providerNameSlug":"tiktok","responsive":true} -->
<figure class="wp-block-embed is-type-video is-provider-tiktok wp-block-embed-tiktok"><div class="wp-block-embed__wrapper">
https://www.tiktok.com/@25pesetas/video/6946150795909893381
</div><figcaption>Tiktok</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://popelickva.tumblr.com/post/646024560144171008/the-sega-cd-version-of-monkey-island-has-some","type":"rich","providerNameSlug":"tumblr"} -->
<figure class="wp-block-embed is-type-rich is-provider-tumblr wp-block-embed-tumblr"><div class="wp-block-embed__wrapper">
https://popelickva.tumblr.com/post/646024560144171008/the-sega-cd-version-of-monkey-island-has-some
</div><figcaption>Tumblr</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://twitter.com/automattic/status/1395447061336711181","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/automattic/status/1395447061336711181
</div><figcaption>Twitter</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://vimeo.com/278150343","type":"video","providerNameSlug":"vimeo","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://vimeo.com/278150343
</div><figcaption>Vimeo</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://videopress.com/v/rFm2ce4R","type":"video","providerNameSlug":"videopress","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-videopress wp-block-embed-videopress wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://videopress.com/v/rFm2ce4R
</div><figcaption>WordPress.tv</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=ssfHW5lwFZg","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=ssfHW5lwFZg
</div><figcaption>YouTube</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.screencast.com/t/F6R333xrD3BQ","type":"video","providerNameSlug":"screencast-com"} -->
<figure class="wp-block-embed is-type-video is-provider-screencast-com wp-block-embed-screencast-com"><div class="wp-block-embed__wrapper">
https://www.screencast.com/t/F6R333xrD3BQ
</div><figcaption>Screencast</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://wordpress.org/news/2021/07/tatum/","type":"wp-embed","providerNameSlug":"wordpress-news"} -->
<figure class="wp-block-embed is-type-wp-embed is-provider-wordpress-news wp-block-embed-wordpress-news"><div class="wp-block-embed__wrapper">
https://wordpress.org/news/2021/07/tatum/
</div><figcaption>WP-embed (not supported yet)</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://www.educreations.com/lesson/view/science/25630392/?s=UkHL9p\u0026amp;ref=app","type":"video","providerNameSlug":"educreations"} -->
<figure class="wp-block-embed is-type-video is-provider-educreations wp-block-embed-educreations"><div class="wp-block-embed__wrapper">
https://www.educreations.com/lesson/view/science/25630392/?s=UkHL9p&amp;ref=app
</div><figcaption>Educreations</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"https://sproutvideo-example.vids.io/videos/189bdbb01e1ce7c790/video-websites-by-sproutvideo","type":"video","providerNameSlug":"sproutvideo"} -->
<figure class="wp-block-embed is-type-video is-provider-sproutvideo wp-block-embed-sproutvideo"><div class="wp-block-embed__wrapper">
https://sproutvideo-example.vids.io/videos/189bdbb01e1ce7c790/video-websites-by-sproutvideo
</div><figcaption>SproutVideo</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:embed {"url":"http://automattic-2.wistia.com/medias/mqf9c9147u","type":"video","providerNameSlug":"wistia-inc"} -->
<figure class="wp-block-embed is-type-video is-provider-wistia-inc wp-block-embed-wistia-inc"><div class="wp-block-embed__wrapper">
http://automattic-2.wistia.com/medias/mqf9c9147u
</div><figcaption>Wistia</figcaption></figure>
<!-- /wp:embed -->

Observer that embed blocks are displaying a preview for each provider.
NOTE: The following providers are not working on both platforms:
- Facebook
- Imgur
- Meetup.com

Interaction is disabled

Add an Embed block
Set a URL that can be previewed (example: https://www.youtube.com/watch?v=ssfHW5lwFZg)
Observe that the content preview is displayed
Tap on any UI element (like the play button) within the preview content
Observe that interaction is disabled

Inline preview disabled in production mode

Use an installable build to test production mode
Add an Embed block
Set a URL that can be previewed (example: https://www.youtube.com/watch?v=ssfHW5lwFZg)
Observe that the block's content displays a message that inline preview is coming soon and the text "PREVIEW POST"
Tap on the block to edit it
Observe that an info modal shows up explaining that previews are coming soon
Observe that tapping on the dismiss button closes the modal
Tap on the block again to open the previous modal
Tap on "Preview post"
Observe that the modal is closed and the preview modal is opened displaying the embed block

Performance

Preparation:

Add a high number of embed blocks that will display a preview like the previous HTML code from "Test all providers" test case
Save the post/page

Opening a post/page

Open the post/page
Observe that performance is not degraded when loading a high number of embed blocks

Scrolling content

Open the post/page
Scroll the post/page content from top to bottom and vice-versa
Observe that performance is not degraded when scrolling

Screenshots

iOS	Android
embed-block-preview-ios.mp4	embed-block-preview-android.mp4

Types of changes

New feature

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

# Conflicts: # package-lock.json # packages/block-library/src/embed/edit.js # packages/block-library/src/embed/embed-preview.native.js # packages/react-native-bridge/android/react-native-bridge/build.gradle # packages/react-native-editor/ios/Podfile.lock # packages/react-native-editor/package.json

github-actions · 2021-07-14T14:58:29Z

Size Change: +1.34 kB (0%)

Total Size: 1.03 MB

Filename	Size	Change
`build/block-editor/index.min.js`	118 kB	+51 B (0%)
`build/block-library/blocks/columns/editor-rtl.css`	194 B	+5 B (+3%)
`build/block-library/blocks/columns/editor.css`	193 B	+5 B (+3%)
`build/block-library/editor-rtl.css`	9.86 kB	+7 B (0%)
`build/block-library/editor.css`	9.84 kB	+7 B (0%)
`build/block-library/index.min.js`	146 kB	-17 B (0%)
`build/blocks/index.min.js`	47 kB	+179 B (0%)
`build/components/index.min.js`	209 kB	+1 kB (0%)
`build/components/style-rtl.css`	15.7 kB	-16 B (0%)
`build/components/style.css`	15.8 kB	-17 B (0%)
`build/edit-site/index.min.js`	25.8 kB	+134 B (+1%)

ℹ️ View Unchanged

Filename	Size
`build/a11y/index.min.js`	931 B
`build/admin-manifest/index.min.js`	1.09 kB
`build/annotations/index.min.js`	2.7 kB
`build/api-fetch/index.min.js`	2.19 kB
`build/autop/index.min.js`	2.08 kB
`build/blob/index.min.js`	459 B
`build/block-directory/index.min.js`	6.21 kB
`build/block-directory/style-rtl.css`	1.01 kB
`build/block-directory/style.css`	1.01 kB
`build/block-editor/style-rtl.css`	13.9 kB
`build/block-editor/style.css`	13.9 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B
`build/block-library/blocks/audio/editor.css`	58 B
`build/block-library/blocks/audio/style-rtl.css`	111 B
`build/block-library/blocks/audio/style.css`	111 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	474 B
`build/block-library/blocks/button/editor.css`	474 B
`build/block-library/blocks/button/style-rtl.css`	605 B
`build/block-library/blocks/button/style.css`	604 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B
`build/block-library/blocks/buttons/editor.css`	315 B
`build/block-library/blocks/buttons/style-rtl.css`	370 B
`build/block-library/blocks/buttons/style.css`	370 B
`build/block-library/blocks/calendar/style-rtl.css`	207 B
`build/block-library/blocks/calendar/style.css`	207 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	90 B
`build/block-library/blocks/code/style.css`	90 B
`build/block-library/blocks/code/theme-rtl.css`	131 B
`build/block-library/blocks/code/theme.css`	131 B
`build/block-library/blocks/columns/style-rtl.css`	474 B
`build/block-library/blocks/columns/style.css`	475 B
`build/block-library/blocks/cover/editor-rtl.css`	666 B
`build/block-library/blocks/cover/editor.css`	670 B
`build/block-library/blocks/cover/style-rtl.css`	1.23 kB
`build/block-library/blocks/cover/style.css`	1.23 kB
`build/block-library/blocks/embed/editor-rtl.css`	488 B
`build/block-library/blocks/embed/editor.css`	488 B
`build/block-library/blocks/embed/style-rtl.css`	400 B
`build/block-library/blocks/embed/style.css`	400 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor-rtl.css`	300 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/file/view.min.js`	322 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	707 B
`build/block-library/blocks/gallery/editor.css`	706 B
`build/block-library/blocks/gallery/style-rtl.css`	1.05 kB
`build/block-library/blocks/gallery/style.css`	1.05 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	159 B
`build/block-library/blocks/group/editor.css`	159 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	93 B
`build/block-library/blocks/group/theme.css`	93 B
`build/block-library/blocks/heading/editor-rtl.css`	152 B
`build/block-library/blocks/heading/editor.css`	152 B
`build/block-library/blocks/heading/style-rtl.css`	76 B
`build/block-library/blocks/heading/style.css`	76 B
`build/block-library/blocks/home-link/style-rtl.css`	247 B
`build/block-library/blocks/home-link/style.css`	247 B
`build/block-library/blocks/html/editor-rtl.css`	283 B
`build/block-library/blocks/html/editor.css`	284 B
`build/block-library/blocks/image/editor-rtl.css`	728 B
`build/block-library/blocks/image/editor.css`	728 B
`build/block-library/blocks/image/style-rtl.css`	482 B
`build/block-library/blocks/image/style.css`	487 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B
`build/block-library/blocks/latest-comments/style.css`	284 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B
`build/block-library/blocks/latest-posts/editor.css`	137 B
`build/block-library/blocks/latest-posts/style-rtl.css`	528 B
`build/block-library/blocks/latest-posts/style.css`	527 B
`build/block-library/blocks/list/style-rtl.css`	63 B
`build/block-library/blocks/list/style.css`	63 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	488 B
`build/block-library/blocks/media-text/style.css`	485 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	474 B
`build/block-library/blocks/navigation-link/editor.css`	474 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B
`build/block-library/blocks/navigation-link/style.css`	94 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.69 kB
`build/block-library/blocks/navigation/editor.css`	1.69 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.65 kB
`build/block-library/blocks/navigation/style.css`	1.64 kB
`build/block-library/blocks/navigation/view.min.js`	2.52 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	310 B
`build/block-library/blocks/page-list/editor.css`	310 B
`build/block-library/blocks/page-list/style-rtl.css`	242 B
`build/block-library/blocks/page-list/style.css`	242 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style-rtl.css`	248 B
`build/block-library/blocks/paragraph/style.css`	248 B
`build/block-library/blocks/post-author/editor-rtl.css`	210 B
`build/block-library/blocks/post-author/editor.css`	210 B
`build/block-library/blocks/post-author/style-rtl.css`	182 B
`build/block-library/blocks/post-author/style.css`	181 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	140 B
`build/block-library/blocks/post-comments-form/style.css`	140 B
`build/block-library/blocks/post-comments/style-rtl.css`	360 B
`build/block-library/blocks/post-comments/style.css`	359 B
`build/block-library/blocks/post-content/editor-rtl.css`	138 B
`build/block-library/blocks/post-content/editor.css`	138 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	412 B
`build/block-library/blocks/post-featured-image/editor.css`	412 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	143 B
`build/block-library/blocks/post-featured-image/style.css`	143 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	378 B
`build/block-library/blocks/post-template/style.css`	379 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	60 B
`build/block-library/blocks/post-title/style.css`	60 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	198 B
`build/block-library/blocks/pullquote/editor.css`	198 B
`build/block-library/blocks/pullquote/style-rtl.css`	361 B
`build/block-library/blocks/pullquote/style.css`	360 B
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B
`build/block-library/blocks/pullquote/theme.css`	167 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B
`build/block-library/blocks/query-pagination/editor.css`	262 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B
`build/block-library/blocks/query-pagination/style.css`	168 B
`build/block-library/blocks/query-title/editor-rtl.css`	85 B
`build/block-library/blocks/query-title/editor.css`	85 B
`build/block-library/blocks/query/editor-rtl.css`	131 B
`build/block-library/blocks/query/editor.css`	132 B
`build/block-library/blocks/quote/style-rtl.css`	169 B
`build/block-library/blocks/quote/style.css`	169 B
`build/block-library/blocks/quote/theme-rtl.css`	220 B
`build/block-library/blocks/quote/theme.css`	222 B
`build/block-library/blocks/rss/editor-rtl.css`	202 B
`build/block-library/blocks/rss/editor.css`	204 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	165 B
`build/block-library/blocks/search/editor.css`	165 B
`build/block-library/blocks/search/style-rtl.css`	374 B
`build/block-library/blocks/search/style.css`	375 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B
`build/block-library/blocks/separator/editor.css`	99 B
`build/block-library/blocks/separator/style-rtl.css`	250 B
`build/block-library/blocks/separator/style.css`	250 B
`build/block-library/blocks/separator/theme-rtl.css`	172 B
`build/block-library/blocks/separator/theme.css`	172 B
`build/block-library/blocks/shortcode/editor-rtl.css`	474 B
`build/block-library/blocks/shortcode/editor.css`	474 B
`build/block-library/blocks/site-logo/editor-rtl.css`	462 B
`build/block-library/blocks/site-logo/editor.css`	464 B
`build/block-library/blocks/site-logo/style-rtl.css`	153 B
`build/block-library/blocks/site-logo/style.css`	153 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	84 B
`build/block-library/blocks/site-title/editor.css`	84 B
`build/block-library/blocks/social-link/editor-rtl.css`	165 B
`build/block-library/blocks/social-link/editor.css`	165 B
`build/block-library/blocks/social-links/editor-rtl.css`	812 B
`build/block-library/blocks/social-links/editor.css`	811 B
`build/block-library/blocks/social-links/style-rtl.css`	1.33 kB
`build/block-library/blocks/social-links/style.css`	1.33 kB
`build/block-library/blocks/spacer/editor-rtl.css`	307 B
`build/block-library/blocks/spacer/editor.css`	307 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	471 B
`build/block-library/blocks/table/editor.css`	472 B
`build/block-library/blocks/table/style-rtl.css`	481 B
`build/block-library/blocks/table/style.css`	481 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	146 B
`build/block-library/blocks/tag-cloud/style.css`	146 B
`build/block-library/blocks/template-part/editor-rtl.css`	636 B
`build/block-library/blocks/template-part/editor.css`	635 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/term-description/editor-rtl.css`	90 B
`build/block-library/blocks/term-description/editor.css`	90 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	571 B
`build/block-library/blocks/video/editor.css`	572 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/common-rtl.css`	1.29 kB
`build/block-library/common.css`	1.29 kB
`build/block-library/reset-rtl.css`	527 B
`build/block-library/reset.css`	527 B
`build/block-library/style-rtl.css`	10.2 kB
`build/block-library/style.css`	10.3 kB
`build/block-library/theme-rtl.css`	688 B
`build/block-library/theme.css`	692 B
`build/block-serialization-default-parser/index.min.js`	1.09 kB
`build/block-serialization-spec-parser/index.min.js`	2.79 kB
`build/compose/index.min.js`	10.2 kB
`build/core-data/index.min.js`	12.3 kB
`build/customize-widgets/index.min.js`	10.4 kB
`build/customize-widgets/style-rtl.css`	1.5 kB
`build/customize-widgets/style.css`	1.49 kB
`build/data-controls/index.min.js`	614 B
`build/data/index.min.js`	7.03 kB
`build/date/index.min.js`	31.5 kB
`build/deprecated/index.min.js`	428 B
`build/dom-ready/index.min.js`	304 B
`build/dom/index.min.js`	4.53 kB
`build/edit-navigation/index.min.js`	13.4 kB
`build/edit-navigation/style-rtl.css`	3.1 kB
`build/edit-navigation/style.css`	3.1 kB
`build/edit-post/classic-rtl.css`	492 B
`build/edit-post/classic.css`	494 B
`build/edit-post/index.min.js`	28.4 kB
`build/edit-post/style-rtl.css`	7.18 kB
`build/edit-post/style.css`	7.17 kB
`build/edit-site/style-rtl.css`	5.01 kB
`build/edit-site/style.css`	5.01 kB
`build/edit-widgets/index.min.js`	15.9 kB
`build/edit-widgets/style-rtl.css`	4.01 kB
`build/edit-widgets/style.css`	4.02 kB
`build/editor/index.min.js`	37.5 kB
`build/editor/style-rtl.css`	3.92 kB
`build/editor/style.css`	3.91 kB
`build/element/index.min.js`	3.16 kB
`build/escape-html/index.min.js`	517 B
`build/format-library/index.min.js`	5.36 kB
`build/format-library/style-rtl.css`	668 B
`build/format-library/style.css`	669 B
`build/hooks/index.min.js`	1.55 kB
`build/html-entities/index.min.js`	424 B
`build/i18n/index.min.js`	3.59 kB
`build/is-shallow-equal/index.min.js`	501 B
`build/keyboard-shortcuts/index.min.js`	1.49 kB
`build/keycodes/index.min.js`	1.25 kB
`build/list-reusable-blocks/index.min.js`	1.85 kB
`build/list-reusable-blocks/style-rtl.css`	838 B
`build/list-reusable-blocks/style.css`	838 B
`build/media-utils/index.min.js`	2.88 kB
`build/notices/index.min.js`	845 B
`build/nux/index.min.js`	2.03 kB
`build/nux/style-rtl.css`	747 B
`build/nux/style.css`	743 B
`build/plugins/index.min.js`	1.83 kB
`build/primitives/index.min.js`	921 B
`build/priority-queue/index.min.js`	582 B
`build/react-i18n/index.min.js`	671 B
`build/redux-routine/index.min.js`	2.63 kB
`build/reusable-blocks/index.min.js`	2.28 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	10.5 kB
`build/server-side-render/index.min.js`	1.32 kB
`build/shortcode/index.min.js`	1.48 kB
`build/token-list/index.min.js`	562 B
`build/url/index.min.js`	1.72 kB
`build/viewport/index.min.js`	1.02 kB
`build/warning/index.min.js`	248 B
`build/widgets/index.min.js`	6.27 kB
`build/widgets/style-rtl.css`	1.04 kB
`build/widgets/style.css`	1.04 kB
`build/wordcount/index.min.js`	1.04 kB

_{compressed-size-action}

# Conflicts: # package-lock.json # packages/block-library/src/embed/edit.native.js # packages/block-library/src/embed/embed-preview.native.js # packages/react-native-editor/package.json

# Conflicts: # packages/react-native-bridge/android/settings.gradle

packages/block-library/src/embed/embed-preview.native.js

ceyhun · 2021-08-03T18:00:00Z

packages/components/src/sandbox/index.native.js

+				</head>
+				<body
+					data-resizable-iframe-connected="data-resizable-iframe-connected"
+					className={ type }


I think on web a few more class names are added to the type here:

gutenberg/packages/block-library/src/embed/embed-preview.js

Lines 81 to 85 in c9612a1

const sandboxClassnames = classnames(

type,

className,

'wp-block-embed__wrapper'

);

Should we replicate the same here?

I might be overlooking something the logic in the web version but I checked the HTML of the iframes and there're no styles defined for these classes, maybe it's being used for other functionality.

html tag:

body tag:

In any case, I'll replicate this logic in the native version just in case.

EDIT: I added the sandbox classnames and it actually had an effect on the styles because in some cases it's adding the class wp-has-aspect-ratio which does have styles:

gutenberg/packages/components/src/sandbox/index.js

Lines 85 to 91 in 8ef2008

html.wp-has-aspect-ratio,

body.wp-has-aspect-ratio,

body.wp-has-aspect-ratio > div,

body.wp-has-aspect-ratio > div iframe {

height: 100%;

overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */

}

However, for some reason it's not rendering properly the previews:

Following my previous comment, I'll investigate further the implications of the styles injected in the static HTML because I'm noticing discrepancies depending on the provider:

gutenberg/packages/components/src/sandbox/index.js

Lines 79 to 95 in 8ef2008

html,

body,

body > div,

body > div iframe {

width: 100%;

}

html.wp-has-aspect-ratio,

body.wp-has-aspect-ratio,

body.wp-has-aspect-ratio > div,

body.wp-has-aspect-ratio > div iframe {

height: 100%;

overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */

}

body > div > * {

margin-top: 0 !important; /* Has to have !important to override inline styles. */

margin-bottom: 0 !important;

}

I think styles.native.scss may be missing some of the styles defined in the web version styles.scss. Should we inject those directly into the webview as well?

Do you mean this style file from the sandbox component? If so, I don't think it's necessary because those styles are only used in the iframe component that is only rendered on the web version (reference).

In this commit I updated the generated styles and I verified with the changes from the block settings PR that it properly renders as expected when enabling/disabling the "Resize for smaller devices" option 🎊 .

RPReplay_Final1628269839.MP4

Sorry, I meant the one from embed, but I guess they were not necessary seeing that it works fine now 🎉

packages/components/src/sandbox/index.native.js

ceyhun

I did a few tests with the provided HTML and also by adding Embed blocks manually and this is working great so far. I've tested rotating, but I'm not sure how to test the resizing functionality.

I've commented with a few questions related to the preview and sandbox components, but overall I think it's looking very good. Thank you for the amazing work @fluiddot!

fluiddot · 2021-08-10T12:07:33Z

I've tested rotating, but I'm not sure how to test the resizing functionality.

Resizing functionality can be tested when rotating the device because it needs to be recalculated, in any case, we'll also test it when using the "Resize for smaller devices" option in the block settings PR.

fluiddot · 2021-08-10T12:17:00Z

@ceyhun The PR is ready for another review, so far I've spotted the following style issues but I think we could address them in a separate PRs:

Preview's height is bigger than the content

Animotion
Reverbnation (this can also be reproduced in the web version)
Educreations

Preview's height is smaller than the content and it gets cut off

TikTok (only on iOS)

Content's width doesn't fit the block

Vimeo

ceyhun

I've tested this with the builds for WPiOS(here) and WPAndroid(here). Found a few more style issues, but I don't think they are blockers.

Vimeo had a height issue (for both iOS and Android) instead of width for me.

Kickstarter had a height issue (for both iOS and Android), but it was with the webview itself, instead of the block. Also when I previewed the site page, it showed me a paragraph with the link instead of the embed.

Facebook link showed me a blank embed block instead of an error message.

For Twitter do you think it would be possible to keep showing the loading indicator until the webview is finished loading the URL? I think it might not seem very nice when it's loaded after a few moments. Again it's not a blocker, but maybe we can create a task to look into this if you think it's possible.

twitter.mp4

fluiddot · 2021-08-11T08:39:40Z

Thank you very much @ceyhun for the review ❤️ , I'll start the merge domino.

I've tested this with the builds for WPiOS(here) and WPAndroid(here). Found a few more style issues, but I don't think they are blockers.

Ok, that makes sense, I'll add the style issues you found to the new issue I'm creating as a follow-up.

EDIT: Here is the reference to the issue: wordpress-mobile/gutenberg-mobile#3823

Vimeo had a height issue (for both iOS and Android) instead of width for me.

Looks like it depends on the responsive attribute, I tried changing the Resize for smaller devices option in the web version and check the results on the app. When it's enabled, the width is smaller and when disabled it's the height, we'll need to dig into this when testing the block settings.

Kickstarter had a height issue (for both iOS and Android), but it was with the webview itself, instead of the block.

Right, I managed to reproduce it by disabling the "Resize for smaller devices" option, however, I noticed that this issue is also present when previewing the post (see attached screenshot), so it might be related to the preview content 🤔.

Also when I previewed the site page, it showed me a paragraph with the link instead of the embed.

Interesting, I didn't encounter that issue, could you share the URL you used?

Facebook link showed me a blank embed block instead of an error message.

Yep, we need to implement a similar error screen as we have on the web for this case (see attached screenshot). But I'm not sure if we should handle this case on the "Implement generic “No Preview” Embed preview UI" task or create a new issue, wdyt?

For Twitter do you think it would be possible to keep showing the loading indicator until the webview is finished loading the URL? I think it might not seem very nice when it's loaded after a few moments. Again it's not a blocker, but maybe we can create a task to look into this if you think it's possible.

That would be great but in this case, it's a bit tricky because it's not enough listening for the WebView loading to finish. In fact, when it finishes, the content that is loaded is the one without styles but includes a JS script that transforms the content into tweet format in a second phase.

After content is loaded	After the script transforms the content

fluiddot · 2021-08-11T08:57:47Z

I noticed that the pods weren't updated in the demo project so I updated them in this commit.

ceyhun · 2021-08-11T10:26:07Z

Interesting, I didn't encounter that issue, could you share the URL you used?

I used https://www.kickstarter.com/projects/elanlee/exploding-kittens?ref=discovery&term=exploding%20kittens on a free .com site.

Yep, we need to implement a similar error screen as we have on the web for this case (see attached screenshot). But I'm not sure if we should handle this case on the "Implement generic “No Preview” Embed preview UI" task or create a new issue, wdyt?

I think “No Preview” UI is for cases when embed is successful, but the preview can only be shown when we preview the post itself. I'm not sure for which URL that would be like that though. For the Facebook case, when we preview the post, I think we still won't be able to see the embed.

That would be great but in this case, it's a bit tricky because it's not enough listening for the WebView loading to finish. In fact, when it finishes, the content that is loaded is the one without styles but includes a JS script that transforms the content into tweet format in a second phase.

Ah, in that case I guess we might need to leave it as it is for now :(

fluiddot · 2021-08-11T11:42:39Z

I used https://www.kickstarter.com/projects/elanlee/exploding-kittens?ref=discovery&term=exploding%20kittens on a free .com site.

I tried it on a local build and works. However, now that you mention it I remember I had a similar issue some days ago, but I don't know what was the cause. Let's keep this in mind when we do the final testing of the block, in case we still can reproduce it.

I think “No Preview” UI is for cases when embed is successful, but the preview can only be shown when we preview the post itself. I'm not sure for which URL that would be like that though. For the Facebook case, when we preview the post, I think we still won't be able to see the embed.

Ok I see, in that case, it doesn't make sense to attach the Facebook case to that state. We would need to check the following code to get some clues about which URL could lead to the "No Preview" case:

gutenberg/packages/block-library/src/embed/edit.native.js

Lines 79 to 88 in 8ff6687

    
           // The external oEmbed provider does not exist. We got no type info and no html. 
        
           const badEmbedProvider = 
        
           	embedPreview?.html === false && 
        
           	embedPreview?.type === undefined; 
        
           // Some WordPress URLs that can't be embedded will cause the API to return 
        
           // a valid JSON response with no HTML and `code` set to 404, rather 
        
           // than generating a fallback response as other embeds do. 
        
           const wordpressCantEmbed = embedPreview?.code === '404'; 
        
           const validPreview = 
        
           	!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;

In the web version, I noticed that the Facebook error is displayed here when previewable is false:

gutenberg/packages/block-library/src/embed/embed-preview.js

Lines 129 to 137 in e10962c

    
           <p className="components-placeholder__error"> 
        
           	{ sprintf( 
        
           		/* translators: %s: host providing embed content e.g: www.youtube.com */ 
        
           		__( 
        
           			"Embedded content from %s can't be previewed in the editor." 
        
           		), 
        
           		parsedHostBaseUrl 
        
           	) } 
        
           </p>

So we could include something similar under the EmbedNoPreview component in the native version, as it's what it's rendered for this case:

gutenberg/packages/block-library/src/embed/embed-preview.native.js

Lines 119 to 124 in e10962c

    
           <EmbedNoPreview 
        
           	label={ label } 
        
           	icon={ icon } 
        
           	isSelected={ isSelected } 
        
           	onPress={ () => setIsCaptionSelected( false ) } 
        
           />

Ah, in that case I guess we might need to leave it as it is for now :(

👍

jd-alexander and others added 10 commits May 25, 2021 16:54

Created an EmbedPreview component to house the caption.

75ad74b

Disabled the placeholder mode temporarily until the linking is enabled.

5ab2a02

added the react-native-web-view package.

9977529

linked react-native-web-view to ios

717ee3f

integrated react-native-web-view with android

3bb45b7

initial integration of WebView into the embed-preview component.

e68c06b

added project configurations for react-native-webview android

4618896

Add sandbox component native version

7df5e30

Use webview to preview embed block

0d35c24

fluiddot added Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Block] Embed Affects the Embed Block labels Jul 14, 2021

fluiddot requested a review from ceyhun July 14, 2021 14:48

fluiddot self-assigned this Jul 14, 2021

fluiddot mentioned this pull request Jul 14, 2021

Embed block: Implement specific Embed preview wordpress-mobile/gutenberg-mobile#3725

Merged

2 tasks

fluiddot mentioned this pull request Jul 14, 2021

[Gutenberg] Embed block: Implement specific Embed preview wordpress-mobile/WordPress-iOS#16866

Merged

4 tasks

fluiddot added 8 commits July 20, 2021 12:50

Update aspect ratio calculation in sandbox component

09e1537

Add native styles to sandbox component

2f181a5

Open embed content in external browser

3ae12fa

Add comment to sandbox webview

6c07a91

Merge branch 'trunk' into rnmobile/embed-block-preview

210027c

# Conflicts: # package-lock.json # packages/block-library/src/embed/edit.native.js # packages/block-library/src/embed/embed-preview.native.js # packages/react-native-editor/package.json

Update react-native-webview package to wp-fork

9d1270c

Bump react-native-webview version

b9804d3

Bump react-native-webview version

9deb78a

fluiddot mentioned this pull request Jul 21, 2021

[Gutenberg] Embed block: Implement specific Embed preview wordpress-mobile/WordPress-Android#15051

Merged

3 tasks

fluiddot added 4 commits July 23, 2021 17:29

Use provider url as base url for embed webview

8e696c2

Add forceRender param to trySandbox

845371d

Handle case of setting empty URL after preview

df16106

Merge branch 'trunk' into rnmobile/embed-block-preview

b391829

# Conflicts: # packages/react-native-bridge/android/settings.gradle

fluiddot marked this pull request as ready for review July 30, 2021 15:25

fluiddot added 2 commits August 2, 2021 16:46

Bump react-native-webview package

178854e

Merge branch 'trunk' into rnmobile/embed-block-preview

c9612a1

ceyhun reviewed Aug 3, 2021

View reviewed changes

packages/block-library/src/embed/embed-preview.native.js Show resolved Hide resolved

ceyhun reviewed Aug 3, 2021

View reviewed changes

packages/components/src/sandbox/index.native.js Show resolved Hide resolved

ceyhun reviewed Aug 3, 2021

View reviewed changes

fluiddot added 3 commits August 4, 2021 15:34

Add comments to explain the postMessage function

e5251cb

Remove onBlur prop from embed preview

755f733

Add sandbox classnames

db69407

fluiddot mentioned this pull request Aug 5, 2021

[RNMobile][Embed block] Block settings #33654

Merged

7 tasks

fluiddot added 6 commits August 6, 2021 17:22

Use url instead of provider url as key in sandbox component

8750176

Stop passing scripts to sandbox component

66c03be

Add size style calculation to sandbox

d685ca5

Merge branch 'trunk' into rnmobile/embed-block-preview

9f3419e

Prevent calling updateContentHtml on very render

0ef1b50

Reset sandbox size when device orientation changes

66b53e9

fluiddot requested a review from ceyhun August 10, 2021 12:17

ceyhun approved these changes Aug 10, 2021

View reviewed changes

Update pods in react-native-editor demo project

a910139

fluiddot merged commit 8ff6687 into trunk Aug 11, 2021

fluiddot deleted the rnmobile/embed-block-preview branch August 11, 2021 10:09

github-actions bot added this to the Gutenberg 11.3 milestone Aug 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Embed block: Implement specific Embed preview #33426

[RNMobile] Embed block: Implement specific Embed preview #33426

fluiddot commented Jul 14, 2021 •

edited

Loading

github-actions bot commented Jul 14, 2021 •

edited

Loading

ceyhun Aug 3, 2021

fluiddot Aug 4, 2021 •

edited

Loading

fluiddot Aug 4, 2021

ceyhun Aug 5, 2021

fluiddot Aug 6, 2021

ceyhun Aug 9, 2021

ceyhun left a comment

fluiddot commented Aug 10, 2021

fluiddot commented Aug 10, 2021

ceyhun left a comment

fluiddot commented Aug 11, 2021 •

edited

Loading

fluiddot commented Aug 11, 2021

ceyhun commented Aug 11, 2021

fluiddot commented Aug 11, 2021

	hideOverlay() {
	// This is called onMouseUp on the overlay. We can't respond to the `isSelected` prop
	// changing, because that happens on mouse down, and the overlay immediately disappears,
	// and the mouse event can end up in the preview content. We can't use onClick on
	// the overlay to hide it either, because then the editor misses the mouseup event, and
	// thinks we're multi-selecting blocks.
	this.setState( { interactive: true } );
	}

	onFocus={ this.hideOverlay }
	/>
	{ ! interactive && (
	<div
	className="block-library-embed__interactive-overlay"
	onMouseUp={ this.hideOverlay }
	/>
	) }

	const sandboxClassnames = classnames(
	type,
	className,
	'wp-block-embed__wrapper'
	);

	<Placeholder
	icon={ <BlockIcon icon={ icon } showColors /> }
	label={ label }
	>
	<p className="components-placeholder__error">
	<a href={ url }>{ url }</a>
	</p>
	<p className="components-placeholder__error">
	{ sprintf(
	/* translators: %s: host providing embed content e.g: www.youtube.com */
	__(
	"Embedded content from %s can't be previewed in the editor."
	),
	parsedHostBaseUrl
	) }
	</p>
	</Placeholder>

	<FocusableIframe
	iframeRef={ ref }
	title={ title }
	className="components-sandbox"
	sandbox="allow-scripts allow-same-origin allow-presentation"
	onFocus={ onFocus }
	width={ Math.ceil( width ) }
	height={ Math.ceil( height ) }
	/>

	const observeAndResizeJS = `
	( function() {
	var observer;

	if ( ! window.MutationObserver \|\| ! document.body \|\| ! window.parent ) {
	return;
	}

	function sendResize() {
	var clientBoundingRect = document.body.getBoundingClientRect();

	window.parent.postMessage( {
	action: 'resize',
	width: clientBoundingRect.width,
	height: clientBoundingRect.height,
	}, '*' );
	}

	observer = new MutationObserver( sendResize );
	observer.observe( document.body, {
	attributes: true,
	attributeOldValue: false,
	characterData: true,
	characterDataOldValue: false,
	childList: true,
	subtree: true
	} );

	window.addEventListener( 'load', sendResize, true );

	// Hack: Remove viewport unit styles, as these are relative
	// the iframe root and interfere with our mechanism for
	// determining the unconstrained page bounds.
	function removeViewportStyles( ruleOrNode ) {
	if( ruleOrNode.style ) {
	[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {
	if ( /^\\d+(vmin\|vmax\|vh\|vw)$/.test( ruleOrNode.style[ style ] ) ) {
	ruleOrNode.style[ style ] = '';
	}
	} );
	}
	}

	Array.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );
	Array.prototype.forEach.call( document.styleSheets, function( stylesheet ) {
	Array.prototype.forEach.call( stylesheet.cssRules \|\| stylesheet.rules, removeViewportStyles );
	} );

	document.body.style.position = 'absolute';
	document.body.style.width = '100%';
	document.body.setAttribute( 'data-resizable-iframe-connected', '' );

	sendResize();

	// Resize events can change the width of elements with 100% width, but we don't
	// get an DOM mutations for that, so do the resize when the window is resized, too.
	window.addEventListener( 'resize', sendResize, true );
	} )();`;

	const style = `
	body {
	margin: 0;
	}
	html,
	body,
	body > div,
	body > div iframe {
	width: 100%;
	}
	html.wp-has-aspect-ratio,
	body.wp-has-aspect-ratio,
	body.wp-has-aspect-ratio > div,
	body.wp-has-aspect-ratio > div iframe {
	height: 100%;
	overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */
	}
	body > div > * {
	margin-top: 0 !important; /* Has to have !important to override inline styles. */
	margin-bottom: 0 !important;
	}
	`;

	function isFrameAccessible() {
	try {
	return !! ref.current.contentDocument.body;
	} catch ( e ) {
	return false;
	}
	}

	const { contentDocument, ownerDocument } = ref.current;
	const { body } = contentDocument;

	// writing the document like this makes it act in the same way as if it was
	// loaded over the network, so DOM creation and mutation, script execution, etc.
	// all work as expected
	contentDocument.open();
	contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
	contentDocument.close();

	if (
	! forceRerender &&
	null !== body.getAttribute( 'data-resizable-iframe-connected' )
	) {
	return;
	}

	const htmlDoc = (
	<html
	lang={ ownerDocument.documentElement.lang }
	className={ type }
	>
	<head>
	<title>{ title }</title>
	<style dangerouslySetInnerHTML={ { __html: style } } />
	{ styles.map( ( rules, i ) => (
	<style
	key={ i }
	dangerouslySetInnerHTML={ { __html: rules } }
	/>
	) ) }
	</head>
	<body
	data-resizable-iframe-connected="data-resizable-iframe-connected"
	className={ type }
	>
	<div dangerouslySetInnerHTML={ { __html: html } } />
	<script
	type="text/javascript"
	dangerouslySetInnerHTML={ {
	__html: observeAndResizeJS,
	} }
	/>
	{ scripts.map( ( src ) => (
	<script key={ src } src={ src } />
	) ) }
	</body>
	</html>
	);

	<meta
	name="viewport"
	content="width=device-width, initial-scale=1"
	></meta>

	function checkMessageForResize( event ) {
	const iframe = ref.current;

	// Verify that the mounted element is the source of the message
	if ( ! iframe \|\| iframe.contentWindow !== event.source ) {
	return;
	}

	// Attempt to parse the message data as JSON if passed as string
	let data = event.data \|\| {};

	if ( 'string' === typeof data ) {
	try {
	data = JSON.parse( data );
	} catch ( e ) {}
	}

	// Update the state only if the message is formatted as we expect,
	// i.e. as an object with a 'resize' action.
	if ( 'resize' !== data.action ) {
	return;
	}

	setWidth( data.width );
	setHeight( data.height );
	}

	// 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
	ref.current.addEventListener( 'load', tryNoForceSandbox, false );

	style={ {
	aspectRatio: Math.ceil( width ) / Math.ceil( height ) \|\| 1,
	} }

[RNMobile] Embed block: Implement specific Embed preview #33426

[RNMobile] Embed block: Implement specific Embed preview #33426

Conversation

fluiddot commented Jul 14, 2021 • edited Loading

Description

Embed preview component

Interactive flag and overlay

Sandbox classnames

WpEmbedPreview component

Not previewable case

Sandbox component

FocusableIframe component

Resize JS observer

Iframe style

isFrameAccessible function

trySandbox function

contentDocument ref

ownerDocument ref - Language value

data-resizable-iframe-connected attribute

HTML Doc

Resize message handling

Load event listener

Message event listener

IFrame extra props

How has this been tested?

Test all providers

Interaction is disabled

Inline preview disabled in production mode

Performance

Opening a post/page

Scrolling content

Screenshots

Types of changes

Checklist:

github-actions bot commented Jul 14, 2021 • edited Loading

ceyhun Aug 3, 2021

Choose a reason for hiding this comment

fluiddot Aug 4, 2021 • edited Loading

Choose a reason for hiding this comment

fluiddot Aug 4, 2021

Choose a reason for hiding this comment

ceyhun Aug 5, 2021

Choose a reason for hiding this comment

fluiddot Aug 6, 2021

Choose a reason for hiding this comment

ceyhun Aug 9, 2021

Choose a reason for hiding this comment

ceyhun left a comment

Choose a reason for hiding this comment

fluiddot commented Aug 10, 2021

fluiddot commented Aug 10, 2021

Preview's height is bigger than the content

Preview's height is smaller than the content and it gets cut off

Content's width doesn't fit the block

ceyhun left a comment

Choose a reason for hiding this comment

fluiddot commented Aug 11, 2021 • edited Loading

fluiddot commented Aug 11, 2021

ceyhun commented Aug 11, 2021

fluiddot commented Aug 11, 2021

fluiddot commented Jul 14, 2021 •

edited

Loading

`WpEmbedPreview` component

`FocusableIframe` component

`isFrameAccessible` function

`trySandbox` function

`contentDocument` ref

`ownerDocument` ref - Language value

`data-resizable-iframe-connected` attribute

github-actions bot commented Jul 14, 2021 •

edited

Loading

fluiddot Aug 4, 2021 •

edited

Loading

fluiddot commented Aug 11, 2021 •

edited

Loading