Stabilise BlockPreview props (#47231)

* Stabilise BlockPreview props * Remove unnecessary __experimentalStyles migration * Add version to deprecated() calls * Default padding to 0, allow additionalStyles to override default styling
WordPress · Jan 20, 2023 · fdc180a · fdc180a
1 parent 2499646
commit fdc180a
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 34 deletions.
diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -127,10 +127,7 @@ function BlockPatternSlide( { className, pattern, minHeight } ) {
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<BlockPreview
-				blocks={ blocks }
-				__experimentalMinHeight={ minHeight }
-			/>
+			<BlockPreview blocks={ blocks } minHeight={ minHeight } />
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ description }

diff --git a/packages/block-editor/src/components/block-preview/README.md b/packages/block-editor/src/components/block-preview/README.md
@@ -30,26 +30,26 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 Set `viewportWidth` to `0` to make the viewport the same width as the container.
 
-### `__experimentalPadding`
+### minHeight
 
--   **Type** `Int`
--   **Default** `undefined`
+Minimum height of the preview iframe in pixels.
 
-Padding for the preview container body.
+-   **Type:** `Int`
+-   **Default:** `undefined`
 
-### `__experimentalStyles`
+### `additionalStyles`
 
 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; }' },
+	blocks={ blocks }
+	additionalStyles={ [
+		{ css: 'body { padding: 16px; }' },
 	] }
 />
 ```
 
--   **Type** `Int`
+-   **Type** `Array`
 -   **Default** `[]`
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
@@ -23,9 +23,8 @@ const MAX_HEIGHT = 2000;
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
-	__experimentalPadding,
-	__experimentalMinHeight,
-	__experimentalStyles,
+	minHeight,
+	additionalStyles = [],
 } ) {
 	if ( ! viewportWidth ) {
 		viewportWidth = containerWidth;
@@ -46,16 +45,16 @@ function ScaledBlockPreview( {
 		if ( styles ) {
 			return [
 				...styles,
-				...__experimentalStyles,
 				{
-					css: 'body{height:auto;overflow:hidden;border:none;}',
+					css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
 					__unstableType: 'presets',
 				},
+				...additionalStyles,
 			];
 		}
 
 		return styles;
-	}, [ styles, __experimentalStyles ] );
+	}, [ styles, additionalStyles ] );
 
 	const svgFilters = useMemo( () => {
 		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
@@ -73,7 +72,7 @@ function ScaledBlockPreview( {
 				height: contentHeight * scale,
 				maxHeight:
 					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
-				minHeight: __experimentalMinHeight,
+				minHeight,
 			} }
 		>
 			<Iframe
@@ -87,7 +86,6 @@ function ScaledBlockPreview( {
 					);
 					documentElement.style.position = 'absolute';
 					documentElement.style.width = '100%';
-					bodyElement.style.padding = __experimentalPadding + 'px';
 
 					// Necessary for contentResizeListener to work.
 					bodyElement.style.boxSizing = 'border-box';
@@ -105,9 +103,9 @@ function ScaledBlockPreview( {
 					// See: https://github.com/WordPress/gutenberg/pull/38175.
 					maxHeight: MAX_HEIGHT,
 					minHeight:
-						scale !== 0 && scale < 1 && __experimentalMinHeight
-							? __experimentalMinHeight / scale
-							: __experimentalMinHeight,
+						scale !== 0 && scale < 1 && minHeight
+							? minHeight / scale
+							: minHeight,
 				} }
 			>
 				{ contentResizeListener }

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -20,11 +21,33 @@ import { BlockListItems } from '../block-list';
 
 export function BlockPreview( {
 	blocks,
-	__experimentalPadding = 0,
 	viewportWidth = 1200,
+	minHeight,
+	additionalStyles = [],
+	// Deprecated props:
 	__experimentalMinHeight,
-	__experimentalStyles = [],
+	__experimentalPadding,
 } ) {
+	if ( __experimentalMinHeight ) {
+		minHeight = __experimentalMinHeight;
+		deprecated( 'The __experimentalMinHeight prop', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'minHeight',
+		} );
+	}
+	if ( __experimentalPadding ) {
+		additionalStyles = [
+			...additionalStyles,
+			{ css: `body { padding: ${ __experimentalPadding }px; }` },
+		];
+		deprecated( 'The __experimentalPadding prop of BlockPreview', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'additionalStyles',
+		} );
+	}
+
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -37,16 +60,17 @@ export function BlockPreview( {
 		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
 		[ blocks ]
 	);
+
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
+
 	return (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
-				__experimentalPadding={ __experimentalPadding }
-				__experimentalMinHeight={ __experimentalMinHeight }
-				__experimentalStyles={ __experimentalStyles }
+				minHeight={ minHeight }
+				additionalStyles={ additionalStyles }
 			/>
 		</BlockEditorProvider>
 	);

diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js
@@ -23,8 +23,6 @@ function InserterPreviewPanel( { item } ) {
 				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
-							__experimentalPadding={ 16 }
-							viewportWidth={ example?.viewportWidth ?? 500 }
 							blocks={
 								example
 									? getBlockFromExample( name, {
@@ -36,6 +34,10 @@ function InserterPreviewPanel( { item } ) {
 									  } )
 									: createBlock( name, initialAttributes )
 							}
+							viewportWidth={ example?.viewportWidth ?? 500 }
+							additionalStyles={ [
+								{ css: 'body { padding: 16px; }' },
+							] }
 						/>
 					</div>
 				) : (

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
@@ -36,8 +36,8 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 				<BlockPreview
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
-					__experimentalMinHeight={ minHeight }
-					__experimentalStyles={ [
+					minHeight={ minHeight }
+					additionalStyles={ [
 						{
 							css: `
 								body{

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -176,7 +176,7 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => (
 			<BlockPreview
 				blocks={ blocks }
 				viewportWidth={ 0 }
-				__experimentalStyles={ [
+				additionalStyles={ [
 					{
 						css:
 							'.wp-block:first-child { margin-top: 0; }' +