diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index 1702bbd59c8751..97077cb7efdfaa 100644
--- a/docs/reference-guides/block-api/block-registration.md
+++ b/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:
 
diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
index 0d3d05936ef90f..aa1bba1c341d2f 100644
--- a/packages/block-library/src/audio/index.js
+++ b/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,
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 70ae87ccf5f36c..c9a00ccf4b33f0 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/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 } ) {
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
index 441336316415b9..85770a23268cba 100644
--- a/packages/block-library/src/search/index.js
+++ b/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,
 };
diff --git a/packages/block-library/src/site-logo/index.js b/packages/block-library/src/site-logo/index.js
index 68d8eb6f8b9300..fc10df08e17dee 100644
--- a/packages/block-library/src/site-logo/index.js
+++ b/packages/block-library/src/site-logo/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 };
diff --git a/packages/block-library/src/site-title/index.js b/packages/block-library/src/site-title/index.js
index 01fe15598d6f1b..87934888ce4380 100644
--- a/packages/block-library/src/site-title/index.js
+++ b/packages/block-library/src/site-title/index.js
@@ -17,6 +17,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 	deprecated,
diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js
index 5839abc4c19f25..dea09dd7c98298 100644
--- a/packages/block-library/src/table/index.js
+++ b/packages/block-library/src/table/index.js
@@ -91,6 +91,7 @@ export const settings = {
 				},
 			],
 		},
+		viewportWidth: 450,
 	},
 	transforms,
 	edit,
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
new file mode 100644
index 00000000000000..296a39a5d065d1
--- /dev/null
+++ b/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;
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 10455855d97e58..b9d2502ef8bc10 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,12 +2,14 @@
  * 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 );
@@ -15,6 +17,9 @@ function ScreenBlock( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
+			<Spacer paddingX={ 4 }>
+				<BlockPreviewPanel name={ name } />
+			</Spacer>
 			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index c081703f1f37b2..16c9b9c418dcad 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/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;
+}