select( 'core/block-editor' ).getSettings()
);
@@ -47,26 +39,10 @@ export function BlockPreview( {
}
return (
- { /*
- * The key prop is used to force recomputing the preview
- * by remounting the component, ScaledBlockPreview is not meant to
- * be rerendered.
- */ }
- { autoHeight ? (
-
- ) : (
-
- ) }
+
);
}
diff --git a/packages/block-editor/src/components/block-preview/scaled.js b/packages/block-editor/src/components/block-preview/scaled.js
deleted file mode 100644
index 69496241fdb5a..0000000000000
--- a/packages/block-editor/src/components/block-preview/scaled.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Disabled } from '@wordpress/components';
-import { useLayoutEffect, useState, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockList from '../block-list';
-import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
-
-const getInlineStyles = ( scale, x, y, isReady, width ) => ( {
- transform: `scale(${ scale })`,
- visibility: isReady ? 'visible' : 'hidden',
- left: x,
- top: y,
- width,
-} );
-
-function ScaledBlockPreview( {
- blocks,
- viewportWidth,
- padding = 0,
- onReady,
- scalingDelay,
-} ) {
- const previewRef = useRef( null );
-
- const [ isReady, setIsReady ] = useState( false );
- const [ previewScale, setPreviewScale ] = useState( 1 );
- const [ { x, y }, setPosition ] = useState( { x: 0, y: 0 } );
-
- // Dynamically calculate the scale factor
- useLayoutEffect( () => {
- // Timer - required to account for async render of `BlockEditorProvider`
- const timerId = setTimeout( () => {
- const containerElement = previewRef.current;
- if ( ! containerElement ) {
- return;
- }
-
- // Auxiliary vars used for onReady() callback.
- let scale,
- offsetX = 0,
- offsetY = 0;
-
- // If we're previewing a single block, scale the preview to fit it.
- if ( blocks.length === 1 ) {
- const block = blocks[ 0 ];
- const previewElement = getBlockPreviewContainerDOMNode(
- block.clientId
- );
- if ( ! previewElement ) {
- return;
- }
-
- let containerElementRect = containerElement.getBoundingClientRect();
- containerElementRect = {
- width: containerElementRect.width - padding * 2,
- height: containerElementRect.height - padding * 2,
- left: containerElementRect.left,
- top: containerElementRect.top,
- };
- const scaledElementRect = previewElement.getBoundingClientRect();
-
- scale =
- containerElementRect.width / scaledElementRect.width || 1;
- offsetX =
- -( scaledElementRect.left - containerElementRect.left ) *
- scale +
- padding;
- offsetY =
- containerElementRect.height >
- scaledElementRect.height * scale
- ? ( containerElementRect.height -
- scaledElementRect.height * scale ) /
- 2 +
- padding
- : 0;
-
- setPreviewScale( scale );
- setPosition( { x: offsetX, y: offsetY } );
-
- // Hack: we need to reset the scaled elements margins
- previewElement.style.marginTop = '0';
- } else {
- const containerElementRect = containerElement.getBoundingClientRect();
- scale = containerElementRect.width / viewportWidth;
- setPreviewScale( scale );
- }
-
- setIsReady( true );
- onReady( {
- scale,
- position: { x: offsetX, y: offsetY },
- previewContainerRef: previewRef,
-
- inlineStyles: getInlineStyles(
- scale,
- offsetX,
- offsetY,
- true,
- viewportWidth
- ),
- } );
- }, scalingDelay );
-
- // Cleanup
- return () => {
- if ( timerId ) {
- window.clearTimeout( timerId );
- }
- };
- }, [] );
-
- if ( ! blocks || blocks.length === 0 ) {
- return null;
- }
-
- const previewStyles = getInlineStyles(
- previewScale,
- x,
- y,
- isReady,
- viewportWidth
- );
-
- return (
-
-
-
-
-
- );
-}
-
-export default ScaledBlockPreview;
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 1628c178dbd05..c6ef74f6c28b6 100644
--- 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
index 3faa492477fb8..0c4352d41530a 100644
--- 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( {
>
) : (
diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js
index 04865708f773b..abeb2d12139ef 100644
--- 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() {
{ __( 'Preview' ) }
-
+