From c6aa1636b25c0bb20c25449c2dd0d82497718a41 Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Thu, 8 Dec 2022 16:09:21 +0530
Subject: [PATCH] add block preview in nested styles panels

---
 .../global-styles/block-preview-panel.js      | 23 +++++++++++--------
 .../components/global-styles/screen-block.js  |  5 +---
 .../components/global-styles/screen-border.js |  2 ++
 .../components/global-styles/screen-colors.js |  3 +++
 .../components/global-styles/screen-layout.js |  2 ++
 .../global-styles/screen-typography.js        |  3 +++
 6 files changed, 25 insertions(+), 13 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 296a39a5d065d1..2d73c0495cdfc4 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
@@ -4,25 +4,30 @@
 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 } ) => {
-	const blockExample = getBlockType( name )?.example;
 	const [
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
+	const blockExample = getBlockType( name )?.example;
+	const blocks = blockExample && getBlockFromExample( name, blockExample );
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
+	const minHeight = containerHeight;
 
 	return ! blockExample ? null : (
-		<div className="edit-site-global-styles__block-preview-panel">
-			{ containerResizeListener }
+		<Spacer marginX={ 4 } marginBottom={ 4 }>
+			<div className="edit-site-global-styles__block-preview-panel">
+				{ containerResizeListener }
 
-			<BlockPreview
-				viewportWidth={ viewportWidth }
-				__experimentalMinHeight={ containerHeight }
-				blocks={ getBlockFromExample( name, blockExample ) }
-			/>
-		</div>
+				<BlockPreview
+					viewportWidth={ viewportWidth }
+					__experimentalMinHeight={ minHeight }
+					blocks={ blocks }
+				/>
+			</div>
+		</Spacer>
 	);
 };
 
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 57860a8623c6ae..9e9d585e88d31d 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,9 +16,7 @@ function ScreenBlock( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
-			<Spacer paddingX={ 4 }>
-				<BlockPreviewPanel name={ name } />
-			</Spacer>
+			<BlockPreviewPanel name={ name } />
 			<ContextMenu
 				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
 				name={ name }
diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
index 04a92653f4e102..d2d3707271dede 100644
--- a/packages/edit-site/src/components/global-styles/screen-border.js
+++ b/packages/edit-site/src/components/global-styles/screen-border.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenBorder( { name } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
@@ -15,6 +16,7 @@ function ScreenBorder( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
+			<BlockPreviewPanel name={ name } />
 			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index c713cb5ee5818f..ec5cb308b20271 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -20,6 +20,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
+import BlockPreviewPanel from './block-preview-panel';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -186,6 +187,8 @@ function ScreenColors( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
 					<Palette name={ name } />
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index 3fbc911f5fde79..2909cc34273b21 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenLayout( { name } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
@@ -15,6 +16,7 @@ function ScreenLayout( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
+			<BlockPreviewPanel name={ name } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 3f7a5eb3eb8670..49282b73318127 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -17,6 +17,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -87,6 +88,8 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
 					<VStack spacing={ 3 }>