Fix scrollbar jumpiness

WordPress · Aug 9, 2019 · e444c4c · e444c4c
1 parent 74dfa10
commit e444c4c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git 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
@@ -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,