diff --git a/lib/widget-preview-template.php b/lib/widget-preview-template.php new file mode 100644 index 00000000000000..781f583be70d4e --- /dev/null +++ b/lib/widget-preview-template.php @@ -0,0 +1,36 @@ + + +> + + + + + + + +> +
+
+ get_registered( 'core/legacy-widget' ); + echo $block->render( $_GET['widgetPreview'] ); + ?> +
+
+ + + + diff --git a/lib/widgets.php b/lib/widgets.php index c08d31de9f3f11..ad45686330ccbc 100644 --- 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 new file mode 100644 index 00000000000000..21ce00585cf27a --- /dev/null +++ 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 ( + + { + const iframeContentHeight = get( + event, + [ 'currentTarget', 'contentDocument', 'body', 'scrollHeight' ] + ); + if ( iframeContentHeight !== height ) { + setHeight( iframeContentHeight ); + } + } } + src={ iframeUrl } + height={ height + HEIGTH_MARGIN } + { ...props } + /> + + ); +} + +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 index e2f2a4c4cf2405..9243796f125736 100644 --- 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 ( - ); diff --git a/packages/block-library/src/legacy-widget/index.php b/packages/block-library/src/legacy-widget/index.php index b812f8e3c710ff..1662a2a6d6084d 100644 --- 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 ] ) ) {