Add block preview component in global styles (WordPress#45719)

* add block preview in global styles panel

update viewport widths for few blocks

add border to preview block and convert viewport width to scale

fix border radius and address minor review comments

address review comments

* revert scale

* revert defaultPadding and alignment APIs

* remove dropcap for paragraph

docs/reference-guides/block-api/block-registration.md

@@ -179,7 +179,7 @@ attributes: {
 
 -   **Type:** `Object`
 
-Example provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block.
+Example provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block and in the Styles panel when the block is selected.
 
 The data provided in the example object should match the attributes defined. For example:
 

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

@@ -23,6 +23,7 @@ export const settings = {
 		attributes: {
 			src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
 		},
+		viewportWidth: 350,
 	},
 	transforms,
 	deprecated,

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

@@ -30,12 +30,6 @@ export const settings = {
 			content: __(
 				'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
 			),
-			style: {
-				typography: {
-					fontSize: 28,
-				},
-			},
-			dropCap: true,
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
 
 /**
@@ -17,7 +18,10 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
+		viewportWidth: 400,
+	},
 	variations,
 	edit,
 };

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

@@ -16,6 +16,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 };

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

@@ -17,6 +17,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 	deprecated,

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

@@ -91,6 +91,7 @@ export const settings = {
 				},
 			],
 		},
+		viewportWidth: 450,
 	},
 	transforms,
 	edit,

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

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockPreview } from '@wordpress/block-editor';
+import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
+import { useResizeObserver } from '@wordpress/compose';
+
+const BlockPreviewPanel = ( { name } ) => {
+	const blockExample = getBlockType( name )?.example;
+	const [
+		containerResizeListener,
+		{ width: containerWidth, height: containerHeight },
+	] = useResizeObserver();
+	const viewportWidth = blockExample?.viewportWidth || containerWidth;
+
+	return ! blockExample ? null : (
+		<div className="edit-site-global-styles__block-preview-panel">
+			{ containerResizeListener }
+
+			<BlockPreview
+				viewportWidth={ viewportWidth }
+				__experimentalMinHeight={ containerHeight }
+				blocks={ getBlockFromExample( name, blockExample ) }
+			/>
+		</div>
+	);
+};
+
+export default BlockPreviewPanel;

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

@@ -2,19 +2,24 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ContextMenu from './context-menu';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenBlock( { name } ) {
 	const blockType = getBlockType( name );
 
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
+			<Spacer paddingX={ 4 }>
+				<BlockPreviewPanel name={ name } />
+			</Spacer>
 			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
 		</>
 	);

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

@@ -1,3 +1,6 @@
+// Variables
+$block-preview-height: 150px;
+
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;
@@ -121,3 +124,12 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+
+.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;
+}