From 9e4af12405b366c0778c535e1e4ec812f461fd06 Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Thu, 10 Nov 2022 19:05:59 +0530
Subject: [PATCH 1/4] 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
---
 .../block-api/block-registration.md           | 24 +++++++++++--
 .../src/components/block-preview/auto.js      | 21 +++++++++++-
 .../src/components/block-preview/index.js     |  4 ++-
 packages/block-library/src/audio/index.js     |  1 +
 packages/block-library/src/buttons/index.js   |  1 +
 packages/block-library/src/image/index.js     |  1 +
 .../block-library/src/media-text/index.js     |  1 +
 packages/block-library/src/paragraph/index.js |  7 +---
 packages/block-library/src/pullquote/index.js |  1 +
 packages/block-library/src/search/index.js    |  6 +++-
 packages/block-library/src/site-logo/index.js |  1 +
 .../block-library/src/site-title/index.js     |  1 +
 packages/block-library/src/table/index.js     |  2 ++
 packages/block-library/src/video/index.js     |  1 +
 .../global-styles/block-preview-panel.js      | 34 +++++++++++++++++++
 .../components/global-styles/screen-block.js  |  5 +++
 .../src/components/global-styles/style.scss   | 12 +++++++
 17 files changed, 112 insertions(+), 11 deletions(-)
 create mode 100644 packages/edit-site/src/components/global-styles/block-preview-panel.js

diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index 1702bbd59c8751..0efa925a5d6b29 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:
 
@@ -216,7 +216,7 @@ example: {
 },
 ```
 
-It's also possible to define the width of the preview container in pixels via `viewportWidth`. For example:
+It's also possible to define the width of the preview container in pixels via `viewportWidth` or via `scale` to set width of the block relative to the preview container. For example:
 
 ```js
 example: {
@@ -227,6 +227,26 @@ example: {
 },
 ```
 
+```js
+example: {
+	attributes: {
+		cover: 'https://example.com/image.jpg',
+	},
+	scale: 0.8
+},
+```
+
+It's possible to set padding for the block in the preview container via `defaultPadding`. For example:
+
+```js
+example: {
+	attributes: {
+		cover: 'https://example.com/image.jpg',
+	},
+	defaultPadding: '8px 16px'
+},
+```
+
 #### variations (optional)
 
 -   **Type:** `Object[]`
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 587a264f407ca4..abfa7153385812 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -23,6 +23,7 @@ const MAX_HEIGHT = 2000;
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
+	__experimentalScale,
 	__experimentalPadding,
 	__experimentalMinHeight,
 	__experimentalStyles,
@@ -65,7 +66,14 @@ function ScaledBlockPreview( {
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
+	viewportWidth = viewportWidth / ( __experimentalScale || 1 );
 	const scale = containerWidth / viewportWidth;
+
+	const padding =
+		typeof __experimentalPadding === 'string'
+			? __experimentalPadding
+			: `${ __experimentalPadding }px`;
+
 	return (
 		<Disabled
 			className="block-editor-block-preview__content"
@@ -89,12 +97,23 @@ function ScaledBlockPreview( {
 					);
 					documentElement.style.position = 'absolute';
 					documentElement.style.width = '100%';
-					bodyElement.style.padding = __experimentalPadding + 'px';
+					documentElement.style.minHeight = '100%';
+					bodyElement.style.padding = padding;
 
 					// Necessary for contentResizeListener to work.
 					bodyElement.style.boxSizing = 'border-box';
 					bodyElement.style.position = 'absolute';
 					bodyElement.style.width = '100%';
+					bodyElement.style.minHeight = `${ __experimentalMinHeight }px`;
+
+					if ( __experimentalAlign || __experimentalJustify ) {
+						bodyElement.style.display = 'flex';
+						bodyElement.style.flexDirection = 'column';
+						bodyElement.style.alignItems =
+							__experimentalJustify || 'flex-start';
+						bodyElement.style.justifyContent =
+							__experimentalAlign || 'flex-start';
+					}
 				}, [] ) }
 				aria-hidden
 				tabIndex={ -1 }
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 78f38d390f53cd..4b23a1d283f596 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -20,8 +20,9 @@ import { BlockListItems } from '../block-list';
 
 export function BlockPreview( {
 	blocks,
-	__experimentalPadding = 0,
 	viewportWidth = 1200,
+	__experimentalScale,
+	__experimentalPadding = 0,
 	__experimentalMinHeight,
 	__experimentalStyles = [],
 } ) {
@@ -44,6 +45,7 @@ export function BlockPreview( {
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
+				__experimentalScale={ __experimentalScale }
 				__experimentalPadding={ __experimentalPadding }
 				__experimentalMinHeight={ __experimentalMinHeight }
 				__experimentalStyles={ __experimentalStyles }
diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
index 0d3d05936ef90f..872cb60367c5b1 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',
 		},
+		scale: 0.75,
 	},
 	transforms,
 	deprecated,
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index 810922fbcb839b..05a12b011983e9 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -31,6 +31,7 @@ export const settings = {
 				attributes: { text: __( 'Contact us' ) },
 			},
 		],
+		defaultPadding: '1rem',
 	},
 	deprecated,
 	transforms,
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index 1477fa99c702c5..c5008f3ae41a3a 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -27,6 +27,7 @@ export const settings = {
 			// translators: Caption accompanying an image of the Mont Blanc, which serves as an example for the Image block.
 			caption: __( 'Mont Blanc appears—still, snowy, and serene.' ),
 		},
+		defaultPadding: '1rem',
 	},
 	__experimentalLabel( attributes, { context } ) {
 		if ( context === 'accessibility' ) {
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 373050cb77fd56..2dae21f8c88b53 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -43,6 +43,7 @@ export const settings = {
 				},
 			},
 		],
+		defaultPadding: '1rem',
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 70ae87ccf5f36c..8ce11d62dc4138 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -30,12 +30,7 @@ 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,
+			dropCap: false,
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
index 9d2b42f7698ab5..24f3213c384a64 100644
--- a/packages/block-library/src/pullquote/index.js
+++ b/packages/block-library/src/pullquote/index.js
@@ -29,6 +29,7 @@ export const settings = {
 				),
 			citation: __( 'Matt Mullenweg' ),
 		},
+		defaultPadding: '1rem',
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
index 441336316415b9..f4d92f50662a75 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' ) },
+		scale: 0.75,
+	},
 	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..f3211ac45ecc3a 100644
--- a/packages/block-library/src/table/index.js
+++ b/packages/block-library/src/table/index.js
@@ -91,6 +91,8 @@ export const settings = {
 				},
 			],
 		},
+		defaultPadding: '1rem',
+		scale: 0.65,
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js
index 57201ef7125658..0d484f842d344b 100644
--- a/packages/block-library/src/video/index.js
+++ b/packages/block-library/src/video/index.js
@@ -26,6 +26,7 @@ export const settings = {
 			// translators: Caption accompanying a video of the wood thrush singing, which serves as an example for the Video block.
 			caption: __( 'Wood thrush singing in Central Park, NYC.' ),
 		},
+		defaultPadding: '1rem',
 	},
 	transforms,
 	deprecated,
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..77ea2bda33e048
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -0,0 +1,34 @@
+/**
+ * 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 padding = blockExample?.defaultPadding || '0 1rem';
+	const scale = blockExample?.scale;
+
+	return ! blockExample ? null : (
+		<div className="edit-site-global-styles__block-preview-panel">
+			{ containerResizeListener }
+
+			<BlockPreview
+				viewportWidth={ containerWidth }
+				__experimentalScale={ scale }
+				__experimentalPadding={ padding }
+				__experimentalMinHeight={ containerHeight }
+				__experimentalAlign={ 'center' }
+				__experimentalJustify={ 'center' }
+				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;
+}

From 6103787ca55280926599fb211e06092c0043813e Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Fri, 25 Nov 2022 12:53:31 +0530
Subject: [PATCH 2/4] revert scale

---
 docs/reference-guides/block-api/block-registration.md | 11 +----------
 .../block-editor/src/components/block-preview/auto.js |  2 --
 .../src/components/block-preview/index.js             |  2 --
 packages/block-library/src/audio/index.js             |  2 +-
 packages/block-library/src/search/index.js            |  2 +-
 packages/block-library/src/table/index.js             |  2 +-
 .../components/global-styles/block-preview-panel.js   |  7 +++----
 7 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index 0efa925a5d6b29..b312f81dc96693 100644
--- a/docs/reference-guides/block-api/block-registration.md
+++ b/docs/reference-guides/block-api/block-registration.md
@@ -216,7 +216,7 @@ example: {
 },
 ```
 
-It's also possible to define the width of the preview container in pixels via `viewportWidth` or via `scale` to set width of the block relative to the preview container. For example:
+It's also possible to define the width of the preview container in pixels via `viewportWidth`. For example:
 
 ```js
 example: {
@@ -227,15 +227,6 @@ example: {
 },
 ```
 
-```js
-example: {
-	attributes: {
-		cover: 'https://example.com/image.jpg',
-	},
-	scale: 0.8
-},
-```
-
 It's possible to set padding for the block in the preview container via `defaultPadding`. For example:
 
 ```js
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index abfa7153385812..665c172047367e 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -23,7 +23,6 @@ const MAX_HEIGHT = 2000;
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
-	__experimentalScale,
 	__experimentalPadding,
 	__experimentalMinHeight,
 	__experimentalStyles,
@@ -66,7 +65,6 @@ function ScaledBlockPreview( {
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
-	viewportWidth = viewportWidth / ( __experimentalScale || 1 );
 	const scale = containerWidth / viewportWidth;
 
 	const padding =
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 4b23a1d283f596..a199bd26d2cb40 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -21,7 +21,6 @@ import { BlockListItems } from '../block-list';
 export function BlockPreview( {
 	blocks,
 	viewportWidth = 1200,
-	__experimentalScale,
 	__experimentalPadding = 0,
 	__experimentalMinHeight,
 	__experimentalStyles = [],
@@ -45,7 +44,6 @@ export function BlockPreview( {
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
-				__experimentalScale={ __experimentalScale }
 				__experimentalPadding={ __experimentalPadding }
 				__experimentalMinHeight={ __experimentalMinHeight }
 				__experimentalStyles={ __experimentalStyles }
diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
index 872cb60367c5b1..aa1bba1c341d2f 100644
--- a/packages/block-library/src/audio/index.js
+++ b/packages/block-library/src/audio/index.js
@@ -23,7 +23,7 @@ export const settings = {
 		attributes: {
 			src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
 		},
-		scale: 0.75,
+		viewportWidth: 350,
 	},
 	transforms,
 	deprecated,
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
index f4d92f50662a75..85770a23268cba 100644
--- a/packages/block-library/src/search/index.js
+++ b/packages/block-library/src/search/index.js
@@ -20,7 +20,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
-		scale: 0.75,
+		viewportWidth: 400,
 	},
 	variations,
 	edit,
diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js
index f3211ac45ecc3a..6abf52ac8f15ea 100644
--- a/packages/block-library/src/table/index.js
+++ b/packages/block-library/src/table/index.js
@@ -91,8 +91,8 @@ export const settings = {
 				},
 			],
 		},
+		viewportWidth: 450,
 		defaultPadding: '1rem',
-		scale: 0.65,
 	},
 	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
index 77ea2bda33e048..631df69f38b42a 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
@@ -11,16 +11,15 @@ const BlockPreviewPanel = ( { name } ) => {
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
-	const padding = blockExample?.defaultPadding || '0 1rem';
-	const scale = blockExample?.scale;
+	const padding = blockExample?.defaultPadding || 0;
+	const viewportWidth = blockExample?.viewportWidth || containerWidth;
 
 	return ! blockExample ? null : (
 		<div className="edit-site-global-styles__block-preview-panel">
 			{ containerResizeListener }
 
 			<BlockPreview
-				viewportWidth={ containerWidth }
-				__experimentalScale={ scale }
+				viewportWidth={ viewportWidth }
 				__experimentalPadding={ padding }
 				__experimentalMinHeight={ containerHeight }
 				__experimentalAlign={ 'center' }

From b28756009c4829031689c5bb5e2f065c6cda0d5c Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Fri, 25 Nov 2022 16:36:25 +0530
Subject: [PATCH 3/4] revert defaultPadding and alignment APIs

---
 .../block-api/block-registration.md           | 11 -----------
 .../src/components/block-preview/auto.js      | 19 +------------------
 .../src/components/block-preview/index.js     |  2 +-
 packages/block-library/src/buttons/index.js   |  1 -
 packages/block-library/src/image/index.js     |  1 -
 .../block-library/src/media-text/index.js     |  1 -
 packages/block-library/src/pullquote/index.js |  1 -
 packages/block-library/src/table/index.js     |  1 -
 packages/block-library/src/video/index.js     |  1 -
 .../global-styles/block-preview-panel.js      |  4 ----
 10 files changed, 2 insertions(+), 40 deletions(-)

diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index b312f81dc96693..97077cb7efdfaa 100644
--- a/docs/reference-guides/block-api/block-registration.md
+++ b/docs/reference-guides/block-api/block-registration.md
@@ -227,17 +227,6 @@ example: {
 },
 ```
 
-It's possible to set padding for the block in the preview container via `defaultPadding`. For example:
-
-```js
-example: {
-	attributes: {
-		cover: 'https://example.com/image.jpg',
-	},
-	defaultPadding: '8px 16px'
-},
-```
-
 #### variations (optional)
 
 -   **Type:** `Object[]`
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 665c172047367e..587a264f407ca4 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -66,12 +66,6 @@ function ScaledBlockPreview( {
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
 	const scale = containerWidth / viewportWidth;
-
-	const padding =
-		typeof __experimentalPadding === 'string'
-			? __experimentalPadding
-			: `${ __experimentalPadding }px`;
-
 	return (
 		<Disabled
 			className="block-editor-block-preview__content"
@@ -95,23 +89,12 @@ function ScaledBlockPreview( {
 					);
 					documentElement.style.position = 'absolute';
 					documentElement.style.width = '100%';
-					documentElement.style.minHeight = '100%';
-					bodyElement.style.padding = padding;
+					bodyElement.style.padding = __experimentalPadding + 'px';
 
 					// Necessary for contentResizeListener to work.
 					bodyElement.style.boxSizing = 'border-box';
 					bodyElement.style.position = 'absolute';
 					bodyElement.style.width = '100%';
-					bodyElement.style.minHeight = `${ __experimentalMinHeight }px`;
-
-					if ( __experimentalAlign || __experimentalJustify ) {
-						bodyElement.style.display = 'flex';
-						bodyElement.style.flexDirection = 'column';
-						bodyElement.style.alignItems =
-							__experimentalJustify || 'flex-start';
-						bodyElement.style.justifyContent =
-							__experimentalAlign || 'flex-start';
-					}
 				}, [] ) }
 				aria-hidden
 				tabIndex={ -1 }
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index a199bd26d2cb40..78f38d390f53cd 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -20,8 +20,8 @@ import { BlockListItems } from '../block-list';
 
 export function BlockPreview( {
 	blocks,
-	viewportWidth = 1200,
 	__experimentalPadding = 0,
+	viewportWidth = 1200,
 	__experimentalMinHeight,
 	__experimentalStyles = [],
 } ) {
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index 05a12b011983e9..810922fbcb839b 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -31,7 +31,6 @@ export const settings = {
 				attributes: { text: __( 'Contact us' ) },
 			},
 		],
-		defaultPadding: '1rem',
 	},
 	deprecated,
 	transforms,
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index c5008f3ae41a3a..1477fa99c702c5 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -27,7 +27,6 @@ export const settings = {
 			// translators: Caption accompanying an image of the Mont Blanc, which serves as an example for the Image block.
 			caption: __( 'Mont Blanc appears—still, snowy, and serene.' ),
 		},
-		defaultPadding: '1rem',
 	},
 	__experimentalLabel( attributes, { context } ) {
 		if ( context === 'accessibility' ) {
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 2dae21f8c88b53..373050cb77fd56 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -43,7 +43,6 @@ export const settings = {
 				},
 			},
 		],
-		defaultPadding: '1rem',
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
index 24f3213c384a64..9d2b42f7698ab5 100644
--- a/packages/block-library/src/pullquote/index.js
+++ b/packages/block-library/src/pullquote/index.js
@@ -29,7 +29,6 @@ export const settings = {
 				),
 			citation: __( 'Matt Mullenweg' ),
 		},
-		defaultPadding: '1rem',
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js
index 6abf52ac8f15ea..dea09dd7c98298 100644
--- a/packages/block-library/src/table/index.js
+++ b/packages/block-library/src/table/index.js
@@ -92,7 +92,6 @@ export const settings = {
 			],
 		},
 		viewportWidth: 450,
-		defaultPadding: '1rem',
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js
index 0d484f842d344b..57201ef7125658 100644
--- a/packages/block-library/src/video/index.js
+++ b/packages/block-library/src/video/index.js
@@ -26,7 +26,6 @@ export const settings = {
 			// translators: Caption accompanying a video of the wood thrush singing, which serves as an example for the Video block.
 			caption: __( 'Wood thrush singing in Central Park, NYC.' ),
 		},
-		defaultPadding: '1rem',
 	},
 	transforms,
 	deprecated,
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 631df69f38b42a..296a39a5d065d1 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
@@ -11,7 +11,6 @@ const BlockPreviewPanel = ( { name } ) => {
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
-	const padding = blockExample?.defaultPadding || 0;
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
 
 	return ! blockExample ? null : (
@@ -20,10 +19,7 @@ const BlockPreviewPanel = ( { name } ) => {
 
 			<BlockPreview
 				viewportWidth={ viewportWidth }
-				__experimentalPadding={ padding }
 				__experimentalMinHeight={ containerHeight }
-				__experimentalAlign={ 'center' }
-				__experimentalJustify={ 'center' }
 				blocks={ getBlockFromExample( name, blockExample ) }
 			/>
 		</div>

From 58564102d31fcb9de8ebfc5a180d6314b31434c0 Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Mon, 28 Nov 2022 16:34:10 +0530
Subject: [PATCH 4/4] remove dropcap for paragraph

---
 packages/block-library/src/paragraph/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 8ce11d62dc4138..c9a00ccf4b33f0 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -30,7 +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.'
 			),
-			dropCap: false,
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {