Apply same styles to block previews on inserter and Global Styles

packages/block-editor/src/components/inserter/preview-panel.js

@@ -30,6 +30,15 @@ function InserterPreviewPanel( { item } ) {
 			innerBlocks: example.innerBlocks,
 		} );
 	}, [ name, example, initialAttributes ] );
+	// Same as height of BlockPreviewPanel.
+	const previewHeight = 144;
+	const sidebarWidth = 280;
+	const viewportWidth = example?.viewportWidth ?? 500;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
 
 	return (
 		<div className="block-editor-inserter__preview-container">
@@ -38,10 +47,24 @@ function InserterPreviewPanel( { item } ) {
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
 							blocks={ blocks }
-							viewportWidth={ example?.viewportWidth ?? 500 }
-							additionalStyles={ [
-								{ css: 'body { padding: 24px; }' },
-							] }
+							viewportWidth={ viewportWidth }
+							minHeight={ previewHeight }
+							additionalStyles={
+								//We want this CSS to be in sync with the one in BlockPreviewPanel.
+								[
+									{
+										css: `
+										body { 
+											padding: 24px;
+											min-height:${ Math.round( minHeight ) }px;
+											display:flex;
+											align-items:center;
+										}
+										.is-root-container { width: 100%; }
+									`,
+									},
+								]
+							}
 						/>
 					</div>
 				) : (

packages/block-editor/src/components/inserter/style.scss

@@ -326,7 +326,6 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__preview-content {
-	min-height: $grid-unit-60 * 3;
 	background: $gray-100;
 	display: grid;
 	flex-grow: 1;

packages/block-library/src/buttons/index.js

@@ -21,6 +21,12 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			layout: {
+				type: 'flex',
+				justifyContent: 'center',
+			},
+		},
 		innerBlocks: [
 			{
 				name: 'core/button',

packages/block-library/src/heading/index.js

@@ -24,6 +24,7 @@ export const settings = {
 		attributes: {
 			content: __( 'Code is Poetry' ),
 			level: 2,
+			textAlign: 'center',
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {

packages/block-library/src/site-tagline/block.json

@@ -16,7 +16,12 @@
 			"default": 0
 		}
 	},
-	"example": {},
+	"example": {
+		"viewportWidth": 350,
+		"attributes": {
+			"textAlign": "center"
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

packages/block-library/src/site-title/index.js

@@ -17,7 +17,12 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		viewportWidth: 350,
+		attributes: {
+			textAlign: 'center',
+		},
+	},
 	edit,
 	transforms,
 	deprecated,

packages/edit-site/src/components/global-styles/block-preview-panel.js

@@ -32,8 +32,9 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		return getBlockFromExample( name, example );
 	}, [ name, blockExample, variation ] );
 
-	const viewportWidth = blockExample?.viewportWidth ?? null;
-	const previewHeight = 150;
+	const viewportWidth = blockExample?.viewportWidth ?? 500;
+	// Same as height of InserterPreviewPanel.
+	const previewHeight = 144;
 
 	if ( ! blockExample ) {
 		return null;
@@ -49,16 +50,22 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 					minHeight={ previewHeight }
-					additionalStyles={ [
-						{
-							css: `
+					additionalStyles={
+						//We want this CSS to be in sync with the one in InserterPreviewPanel.
+						[
+							{
+								css: `
 								body{
-									min-height:${ previewHeight }px;
-									display:flex;align-items:center;justify-content:center;
+									padding: 24px;
+									min-height:100%;
+									display:flex;
+									align-items:center;
 								}
+								.is-root-container { width: 100%; }
 							`,
-						},
-					] }
+							},
+						]
+					}
 				/>
 			</div>
 		</Spacer>

packages/edit-site/src/components/global-styles/style.scss

@@ -108,7 +108,7 @@
 }
 
 .edit-site-global-styles__shadow-preview-panel {
-	height: 150px;
+	height: $grid-unit-60 * 3;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
 	overflow: auto;