add block preview in nested styles panels (#46401)

WordPress · Dec 19, 2022 · a556b69 · a556b69 · github-actions · Dec 19, 2022
1 parent f6cccc2
commit a556b69
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 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
@@ -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
@@ -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
@@ -8,13 +8,15 @@ 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 );
 
 	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
@@ -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
@@ -8,13 +8,15 @@ 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 );
 
 	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
@@ -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 }>