Fix/iframed previews

includes/layouts/breaking-news.json

@@ -1,5 +1,5 @@
 {
   "__file": "wp_block",
   "title": "Breaking News",
-  "content": "__LOGO_OR_SITENAME__\n\n<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#f0f0f0\"}}} -->\n\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:#f0f0f0\"><div class=\"wp-block-group__inner-container\"><!-- wp:newspack-newsletters\/posts-inserter {\"postsToShow\":1,\"excerptLength\":35,\"innerBlocksToInsert\":[],\"featuredImageAlignment\":\"top\"} \/--><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:group {\"align\":\"full\"} -->\n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":3} -->\n\n<h3>Support our newsroom<\/h3>\n\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n\n<p>Make sure you have a call-to-action to support your work. This can be a few sentences like this, reminding readers of the value of your newsroom, or it can be an image. Either way, make sure you give a clear CTA and a unique link to track support back to this email.<\/p>\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:buttons -->\n\n<div class=\"wp-block-buttons\"><!-- wp:button -->\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Support us<\/a><\/div>\n\n<!-- \/wp:button --><\/div>\n\n<!-- \/wp:buttons --><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:social-links {\"align\":\"center\",\"className\":\"aligncenter\"} -->\n\n<ul class=\"wp-block-social-links aligncenter\"><!-- wp:social-link {\"url\":\"#\",\"service\":\"facebook\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"twitter\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"instagram\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"youtube\"} \/--><\/ul>\n\n<!-- \/wp:social-links -->"
+  "content": "__LOGO_OR_SITENAME__\n\n<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#f0f0f0\"}}} -->\n\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:#f0f0f0\"><div class=\"wp-block-group__inner-container\"><!-- wp:newspack-newsletters\/posts-inserter {\"postsToShow\":1,\"excerptLength\":35,\"innerBlocksToInsert\":[],\"featuredImageAlignment\":\"top\"} \/--><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:group {\"align\":\"full\"} -->\n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":3} -->\n\n<h3>Support our newsroom<\/h3>\n\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n\n<p>Make sure you have a call-to-action to support your work. This can be a few sentences like this, reminding readers of the value of your newsroom, or it can be an image. Either way, make sure you give a clear CTA and a unique link to track support back to this email.<\/p>\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\",\"className\":\"aligncenter\"} -->\n\n<div class=\"wp-block-buttons\"><!-- wp:button -->\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Support us<\/a><\/div>\n\n<!-- \/wp:button --><\/div>\n\n<!-- \/wp:buttons --><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:social-links {\"align\":\"center\",\"className\":\"aligncenter\"} -->\n\n<ul class=\"wp-block-social-links aligncenter\"><!-- wp:social-link {\"url\":\"#\",\"service\":\"facebook\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"twitter\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"instagram\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"youtube\"} \/--><\/ul>\n\n<!-- \/wp:social-links -->"
 }

src/components/init-modal/style.scss

@@ -252,7 +252,8 @@
 					border-color: var( --wp-admin-theme-color );
 				}
 
-				.block-editor-block-preview__container {
+				.block-editor-block-preview__container,
+				.block-editor-block-preview__content-iframe {
 					cursor: pointer;
 					position: absolute;
 					top: 0;
@@ -341,7 +342,8 @@
 }
 
 // Posts Inserter - Preview
-.block-editor-block-preview__container {
+.block-editor-block-preview__container,
+.block-editor-block-preview__content-iframe {
 	background: transparent;
 
 	.wp-block[data-type='newspack-newsletters/posts-inserter'] {
@@ -365,6 +367,7 @@
 		.block-editor-block-preview__container {
 			height: 100% !important;
 			max-height: 100%;
+			overflow: hidden;
 
 			.newspack-newsletters-modal__layouts & {
 				position: relative;

src/components/newsletter-preview/style.scss

@@ -4,3 +4,9 @@
 	position: absolute;
 	width: 100%;
 }
+
+.block-editor-block-preview__content-iframe
+	.editor-styles-wrapper
+	.block-editor-block-list__layout.is-root-container {
+	overflow: hidden;
+}

src/editor/blocks/posts-inserter/index.js

@@ -17,15 +17,9 @@ import {
 	FontSizePicker,
 	ColorPicker,
 	PanelBody,
-	Spinner,
 	Toolbar,
 } from '@wordpress/components';
-import {
-	InnerBlocks,
-	BlockPreview,
-	InspectorControls,
-	BlockControls,
-} from '@wordpress/block-editor';
+import { InnerBlocks, InspectorControls, BlockControls } from '@wordpress/block-editor';
 import { Fragment, useEffect, useMemo, useState } from '@wordpress/element';
 
 /**
@@ -38,6 +32,7 @@ import Icon from './icon';
 import { getTemplateBlocks, convertBlockSerializationFormat } from './utils';
 import QueryControlsSettings from './query-controls';
 import { POSTS_INSERTER_BLOCK_NAME, POSTS_INSERTER_STORE_NAME } from './consts';
+import PostsPreview from './posts-preview';
 
 const PostsInserterBlock = ( {
 	setAttributes,
@@ -235,13 +230,7 @@ const PostsInserterBlock = ( {
 					{ Icon }
 					<span>{ __( 'Posts Inserter', 'newspack-newsletters' ) }</span>
 				</div>
-				<div className="newspack-posts-inserter__preview">
-					{ isReady ? (
-						<BlockPreview blocks={ templateBlocks } viewportWidth={ 558 } />
-					) : (
-						<Spinner />
-					) }
-				</div>
+				<PostsPreview isReady={ isReady } blocks={ templateBlocks } viewportWidth={ 600 } />
 				<div className="newspack-posts-inserter__footer">
 					<Button isPrimary onClick={ () => setAttributes( { areBlocksInserted: true } ) }>
 						{ __( 'Insert posts', 'newspack-newsletters' ) }

src/editor/blocks/posts-inserter/posts-preview.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies.
+ */
+import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { BlockPreview } from '@wordpress/block-editor';
+import { Spinner } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Posts Preview component.
+ */
+const PostsPreview = ( { isReady, blocks, viewportWidth }, ref ) => {
+	// Iframe styles are not properly applied when nesting iframed editors.
+	// This fix ensures the iframe is properly styled.
+	const fixIframe = useRefEffect( node => {
+		const updateIframeStyle = () => {
+			const iframe = node.querySelector( 'iframe[title="Editor canvas"]' );
+			if ( iframe ) {
+				iframe.style.border = 0;
+				observer.disconnect();
+			}
+		};
+		const observer = new MutationObserver( updateIframeStyle );
+		observer.observe( node, { childList: true } );
+		// Give up after 3s if the iframe is not loaded.
+		const disconnectTimeout = setTimeout( observer.disconnect, 3000 );
+		return () => {
+			observer.disconnect();
+			clearTimeout( disconnectTimeout );
+		};
+	}, [] );
+	return (
+		<div className="newspack-posts-inserter__preview" ref={ useMergeRefs( [ ref, fixIframe ] ) }>
+			{ isReady ? <BlockPreview blocks={ blocks } viewportWidth={ viewportWidth } /> : <Spinner /> }
+		</div>
+	);
+};
+
+export default forwardRef( PostsPreview );

src/editor/blocks/posts-inserter/style.scss

@@ -38,7 +38,7 @@
 		.block-editor-block-preview {
 			&__container {
 				max-height: 400px;
-				overflow: scroll;
+				overflow-y: scroll;
 			}
 
 			&__content {

src/newsletter-editor/layout/style.scss

@@ -32,7 +32,8 @@
 			z-index: 1;
 		}
 
-		.block-editor-block-preview__container {
+		.block-editor-block-preview__container,
+		.block-editor-block-preview__content-iframe {
 			position: absolute;
 			top: 0;