fix inline preview infinite render (#47697)

WordPress · Feb 7, 2023 · af82a70 · af82a70
1 parent 4acaa40
commit af82a70
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -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
@@ -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;