From e444c4cc3a568e59feb6a4cd41d14f260e274de0 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 9 Aug 2019 12:21:23 +0100
Subject: [PATCH] Fix scrollbar jumpiness

---
 .../src/components/block-preview/index.js      | 18 ++++++++----------
 .../src/components/block-preview/style.scss    |  9 +++++----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index d8235eea0c1ddd..2b0a6133f8d2a3 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 { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 function ScaledBlockPreview( { blocks, viewportWidth } ) {
 	const previewRef = useRef( null );
 
-	const [ isTallPreview, setIsTallPreview ] = useState( false );
 	const [ isReady, setIsReady ] = useState( false );
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 	const [ { x, y }, setPosition ] = useState( { x: 0, y: 0 } );
@@ -51,7 +50,6 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 				const offsetY = ( containerElementRect.height > scaledElementRect.height * scale ) ?
 					( containerElementRect.height - ( scaledElementRect.height * scale ) ) / 2 : 0;
 
-				setIsTallPreview( scaledElementRect.height * scale > containerElementRect.height );
 				setPreviewScale( scale );
 				setPosition( { x: offsetX * scale, y: offsetY } );
 
@@ -60,7 +58,6 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 			} else {
 				const containerElementRect = containerElement.getBoundingClientRect();
 				setPreviewScale( containerElementRect.width / viewportWidth );
-				setIsTallPreview( true );
 			}
 
 			setIsReady( true );
@@ -86,14 +83,15 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 		width: viewportWidth,
 	};
 
-	const contentClassNames = classnames( 'block-editor-block-preview__content editor-styles-wrapper', {
-		'is-tall-preview': isTallPreview,
-		'is-ready': isReady,
-	} );
-
 	return (
-		<div ref={ previewRef } className="block-editor-block-preview__container" aria-hidden>
-			<Disabled style={ previewStyles } className={ contentClassNames }>
+		<div
+			ref={ previewRef }
+			className={ classnames( 'block-editor-block-preview__container', {
+				'is-ready': isReady,
+			} ) }
+			aria-hidden
+		>
+			<Disabled style={ previewStyles } className="block-editor-block-preview__content editor-styles-wrapper">
 				<BlockList />
 			</Disabled>
 		</div>
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 13df8939a7e3ec..2316de61a8355f 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -7,6 +7,11 @@
 	// The preview component measures the pixel width of this item, so as to calculate the scale factor.
 	// But without this baseline width, it collapses to 0.
 	width: 100%;
+
+	overflow: hidden;
+	&.is-ready {
+		overflow: visible;
+	}
 }
 
 .block-editor-block-preview__content {
@@ -42,10 +47,6 @@
 		height: auto;
 	}
 
-	&.is-tall-preview {
-		top: 4px;
-	}
-
 	.block-editor-block-list__insertion-point,
 	.block-editor-block-drop-zone,
 	.reusable-block-indicator,