From fffc19365c047d28ef60261ca661da2ffedebfd0 Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Thu, 2 Feb 2023 20:08:39 +0530
Subject: [PATCH] fix inline preview infinite render

---
 .../global-styles/block-preview-panel.js      | 20 ++++++++-----------
 .../src/components/global-styles/style.scss   |  4 ----
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
index f41181a23d2958..9ff5a47f77f088 100644
--- a/packages/edit-site/src/components/global-styles/block-preview-panel.js
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -3,14 +3,9 @@
  */
 import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
-import { useResizeObserver } from '@wordpress/compose';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 const BlockPreviewPanel = ( { name, variation = '' } ) => {
-	const [
-		containerResizeListener,
-		{ width: containerWidth, height: containerHeight },
-	] = useResizeObserver();
 	const blockExample = getBlockType( name )?.example;
 	const blockExampleWithVariation = {
 		...blockExample,
@@ -25,23 +20,24 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 			name,
 			variation ? blockExampleWithVariation : blockExample
 		);
-	const viewportWidth = blockExample?.viewportWidth || containerWidth;
-	const minHeight = containerHeight;
+	const viewportWidth = blockExample?.viewportWidth || null;
+	const previewHeight = '150px';
 
 	return ! blockExample ? null : (
 		<Spacer marginX={ 4 } marginBottom={ 4 }>
-			<div className="edit-site-global-styles__block-preview-panel">
-				{ containerResizeListener }
-
+			<div
+				className="edit-site-global-styles__block-preview-panel"
+				style={ { maxHeight: previewHeight, boxSizing: 'initial' } }
+			>
 				<BlockPreview
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
-					minHeight={ minHeight }
+					minHeight={ previewHeight }
 					additionalStyles={ [
 						{
 							css: `
 								body{
-									min-height:${ minHeight }px;
+									min-height:${ previewHeight };
 									display:flex;align-items:center;justify-content:center;
 								}
 							`,
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index fa2fb6f5125c72..026e7fa76b31cc 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -1,6 +1,3 @@
-// Variables
-$block-preview-height: 150px;
-
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;
@@ -130,7 +127,6 @@ $block-preview-height: 150px;
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
-	height: $block-preview-height + 2 * $border-width;
 	overflow: auto;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;