From 1ec619078bf0d2f2f7c39ebb94c90ff05ee23ac2 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 24 Jan 2022 07:48:22 +0100
Subject: [PATCH 1/9] Apply a 99vh max-height to the thumbnail.

---
 packages/block-editor/src/components/block-preview/auto.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 27c147dcd0e72..bdbfe7005c74b 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -69,6 +69,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						position: 'absolute',
 						width: viewportWidth,
 						height: contentHeight,
+						maxHeight: '99vh',
 						pointerEvents: 'none',
 					} }
 				>

From a99db2177b775a300f25c45fe543b1fb51e91247 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 24 Jan 2022 08:22:22 +0100
Subject: [PATCH 2/9] Polish

---
 packages/block-editor/src/components/block-preview/auto.js | 2 +-
 packages/block-editor/src/components/iframe/index.js       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index bdbfe7005c74b..99b02fed90efa 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -69,7 +69,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						position: 'absolute',
 						width: viewportWidth,
 						height: contentHeight,
-						maxHeight: '99vh',
+						maxHeight: '100vh',
 						pointerEvents: 'none',
 					} }
 				>
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index b4e1e44f6568b..4b7ba7246f514 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -235,7 +235,7 @@ function Iframe(
 
 	head = (
 		<>
-			<style>{ 'body{margin:0}' }</style>
+			<style>{ 'body{margin:0;overflow: hidden}' }</style>
 			{ styles.map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();

From 94ff1980a9b82c35586fef5e2b1aa713407a56fe Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 24 Jan 2022 09:14:45 +0100
Subject: [PATCH 3/9] Apply pixel based max-height.

---
 packages/block-editor/src/components/block-preview/auto.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 99b02fed90efa..92d1e73c48bbd 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -69,8 +69,13 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						position: 'absolute',
 						width: viewportWidth,
 						height: contentHeight,
-						maxHeight: '100vh',
 						pointerEvents: 'none',
+						// This is a catch-all max-height for patterns.
+						// VH units are as tall as your current viewport, and when used inside a scaled iframe
+						// the math to convert an inherited VH unit appears to cause it to keep growing endlessly.
+						// By applying a max-height, at least it will stop growing.
+						// A longer term fix would be to disallow the thumbnail from growing after initial load.
+						maxHeight: '1800px',
 					} }
 				>
 					{ contentResizeListener }

From 46950b9f44daf028895f80eddd7252684db990d7 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 24 Jan 2022 12:46:05 +0400
Subject: [PATCH 4/9] Don't apply overflow auto to all iframes

---
 packages/block-editor/src/components/block-preview/auto.js | 5 +++++
 packages/block-editor/src/components/iframe/index.js       | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 92d1e73c48bbd..3f5fdf1dcf3f9 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -33,6 +33,11 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		};
 	}, [] );
 
+	// Avoid scrollbars for pattern previews.
+	if ( styles ) {
+		styles.push( { css: 'body{overflow:hidden;}' } );
+	}
+
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 4b7ba7246f514..8d7f0e2673d11 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -235,7 +235,7 @@ function Iframe(
 
 	head = (
 		<>
-			<style>{ 'body{margin:0;overflow: hidden}' }</style>
+			<style>{ 'body{margin:0;}' }</style>
 			{ styles.map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();

From e909ec9eb88b09fc308c7f12295c0e0c7acf66fa Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 24 Jan 2022 13:11:46 +0400
Subject: [PATCH 5/9] Memoize editor styles

---
 .../src/components/block-preview/auto.js         | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 3f5fdf1dcf3f9..2a4b7a3a927e2 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -4,6 +4,7 @@
 import { Disabled } from '@wordpress/components';
 import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -34,9 +35,16 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 	}, [] );
 
 	// Avoid scrollbars for pattern previews.
-	if ( styles ) {
-		styles.push( { css: 'body{overflow:hidden;}' } );
-	}
+	const editorStyles = useMemo( () => {
+		if ( styles ) {
+			return [
+				...styles,
+				{ css: 'body{overflow:hidden;}', __unstableType: 'presets' },
+			];
+		}
+
+		return styles;
+	}, [ styles ] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
@@ -54,7 +62,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 				} }
 			>
 				<Iframe
-					head={ <EditorStyles styles={ styles } /> }
+					head={ <EditorStyles styles={ editorStyles } /> }
 					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {

From 929e5728e9f592141b8718184751762a2f52a567 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 24 Jan 2022 13:53:08 +0400
Subject: [PATCH 6/9] Remove no need for iframe changes

---
 packages/block-editor/src/components/iframe/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 8d7f0e2673d11..b4e1e44f6568b 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -235,7 +235,7 @@ function Iframe(
 
 	head = (
 		<>
-			<style>{ 'body{margin:0;}' }</style>
+			<style>{ 'body{margin:0}' }</style>
 			{ styles.map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();

From 86d9384a4758cfdb3a39e2f9ce168c3eff0b9674 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 24 Jan 2022 14:47:42 +0400
Subject: [PATCH 7/9] Unset height

---
 packages/block-editor/src/components/block-preview/auto.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 2a4b7a3a927e2..46dcb40303b7c 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -39,7 +39,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		if ( styles ) {
 			return [
 				...styles,
-				{ css: 'body{overflow:hidden;}', __unstableType: 'presets' },
+				{
+					css: 'body{height:unset;overflow:hidden;}',
+					__unstableType: 'presets',
+				},
 			];
 		}
 

From 5c12d18410854d418a6c2e486b94fdd733c05d62 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 24 Jan 2022 15:30:06 +0400
Subject: [PATCH 8/9] Apply max-height to container

---
 .../src/components/block-preview/auto.js          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 46dcb40303b7c..309c5d738564c 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -17,6 +17,8 @@ import { store } from '../../store';
 // This is used to avoid rendering the block list if the sizes change.
 let MemoizedBlockList;
 
+const MAX_HEIGHT = 1800;
+
 function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 	const [
 		containerResizeListener,
@@ -40,7 +42,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 			return [
 				...styles,
 				{
-					css: 'body{height:unset;overflow:hidden;}',
+					css: 'body{height:auto;overflow:hidden;}',
 					__unstableType: 'presets',
 				},
 			];
@@ -62,6 +64,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 				style={ {
 					transform: `scale(${ scale })`,
 					height: contentHeight * scale,
+					maxHeight:
+						contentHeight > MAX_HEIGHT
+							? MAX_HEIGHT * scale
+							: undefined,
 				} }
 			>
 				<Iframe
@@ -87,11 +93,8 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						height: contentHeight,
 						pointerEvents: 'none',
 						// This is a catch-all max-height for patterns.
-						// VH units are as tall as your current viewport, and when used inside a scaled iframe
-						// the math to convert an inherited VH unit appears to cause it to keep growing endlessly.
-						// By applying a max-height, at least it will stop growing.
-						// A longer term fix would be to disallow the thumbnail from growing after initial load.
-						maxHeight: '1800px',
+						// See: https://github.com/WordPress/gutenberg/pull/38175.
+						maxHeight: MAX_HEIGHT,
 					} }
 				>
 					{ contentResizeListener }

From 0a62238bd28f69309f33d52b13a41fd1ad9f813c Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 24 Jan 2022 15:44:07 +0400
Subject: [PATCH 9/9] Update max-height

---
 packages/block-editor/src/components/block-preview/auto.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 309c5d738564c..db699e36d1d20 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -17,7 +17,7 @@ import { store } from '../../store';
 // This is used to avoid rendering the block list if the sizes change.
 let MemoizedBlockList;
 
-const MAX_HEIGHT = 1800;
+const MAX_HEIGHT = 2000;
 
 function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 	const [