Use iframes in legacy widget preview.

WordPress · Mar 26, 2019 · 1fbde54 · 1fbde54
1 parent 8a20ad3
commit 1fbde54
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 8 deletions.
diff --git a/lib/widget-preview-template.php b/lib/widget-preview-template.php
@@ -0,0 +1,36 @@
+<?php
+/**
+ * Start: Include for phase 2
+ * Template used to render widget previews.
+ *
+ * @package gutenberg
+ * @since 5.4.0
+ */
+
+if ( ! function_exists( 'wp_head' ) ) {
+	exit;
+}
+?>
+<!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="profile" href="https://gmpg.org/xfn/11" />
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<div id="page" class="site">
+	<div id="content" class="site-content">
+			<?php
+				$registry = WP_Block_Type_Registry::get_instance();
+				$block    = $registry->get_registered( 'core/legacy-widget' );
+				echo $block->render( $_GET['widgetPreview'] );
+			?>
+	</div><!-- #content -->
+</div><!-- #page -->
+
+<?php wp_footer(); ?>
+</body>
+</html>
diff --git a/lib/widgets.php b/lib/widgets.php
@@ -126,3 +126,23 @@ function gutenberg_legacy_widget_settings( $settings ) {
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_legacy_widget_settings' );
+
+/**
+ * Overwrites the template WordPress would use to render the currrent request,
+ * to a widget preview template if widgetPreview parameter was passed in the url.
+ *
+ * @param string $template Original template.
+ *
+ * @return string The original or the path of widget-preview-template.php file.
+ */
+function change_post_template_to_widget_preview( $template ) {
+	if (
+		isset( $_GET['widgetPreview'] ) &&
+		current_user_can( 'edit_theme_options' )
+	) {
+		add_filter( 'show_admin_bar', '__return_false' );
+		return dirname( __FILE__ ) . '/widget-preview-template.php';
+	}
+	return $template;
+}
+add_filter( 'template_include', 'change_post_template_to_widget_preview' );
diff --git a/packages/block-library/src/legacy-widget/WidgetPreview.js b/packages/block-library/src/legacy-widget/WidgetPreview.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { Disabled, FocusableIframe } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
+function WidgetPreview( { postLink, attributes, ...props } ) {
+	const DEFAULT_HEIGHT = 300;
+	const HEIGTH_MARGIN = 20;
+	const [ height, setHeight ] = useState( DEFAULT_HEIGHT );
+	const iframeUrl = addQueryArgs( postLink, {
+		widgetPreview: attributes,
+	} );
+	return (
+		<Disabled>
+			<FocusableIframe
+				onLoad={ ( event ) => {
+					const iframeContentHeight = get(
+						event,
+						[ 'currentTarget', 'contentDocument', 'body', 'scrollHeight' ]
+					);
+					if ( iframeContentHeight !== height ) {
+						setHeight( iframeContentHeight );
+					}
+				} }
+				src={ iframeUrl }
+				height={ height + HEIGTH_MARGIN }
+				{ ...props }
+			/>
+		</Disabled>
+	);
+}
+
+export default withSelect( ( select ) => {
+	const { getCurrentPostAttribute } = select( 'core/editor' );
+	return {
+		postLink: getCurrentPostAttribute( 'link' ),
+	};
+} )( WidgetPreview );
+
diff --git a/packages/block-library/src/legacy-widget/edit.js b/packages/block-library/src/legacy-widget/edit.js
@@ -17,18 +17,17 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import {
 	BlockControls,
 	BlockIcon,
 	InspectorControls,
-	ServerSideRender,
 } from '@wordpress/editor';
 
+/**
+ * Internal dependencies
+ */
 import WidgetEditHandler from './WidgetEditHandler';
+import WidgetPreview from './WidgetPreview';
 
 class LegacyWidgetEdit extends Component {
 	constructor() {
@@ -173,9 +172,8 @@ class LegacyWidgetEdit extends Component {
 	renderWidgetPreview() {
 		const { attributes } = this.props;
 		return (
-			<ServerSideRender
+			<WidgetPreview
 				className="wp-block-legacy-widget__preview"
-				block="core/legacy-widget"
 				attributes={ attributes }
 			/>
 		);

diff --git a/packages/block-library/src/legacy-widget/index.php b/packages/block-library/src/legacy-widget/index.php
@@ -21,7 +21,8 @@ function render_block_legacy_widget( $attributes ) {
 	$identifier = $attributes['identifier'];
 	if (
 		isset( $attributes['isCallbackWidget'] ) &&
-		$attributes['isCallbackWidget']
+		$attributes['isCallbackWidget'] &&
+		'false' !== $attributes['isCallbackWidget']
 	) {
 		global $wp_registered_widgets;
 		if ( ! isset( $wp_registered_widgets[ $identifier ] ) ) {