Remove top and bottom margin from block inside preview

packages/block-editor/src/components/block-preview/README.md

@@ -36,3 +36,20 @@ Set `viewportWidth` to `0` to make the viewport the same width as the container.
 -   **Default** `undefined`
 
 Padding for the preview container body.
+
+### `__experimentalStyles`
+
+List of additional editor styles to load into the preview iframe. Each object
+should contain a `css` attribute. See `EditorStyles` for more info.
+
+```jsx
+<BlockPreview
+    blocks={ blocks }
+	__experimentalStyles={ [
+		{ css: '.wp-block { margin: 16px; }' },
+	] }
+/>
+```
+
+-   **Type** `Int`
+-   **Default** `[]`

packages/block-editor/src/components/block-preview/auto.js

@@ -25,6 +25,7 @@ function ScaledBlockPreview( {
 	containerWidth,
 	__experimentalPadding,
 	__experimentalMinHeight,
+	__experimentalStyles,
 } ) {
 	if ( ! viewportWidth ) {
 		viewportWidth = containerWidth;
@@ -46,6 +47,7 @@ function ScaledBlockPreview( {
 		if ( styles ) {
 			return [
 				...styles,
+				...__experimentalStyles,
 				{
 					css: 'body{height:auto;overflow:hidden;}',
 					__unstableType: 'presets',
@@ -54,7 +56,7 @@ function ScaledBlockPreview( {
 		}
 
 		return styles;
-	}, [ styles ] );
+	}, [ styles, __experimentalStyles ] );
 
 	const svgFilters = useMemo( () => {
 		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];

packages/block-editor/src/components/block-preview/index.js

@@ -23,6 +23,7 @@ export function BlockPreview( {
 	__experimentalPadding = 0,
 	viewportWidth = 1200,
 	__experimentalMinHeight,
+	__experimentalStyles = [],
 } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -45,6 +46,7 @@ export function BlockPreview( {
 				viewportWidth={ viewportWidth }
 				__experimentalPadding={ __experimentalPadding }
 				__experimentalMinHeight={ __experimentalMinHeight }
+				__experimentalStyles={ __experimentalStyles }
 			/>
 		</BlockEditorProvider>
 	);

packages/edit-site/src/components/style-book/index.js

@@ -156,7 +156,17 @@ function Example( { title, blocks, isSelected, onClick } ) {
 		>
 			<h3 className="edit-site-style-book__example-title">{ title }</h3>
 			<div className="edit-site-style-book__example-preview">
-				<BlockPreview blocks={ blocks } viewportWidth={ 0 } />
+				<BlockPreview
+					blocks={ blocks }
+					viewportWidth={ 0 }
+					__experimentalStyles={ [
+						{
+							css:
+								'.wp-block:first-child { margin-top: 0; }' +
+								'.wp-block:last-child { margin-bottom: 0; }',
+						},
+					] }
+				/>
 			</div>
 		</button>
 	);

packages/edit-site/src/components/style-book/style.scss

@@ -70,7 +70,6 @@
 	text-align: left;
 
 	.edit-site-style-book.is-wide & {
-		margin-top: $grid-unit-40;
 		text-align: right;
 		width: 120px;
 	}