Remove the old block preview implementation (#21096)

WordPress · Mar 26, 2020 · ab3bed4 · ab3bed4
1 parent dc4444d
commit ab3bed4
Show file tree

Hide file tree

Showing 10 changed files with 10 additions and 203 deletions.
diff --git a/packages/block-editor/src/components/block-patterns/index.js b/packages/block-editor/src/components/block-patterns/index.js
@@ -34,7 +34,7 @@ function BlockPattern( { pattern, onClick } ) {
 			tabIndex={ 0 }
 		>
 			<div className="block-editor-patterns__item-preview">
-				<BlockPreview blocks={ blocks } autoHeight />
+				<BlockPreview blocks={ blocks } />
 			</div>
 			<div className="block-editor-patterns__item-title">{ title }</div>
 		</div>

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
@@ -21,7 +21,7 @@ function AutoBlockPreview( { viewportWidth } ) {
 
 	return (
 		<div
-			className="block-editor-block-preview__container editor-styles-wrapper is-auto-height"
+			className="block-editor-block-preview__container editor-styles-wrapper"
 			aria-hidden
 			style={ {
 				height: ( contentHeight * containerWidth ) / viewportWidth,

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, noop } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,6 @@ import { useLayoutEffect, useReducer, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import BlockEditorProvider from '../provider';
-import ScaledBlockPreview from './scaled';
 import AutoHeightBlockPreview from './auto';
 
 /**
@@ -27,14 +26,7 @@ import AutoHeightBlockPreview from './auto';
  *
  * @return {WPComponent} The component to be rendered.
  */
-export function BlockPreview( {
-	blocks,
-	viewportWidth = 700,
-	padding,
-	autoHeight = false,
-	__experimentalOnReady = noop,
-	__experimentalScalingDelay = 100,
-} ) {
+export function BlockPreview( { blocks, viewportWidth = 700 } ) {
 	const settings = useSelect( ( select ) =>
 		select( 'core/block-editor' ).getSettings()
 	);
@@ -49,26 +41,10 @@ export function BlockPreview( {
 	}
 	return (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
-			{ /*
-			 * The key prop is used to force recomputing the preview
-			 * by remounting the component, ScaledBlockPreview is not meant to
-			 * be rerendered.
-			 */ }
-			{ autoHeight ? (
-				<AutoHeightBlockPreview
-					key={ recompute }
-					viewportWidth={ viewportWidth }
-				/>
-			) : (
-				<ScaledBlockPreview
-					key={ recompute }
-					blocks={ renderedBlocks }
-					viewportWidth={ viewportWidth }
-					padding={ padding }
-					onReady={ __experimentalOnReady }
-					scalingDelay={ __experimentalScalingDelay }
-				/>
-			) }
+			<AutoHeightBlockPreview
+				key={ recompute }
+				viewportWidth={ viewportWidth }
+			/>
 		</BlockEditorProvider>
 	);
 }

diff --git a/packages/block-editor/src/components/block-preview/scaled.js b/packages/block-editor/src/components/block-preview/scaled.js
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -9,9 +9,6 @@
 	width: 100%;
 
 	overflow: hidden;
-	&.is-ready {
-		overflow: visible;
-	}
 }
 
 .block-editor-block-preview__content {
@@ -35,13 +32,6 @@
 	overflow: visible;
 	min-height: auto;
 
-	.block-editor-block-preview__container &.is-centered {
-		.block-editor-block-list__layout,
-		.block-editor-block-list__block {
-			padding: 0;
-		}
-	}
-
 	.block-editor-block-list__insertion-point,
 	.block-editor-block-drop-zone,
 	.reusable-block-indicator,

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -141,7 +141,6 @@ function BlockStyles( {
 					>
 						<div className="block-editor-block-styles__item-preview">
 							<BlockPreview
-								autoHeight
 								viewportWidth={ 500 }
 								blocks={
 									type.example

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -187,7 +187,6 @@ export class BlockSwitcher extends Component {
 									{ __( 'Preview' ) }
 								</div>
 								<BlockPreview
-									autoHeight
 									viewportWidth={ 500 }
 									blocks={
 										hoveredBlockType.example

diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js
@@ -24,7 +24,6 @@ function InserterPreviewPanel( { item } ) {
 				{ isReusableBlock( item ) || hoveredItemBlockType.example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
-							padding={ 10 }
 							viewportWidth={ 500 }
 							blocks={
 								hoveredItemBlockType.example
@@ -43,7 +42,6 @@ function InserterPreviewPanel( { item } ) {
 											item.initialAttributes
 									  )
 							}
-							autoHeight
 						/>
 					</div>
 				) : (

diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js
@@ -22,7 +22,7 @@ function TemplatePartPreview() {
 			<div className="wp-block-template-part__placeholder-preview-title">
 				{ __( 'Preview' ) }
 			</div>
-			<BlockPreview blocks={ blocks } autoHeight />
+			<BlockPreview blocks={ blocks } />
 		</div>
 	);
 }

diff --git a/packages/edit-site/src/components/template-switcher/preview.js b/packages/edit-site/src/components/template-switcher/preview.js
@@ -23,7 +23,7 @@ function TemplatePreview( { item } ) {
 	);
 	return (
 		<div className="edit-site-template-switcher__preview">
-			{ !! blocks && <BlockPreview blocks={ blocks } autoHeight /> }
+			{ !! blocks && <BlockPreview blocks={ blocks } /> }
 		</div>
 	);
 }