Add support for shortcode embeds that enqueue scripts (#9734)

WordPress · Sep 18, 2018 · 94be4e3 · 94be4e3
1 parent bee8b55
commit 94be4e3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/lib/rest-api.php b/lib/rest-api.php
@@ -87,9 +87,17 @@ function gutenberg_filter_oembed_result( $response, $handler, $request ) {
 				global $wp_embed;
 				$html = $wp_embed->shortcode( array(), $_GET['url'] );
 				if ( $html ) {
+					global $wp_scripts;
+					// Check if any scripts were enqueued by the shortcode, and
+					// include them in the response.
+					$enqueued_scripts = array();
+					foreach ( $wp_scripts->queue as $script ) {
+						$enqueued_scripts[] = $wp_scripts->registered[ $script ]->src;
+					}
 					return array(
 						'provider_name' => __( 'Embed Handler', 'gutenberg' ),
 						'html'          => $html,
+						'scripts'       => $enqueued_scripts,
 					);
 				}
 			}

diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js
@@ -269,6 +269,7 @@ export function getEmbedEdit( title, icon ) {
 			}
 
 			const html = 'photo' === type ? this.getPhotoHtml( preview ) : preview.html;
+			const { scripts } = preview;
 			const parsedUrl = parse( url );
 			const cannotPreview = includes( HOSTS_NO_PREVIEWS, parsedUrl.host.replace( /^www\./, '' ) );
 			// translators: %s: host providing embed content e.g: www.youtube.com
@@ -283,6 +284,7 @@ export function getEmbedEdit( title, icon ) {
 				<div className="wp-block-embed__wrapper">
 					<SandBox
 						html={ html }
+						scripts={ scripts }
 						title={ iframeTitle }
 						type={ sandboxClassnames }
 					/>

diff --git a/packages/components/src/sandbox/index.js b/packages/components/src/sandbox/index.js
@@ -162,6 +162,9 @@ class Sandbox extends Component {
 				<head>
 					<title>{ this.props.title }</title>
 					<style dangerouslySetInnerHTML={ { __html: style } } />
+					{ ( this.props.scripts && this.props.scripts.map(
+						( src ) => <script key={ src } src={ src } />
+					) ) }
 				</head>
 				<body data-resizable-iframe-connected="data-resizable-iframe-connected" className={ this.props.type }>
 					<div dangerouslySetInnerHTML={ { __html: this.props.html } } />