From cdddad05f8cb73fa86dd6f756e4b1cc71f1ac18a Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 12 Jun 2019 12:53:01 +0200
Subject: [PATCH 01/81] First stab at a proof of concept.

---
 .../src/components/block-preview/index.js     | 49 ++++++++-------
 .../src/components/block-preview/style.scss   | 62 ++++++++++++++++---
 .../src/components/block-styles/index.js      |  3 +
 .../src/components/block-styles/style.scss    | 20 +-----
 4 files changed, 86 insertions(+), 48 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index b63fd4abbf7dd5..9e8308abe9afe6 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { castArray } from 'lodash';
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -16,31 +15,37 @@ import { withSelect } from '@wordpress/data';
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-export function BlockPreview( { blocks, settings, className, isScaled } ) {
+export function BlockPreview( { blocks, settings, srcWidth, srcHeight, destWidth } ) {
 	if ( ! blocks ) {
 		return null;
 	}
+
+	// Calculate the scale factor necessary to size down the preview thumbnail.
+	const scale = Math.min( destWidth / srcWidth );
+	const previewDimensions = {
+		width: srcWidth ? srcWidth : 400 + 'px', // 400x300 is provided as a 4:3 aspect ratio fallback.
+		height: srcHeight ? srcHeight : 300 + 'px',
+		transform: 'scale(' + scale + ')',
+	};
+
+	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
+	// The preview is then absolutely positioned on top of this, creating a visual unit.
+	const aspectPadding = Math.round( srcHeight / srcWidth * 100 );
+	const previewAspect = {
+		paddingTop: aspectPadding + '%',
+	};
+
 	return (
-		<Disabled
-			aria-hidden
-			className={
-				classnames(
-					className,
-					'block-editor-block-preview',
-					'editor-styles-wrapper',
-					{
-						'is-scaled': isScaled,
-					}
-				)
-			}
-		>
-			<BlockEditorProvider
-				value={ castArray( blocks ) }
-				settings={ settings }
-			>
-				<BlockList renderAppender={ false } />
-			</BlockEditorProvider>
-		</Disabled>
+		<div style={ previewAspect } className="editor-block-preview__container" aria-hidden>
+			<Disabled style={ previewDimensions } className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper">
+				<BlockEditorProvider
+					value={ castArray( blocks ) }
+					settings={ settings }
+				>
+					<BlockList />
+				</BlockEditorProvider>
+			</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 ff42e7b3b4dccd..00240e3b05910a 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -1,14 +1,61 @@
+// This is the preview that shows up to the right of the thumbnail when hovering.
 .block-editor-block-preview {
 	padding: $block-padding;
 	font-family: $editor-font;
 	overflow: hidden;
 	width: 100%;
 
-	// Resetting the block editor paddings and margins
+	@include break-medium {
+		display: block;
+	}
+
+	.block-editor-block-preview__content {
+		padding: $block-padding;
+		border: $border-width solid $light-gray-500;
+		font-family: $editor-font;
+
+		> div {
+			font-family: $editor-font;
+		}
+	}
+
+	.block-editor-block-preview__title {
+		margin-bottom: 10px;
+		color: $dark-gray-300;
+	}
+}
+
+// These rules ensure the preview scales smoothly regardless of the container size.
+.editor-block-preview__container {
+	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
+	// This positioning enables the content to sit on top of that padding to fit.
+	position: relative;
+}
+
+.block-editor-block-preview__content {
+	// This element receives inline styles for width, height, and transform-scale.
+	// Those inline styles are calculated to fit a perfect thumbnail.
+
+	// Position above the padding.
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	// Important to set the origin.
+	transform-origin: top left;
+
+	// Resetting paddings, margins, and other.
+	text-align: initial;
+	margin: 0;
+	padding: 0;
+	overflow: visible;
+	min-height: auto;
+
 	.block-editor-block-list__layout,
 	.block-editor-block-list__block {
 		padding: 0;
 	}
+
 	.editor-block-list__block-edit [data-block] {
 		margin-top: 0;
 	}
@@ -17,18 +64,15 @@
 		height: auto;
 	}
 
-	> .reusable-block-indicator {
-		display: none;
-	}
-
-	.block-list-appender {
-		display: none;
-	}
-
 	&.is-scaled {
 		> div {
 			transform: scale(0.9);
 			transform-origin: center top;
 		}
 	}
+
+	.reusable-block-indicator,
+	.block-list-appender {
+		display: none;
+	}
 }
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index f9270094e47082..4520c0aeb110bc 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -127,6 +127,9 @@ function BlockStyles( {
 								blocks={ cloneBlock( block, {
 									className: styleClassName,
 								} ) }
+								srcWidth={ 400 }
+								srcHeight={ 300 }
+								destWidth={ 124 }
 							/>
 						</div>
 						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 988e7563878fc1..0080cd2a4347cd 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -30,29 +30,15 @@
 	}
 }
 
+// Show a little preview thumbnail for style variations.
 .block-editor-block-styles__item-preview {
 	outline: $border-width solid transparent; // Shown in Windows High Contrast mode.
-	border: 1px solid rgba($dark-gray-900, 0.2);
-	overflow: hidden;
 	padding: 0;
-	text-align: initial;
+	border: $border-width solid rgba($dark-gray-900, 0.2);
 	border-radius: $radius-round-rectangle;
 	display: flex;
-	height: 60px;
+	overflow: hidden;
 	background: $white;
-
-	// Actual preview contents.
-	.block-editor-block-preview__content {
-		transform: scale(0.7);
-		transform-origin: center center;
-		width: 100%;
-
-		// Unset some of the styles that might be inherited from the editor style.
-		margin: 0;
-		padding: 0;
-		overflow: visible;
-		min-height: auto;
-	}
 }
 
 .block-editor-block-styles__item-label {

From af648b1cac40178e781df526480f1090519ef1e5 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Jun 2019 09:13:45 +0100
Subject: [PATCH 02/81] Attempt to programmatically determine dest dimensions

---
 .../src/components/block-preview/index.js     | 51 +++++++++++++------
 .../src/components/block-preview/style.scss   |  4 ++
 .../src/components/block-styles/index.js      |  2 +-
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 9e8308abe9afe6..d7574eaa9a54db 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -2,12 +2,14 @@
  * External dependencies
  */
 import { castArray } from 'lodash';
+import React from 'react';
 
 /**
  * WordPress dependencies
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,28 +17,47 @@ import { withSelect } from '@wordpress/data';
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-export function BlockPreview( { blocks, settings, srcWidth, srcHeight, destWidth } ) {
+export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 	if ( ! blocks ) {
 		return null;
 	}
 
-	// Calculate the scale factor necessary to size down the preview thumbnail.
-	const scale = Math.min( destWidth / srcWidth );
-	const previewDimensions = {
-		width: srcWidth ? srcWidth : 400 + 'px', // 400x300 is provided as a 4:3 aspect ratio fallback.
-		height: srcHeight ? srcHeight : 300 + 'px',
-		transform: 'scale(' + scale + ')',
-	};
+	// Calculated the destination width.
+	const previewRef = React.createRef();
 
-	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
-	// The preview is then absolutely positioned on top of this, creating a visual unit.
-	const aspectPadding = Math.round( srcHeight / srcWidth * 100 );
-	const previewAspect = {
-		paddingTop: aspectPadding + '%',
-	};
+	// Fallback dimensions.
+	const [ previewDimensions, setPreviewDimensions ] = useState( {
+		width: 400,
+		height: 300,
+		transform: 'scale(1)',
+	} );
+
+	const [ previewAspect, setPreviewAspect ] = useState( {
+		paddingTop: '75%',
+	} );
+
+	useLayoutEffect( () => {
+		const destWidth = previewRef.current.offsetWidth;
+
+		// Calculate the scale factor necessary to size down the preview thumbnail.
+		const scale = Math.min( destWidth / srcWidth ) || 1;
+
+		setPreviewDimensions( {
+			width: srcWidth ? srcWidth : 400 + 'px', // 400x300 is provided as a 4:3 aspect ratio fallback.
+			height: srcHeight ? srcHeight : 300 + 'px',
+			transform: 'scale(' + scale + ')',
+		} );
+
+		// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
+		// The preview is then absolutely positioned on top of this, creating a visual unit.
+		const aspectPadding = Math.round( srcHeight / srcWidth * 100 );
+		setPreviewAspect( {
+			paddingTop: aspectPadding + '%',
+		} );
+	}, [] );
 
 	return (
-		<div style={ previewAspect } className="editor-block-preview__container" aria-hidden>
+		<div ref={ previewRef } style={ previewAspect } className="editor-block-preview__container" aria-hidden>
 			<Disabled style={ previewDimensions } className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper">
 				<BlockEditorProvider
 					value={ castArray( blocks ) }
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 00240e3b05910a..ab4e9b793eed3b 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -30,6 +30,10 @@
 	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
 	// This positioning enables the content to sit on top of that padding to fit.
 	position: relative;
+
+	// 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%;
 }
 
 .block-editor-block-preview__content {
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 4520c0aeb110bc..727fb10c6ebc4c 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -129,7 +129,7 @@ function BlockStyles( {
 								} ) }
 								srcWidth={ 400 }
 								srcHeight={ 300 }
-								destWidth={ 124 }
+
 							/>
 						</div>
 						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">

From 2cc126440d6397442d153754435c5ae593034f28 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 27 Jun 2019 09:27:58 +0200
Subject: [PATCH 03/81] Add README stub.

---
 packages/block-editor/src/components/block-preview/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index ab4e9b793eed3b..5ed243fddb077d 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -34,6 +34,10 @@
 	// 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%;
+
+	// This ensures that content evne if it overlaps the preview container is properly clipped.
+	// This is mostly for previews that include arbitrary content.
+	overflow: hidden;
 }
 
 .block-editor-block-preview__content {

From 3ad0bc1d2c5e7a49cb1651c47f1b5913da688859 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 23 Jul 2019 10:53:18 +0100
Subject: [PATCH 04/81] Updates to use default args for width and height

Addresses https://github.com/WordPress/gutenberg/pull/16113#discussion_r298130949
---
 .../block-editor/src/components/block-preview/index.js    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index d7574eaa9a54db..c12de92dcd4634 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -27,8 +27,8 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 
 	// Fallback dimensions.
 	const [ previewDimensions, setPreviewDimensions ] = useState( {
-		width: 400,
-		height: 300,
+		width: srcWidth,
+		height: srcHeight,
 		transform: 'scale(1)',
 	} );
 
@@ -43,8 +43,8 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 		const scale = Math.min( destWidth / srcWidth ) || 1;
 
 		setPreviewDimensions( {
-			width: srcWidth ? srcWidth : 400 + 'px', // 400x300 is provided as a 4:3 aspect ratio fallback.
-			height: srcHeight ? srcHeight : 300 + 'px',
+			width: `${ srcWidth }px`, // 400x300 is provided as a 4:3 aspect ratio fallback.
+			height: `${ srcHeight }px`,
 			transform: 'scale(' + scale + ')',
 		} );
 

From 3a15d944f86fb6456812b71299c3af4e31c93e67 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 23 Jul 2019 11:02:22 +0100
Subject: [PATCH 05/81] Update class namespaces to match package

Addresses https://github.com/WordPress/gutenberg/pull/16113#discussion_r298131236
---
 packages/block-editor/src/components/block-preview/index.js   | 4 ++--
 packages/block-editor/src/components/block-preview/style.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index c12de92dcd4634..6b0384685ed17b 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -57,8 +57,8 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 	}, [] );
 
 	return (
-		<div ref={ previewRef } style={ previewAspect } className="editor-block-preview__container" aria-hidden>
-			<Disabled style={ previewDimensions } className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper">
+		<div ref={ previewRef } style={ previewAspect } className="block-editor-block-preview__container" aria-hidden>
+			<Disabled style={ previewDimensions } className="block-editor-block-preview__content editor-styles-wrapper">
 				<BlockEditorProvider
 					value={ castArray( blocks ) }
 					settings={ settings }
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 5ed243fddb077d..3fd196493313ee 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -26,7 +26,7 @@
 }
 
 // These rules ensure the preview scales smoothly regardless of the container size.
-.editor-block-preview__container {
+.block-editor-block-preview__container {
 	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
 	// This positioning enables the content to sit on top of that padding to fit.
 	position: relative;

From 167fadbe0503604ee902c6f446f036400776e06c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 23 Jul 2019 11:06:25 +0100
Subject: [PATCH 06/81] Add width and height as Effect Hook deps

Addresses https://github.com/WordPress/gutenberg/pull/16113#discussion_r300334136
---
 packages/block-editor/src/components/block-preview/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 6b0384685ed17b..6233919b8e5eeb 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -54,7 +54,7 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 		setPreviewAspect( {
 			paddingTop: aspectPadding + '%',
 		} );
-	}, [] );
+	}, [ srcWidth, srcHeight ] );
 
 	return (
 		<div ref={ previewRef } style={ previewAspect } className="block-editor-block-preview__container" aria-hidden>

From 68fb82f4ffb9f90e3658500494ecbce2fd5e3ad7 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 23 Jul 2019 11:08:33 +0100
Subject: [PATCH 07/81] Use correct `createRef` from @wordpress/element

Was previously using React createRef.

Addresses https://github.com/WordPress/gutenberg/pull/16113#discussion_r300325510
---
 packages/block-editor/src/components/block-preview/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 6233919b8e5eeb..ac1bf7285c1660 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -9,7 +9,7 @@ import React from 'react';
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState } from '@wordpress/element';
+import { useLayoutEffect, useState, createRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 	}
 
 	// Calculated the destination width.
-	const previewRef = React.createRef();
+	const previewRef = createRef();
 
 	// Fallback dimensions.
 	const [ previewDimensions, setPreviewDimensions ] = useState( {

From 2ae05076dd96445def6206d52edc7e881cb66f22 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 23 Jul 2019 12:25:00 +0100
Subject: [PATCH 08/81] Revert "Update class namespaces to match package"

This reverts commit 24252fa887986548839e7d9a6fe2639807ed0bc6.
---
 packages/block-editor/src/components/block-preview/index.js   | 4 ++--
 packages/block-editor/src/components/block-preview/style.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index ac1bf7285c1660..f8abbef30edfd0 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -57,8 +57,8 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 	}, [ srcWidth, srcHeight ] );
 
 	return (
-		<div ref={ previewRef } style={ previewAspect } className="block-editor-block-preview__container" aria-hidden>
-			<Disabled style={ previewDimensions } className="block-editor-block-preview__content editor-styles-wrapper">
+		<div ref={ previewRef } style={ previewAspect } className="editor-block-preview__container" aria-hidden>
+			<Disabled style={ previewDimensions } className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper">
 				<BlockEditorProvider
 					value={ castArray( blocks ) }
 					settings={ settings }
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 3fd196493313ee..5ed243fddb077d 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -26,7 +26,7 @@
 }
 
 // These rules ensure the preview scales smoothly regardless of the container size.
-.block-editor-block-preview__container {
+.editor-block-preview__container {
 	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
 	// This positioning enables the content to sit on top of that padding to fit.
 	position: relative;

From a920ee595a376b0996cb850b5f0234d213ccd4ff Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 23 Jul 2019 12:37:09 +0100
Subject: [PATCH 09/81] Migrate to useRef hook

---
 packages/block-editor/src/components/block-preview/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index f8abbef30edfd0..dc5c156f4363df 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -9,7 +9,7 @@ import React from 'react';
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState, createRef } from '@wordpress/element';
+import { useLayoutEffect, useState, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 	}
 
 	// Calculated the destination width.
-	const previewRef = createRef();
+	const previewRef = useRef( null );
 
 	// Fallback dimensions.
 	const [ previewDimensions, setPreviewDimensions ] = useState( {

From dc8738fb5430c65f666481bf75beb9741e8b274c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 23 Jul 2019 12:38:29 +0100
Subject: [PATCH 10/81] Adds basic unit test

Still a WIP
---
 .../components/block-preview/test/index.js    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 packages/block-editor/src/components/block-preview/test/index.js

diff --git a/packages/block-editor/src/components/block-preview/test/index.js b/packages/block-editor/src/components/block-preview/test/index.js
new file mode 100644
index 00000000000000..b98ee94f3db934
--- /dev/null
+++ b/packages/block-editor/src/components/block-preview/test/index.js
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { BlockPreviewContent } from '../index';
+
+describe( 'BlockPreviewContent', () => {
+	beforeAll( () => {
+		registerCoreBlocks();
+	} );
+
+	it( 'renders a preview with suitable default dimensions', () => {
+		const wrapper = shallow( <BlockPreviewContent
+			name="core/paragraph"
+		/> );
+
+		wrapper.update();
+
+		const previewAspectRatioStyle = wrapper.find( '.editor-block-preview__container' ).first().prop( 'style' );
+		const previewTransform = wrapper.find( '.editor-block-preview__content' ).first().prop( 'style' ).transform;
+		const previewScale = parseInt( previewTransform.match( /\d/ )[ 0 ], 10 );
+
+		expect( previewScale ).toEqual( 1 );
+
+		expect( previewAspectRatioStyle ).toEqual( {
+			paddingTop: '75%',
+		} );
+	} );
+} );

From 0f4f105b81050c662b077e3caf091a3630271d23 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 31 Jul 2019 10:13:47 +0100
Subject: [PATCH 11/81] Refactor to avoid unecessary state and simplify
 implementation of scaling

---
 .../src/components/block-preview/index.js     | 49 +++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index dc5c156f4363df..3f0d8993b982ea 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -22,43 +22,42 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 		return null;
 	}
 
-	// Calculated the destination width.
+	// Used to dynamically retrieve the width of the element
+	// which wraps the preview
 	const previewRef = useRef( null );
 
-	// Fallback dimensions.
-	const [ previewDimensions, setPreviewDimensions ] = useState( {
-		width: srcWidth,
-		height: srcHeight,
-		transform: 'scale(1)',
-	} );
+	const [ previewScale, setPreviewScale ] = useState( 1 );
 
-	const [ previewAspect, setPreviewAspect ] = useState( {
-		paddingTop: '75%',
-	} );
+	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
+	// The preview is then absolutely positioned on top of this, creating a visual unit.
+	const aspectPadding = {
+		paddingTop: Math.round( srcHeight / srcWidth * 100 ) + '%',
+	};
+
+	// Set the predefined optimal width/height for displaying the preview
+	// and scale down to fit within the preview wrapper
+	const previewStyles = {
+		width: `${ srcWidth }px`,
+		height: `${ srcHeight }px`,
+		transform: 'scale(' + previewScale + ')',
+	};
 
+	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
+		// Retrieve the actual width of the element which wraps the preview
+		// note: this is not the preview itself, but the wrapper element
 		const destWidth = previewRef.current.offsetWidth;
 
-		// Calculate the scale factor necessary to size down the preview thumbnail.
+		// Calculate the scale factor necessary to size down the preview thumbnail
+		// so that it fits within the preview wrapper element
 		const scale = Math.min( destWidth / srcWidth ) || 1;
 
-		setPreviewDimensions( {
-			width: `${ srcWidth }px`, // 400x300 is provided as a 4:3 aspect ratio fallback.
-			height: `${ srcHeight }px`,
-			transform: 'scale(' + scale + ')',
-		} );
-
-		// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
-		// The preview is then absolutely positioned on top of this, creating a visual unit.
-		const aspectPadding = Math.round( srcHeight / srcWidth * 100 );
-		setPreviewAspect( {
-			paddingTop: aspectPadding + '%',
-		} );
+		setPreviewScale( scale );
 	}, [ srcWidth, srcHeight ] );
 
 	return (
-		<div ref={ previewRef } style={ previewAspect } className="editor-block-preview__container" aria-hidden>
-			<Disabled style={ previewDimensions } className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper">
+		<div ref={ previewRef } style={ aspectPadding } className="editor-block-preview__container" aria-hidden>
+			<Disabled style={ previewStyles } className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper">
 				<BlockEditorProvider
 					value={ castArray( blocks ) }
 					settings={ settings }

From 62e110956f6cc7aedecf84bc53e5a980b5c1efd7 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 31 Jul 2019 10:15:25 +0100
Subject: [PATCH 12/81] Add some padding to the preview

Avoids Blocks butting up against the edges of the preview, especially if the preview wrapper has rounded corners which can cause the Blocks to be clipped.
---
 packages/block-editor/src/components/block-preview/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 5ed243fddb077d..fb9f8ab36effeb 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -55,7 +55,7 @@
 	// Resetting paddings, margins, and other.
 	text-align: initial;
 	margin: 0;
-	padding: 0;
+	padding: $block-padding;
 	overflow: visible;
 	min-height: auto;
 

From e822ae71d9106644e88466d2e122ce1795ebdf5f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 31 Jul 2019 10:18:36 +0100
Subject: [PATCH 13/81] Refactor to utilise JS template strings

---
 packages/block-editor/src/components/block-preview/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 3f0d8993b982ea..073f855500e0c7 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -39,7 +39,7 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 	const previewStyles = {
 		width: `${ srcWidth }px`,
 		height: `${ srcHeight }px`,
-		transform: 'scale(' + previewScale + ')',
+		transform: `scale(${ previewScale })`,
 	};
 
 	// Dynamically calculate the scale factor

From 04648b4ae61440f8685232c803c1d6f148546b68 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 31 Jul 2019 11:40:25 +0100
Subject: [PATCH 14/81] WIP: Adds zoom for small individual blocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With small individual Blocks showing the preview at “actual size” (even when scaled to fit) is a bit odd. Everything still looks very zoomed out and far away.

Updates to check DOM for largest element within the Block and use that width to calculate a “zoomed” scale value so that the contents of the Block itself is shown zoomed in.

Still WIP
---
 .../src/components/block-preview/index.js     | 65 +++++++++++++++++--
 1 file changed, 60 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 073f855500e0c7..3994b7db1a7389 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -1,15 +1,16 @@
 /**
  * External dependencies
  */
+
 import { castArray } from 'lodash';
-import React from 'react';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState, useRef } from '@wordpress/element';
+import { useLayoutEffect, useState, useRef, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,7 +18,16 @@ import { useLayoutEffect, useState, useRef } from '@wordpress/element';
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
+const ScaledPreview = forwardRef( ( props, ref ) => {
+	return (
+		<div className="special-wrapper-element" ref={ ref }>
+			<BlockList />
+		</div>
+	);
+} );
+
+export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, allowZoom = true } ) {
+
 	if ( ! blocks ) {
 		return null;
 	}
@@ -25,9 +35,12 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 	// Used to dynamically retrieve the width of the element
 	// which wraps the preview
 	const previewRef = useRef( null );
+	const blocksRef = useRef( null );
 
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 
+	const [ isPreviewZoomed, setIsPreviewZoomed ] = useState( false );
+
 	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
 	// The preview is then absolutely positioned on top of this, creating a visual unit.
 	const aspectPadding = {
@@ -55,14 +68,56 @@ export function BlockPreview( { blocks, settings, srcWidth, srcHeight } ) {
 		setPreviewScale( scale );
 	}, [ srcWidth, srcHeight ] );
 
+	useLayoutEffect( () => {
+		let timeout;
+
+		if ( allowZoom && blocksRef && blocksRef.current ) {
+			timeout = setTimeout( () => {
+				let targetElements = Array.from( blocksRef.current.querySelectorAll( '[data-block] > div > div > *' ) );
+
+				if ( ! targetElements ) {
+					return;
+				}
+
+				targetElements = targetElements.filter( ( el ) => ! el.classList.contains( 'components-base-control' ) );
+
+				const largestBlockElWidth = targetElements.reduce( ( largestWidth, currrentEl ) => {
+					const elWidth = currrentEl.offsetWidth;
+
+					largestWidth = ( elWidth > largestWidth ) ? elWidth : largestWidth;
+
+					return largestWidth;
+				}, 0 );
+
+				if ( largestBlockElWidth ) {
+					const destWidth = previewRef.current.offsetWidth;
+					const scale = Math.min( destWidth / largestBlockElWidth ) || 1;
+
+					setPreviewScale( scale );
+					setIsPreviewZoomed( true );
+				}
+			}, 2000 );
+		}
+
+		return () => {
+			if ( timeout ) {
+				clearTimeout( timeout );
+			}
+		};
+	} );
+
+	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
+		'is-zoomed': isPreviewZoomed,
+	} );
+
 	return (
 		<div ref={ previewRef } style={ aspectPadding } className="editor-block-preview__container" aria-hidden>
-			<Disabled style={ previewStyles } className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper">
+			<Disabled style={ previewStyles } className={ contentClassNames }>
 				<BlockEditorProvider
 					value={ castArray( blocks ) }
 					settings={ settings }
 				>
-					<BlockList />
+					<ScaledPreview ref={ blocksRef } />
 				</BlockEditorProvider>
 			</Disabled>
 		</div>

From a6f6e3882db5edc892c9f607184541b4d37df76e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 31 Jul 2019 12:09:26 +0100
Subject: [PATCH 15/81] Updates to target block contents more reliably and to
 calc entire box model in width

---
 .../src/components/block-preview/index.js      | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 3994b7db1a7389..91f5ff3244dc92 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -73,16 +73,28 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 
 		if ( allowZoom && blocksRef && blocksRef.current ) {
 			timeout = setTimeout( () => {
-				let targetElements = Array.from( blocksRef.current.querySelectorAll( '[data-block] > div > div > *' ) );
+				let targetElements = Array.from( blocksRef.current.querySelectorAll( '[data-block] *' ) );
 
 				if ( ! targetElements ) {
 					return;
 				}
 
-				targetElements = targetElements.filter( ( el ) => ! el.classList.contains( 'components-base-control' ) );
+				targetElements = targetElements.filter( ( el ) => {
+					return Array.from( el.classList ).filter( ( theClass ) => theClass.includes( 'wp-block-' ) ).length;
+				} );
 
 				const largestBlockElWidth = targetElements.reduce( ( largestWidth, currrentEl ) => {
-					const elWidth = currrentEl.offsetWidth;
+					// const elWidth = currrentEl.offsetWidth;
+					let elWidth = 0;
+					const computed = window.getComputedStyle( currrentEl );
+
+					elWidth += parseFloat( computed.width );
+					elWidth += parseFloat( computed.paddingLeft );
+					elWidth += parseFloat( computed.paddingRight );
+					elWidth += parseFloat( computed.marginLeft );
+					elWidth += parseFloat( computed.marginRight );
+					elWidth += parseFloat( computed.borderLeftWidth );
+					elWidth += parseFloat( computed.borderRightWidth );
 
 					largestWidth = ( elWidth > largestWidth ) ? elWidth : largestWidth;
 

From 6f5c06f7d5ee2c40aa34c93e026cac65a0164227 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 31 Jul 2019 18:36:19 -0300
Subject: [PATCH 16/81] block-preview: render scaled preview in a shadow dom

---
 package-lock.json                                   | 13 +++++++++++++
 package.json                                        |  3 ++-
 .../src/components/block-preview/index.js           |  5 +++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 04093ff7f7b4fa..e34fff0a58a591 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12445,6 +12445,11 @@
 				"ms": "^2.0.0"
 			}
 		},
+		"humps": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+			"integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
+		},
 		"husky": {
 			"version": "0.14.3",
 			"resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
@@ -21336,6 +21341,14 @@
 			"integrity": "sha512-ITw8t/HOFNose2yf1y9pPFSSeB9ISOq2JdHpuZvj/Qb+iSsLml8GkkHdDlURzieO7B3dFDtMrrneZLl3N5z/hg==",
 			"dev": true
 		},
+		"react-shadow": {
+			"version": "17.1.2",
+			"resolved": "https://registry.npmjs.org/react-shadow/-/react-shadow-17.1.2.tgz",
+			"integrity": "sha512-MORJx0GNmEIYFWdqKfB0jDqtWuM9buyMX/cTAISEZGRjvGl0zfrAme2amC5nqoSwzpRRcbVxU4y2pBIvte6+5Q==",
+			"requires": {
+				"humps": "^2.0.1"
+			}
+		},
 		"react-spring": {
 			"version": "8.0.20",
 			"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.20.tgz",
diff --git a/package.json b/package.json
index 360c76bff716d9..e8c1ce17920714 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,8 @@
 		"@wordpress/token-list": "file:packages/token-list",
 		"@wordpress/url": "file:packages/url",
 		"@wordpress/viewport": "file:packages/viewport",
-		"@wordpress/wordcount": "file:packages/wordcount"
+		"@wordpress/wordcount": "file:packages/wordcount",
+		"react-shadow": "17.1.2"
 	},
 	"devDependencies": {
 		"@babel/core": "7.4.4",
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 91f5ff3244dc92..8c9863abafbd02 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -4,6 +4,7 @@
 
 import { castArray } from 'lodash';
 import classnames from 'classnames';
+import root from 'react-shadow';
 
 /**
  * WordPress dependencies
@@ -20,9 +21,9 @@ import BlockList from '../block-list';
 
 const ScaledPreview = forwardRef( ( props, ref ) => {
 	return (
-		<div className="special-wrapper-element" ref={ ref }>
+		<root.div className="special-wrapper-element" ref={ ref }>
 			<BlockList />
-		</div>
+		</root.div>
 	);
 } );
 

From ff88234f21ae3ccfe2d990cb7b802e89cfe7325b Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 31 Jul 2019 19:06:51 -0300
Subject: [PATCH 17/81] try: setting styles to shadow dom elements

---
 .../block-editor/src/components/block-preview/style.scss     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index fb9f8ab36effeb..0632473dae9b2f 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -27,6 +27,11 @@
 
 // These rules ensure the preview scales smoothly regardless of the container size.
 .editor-block-preview__container {
+	.special-wrapper-element::shadow .editor-block-list__layout {
+		border: 1px solid $dark-gray-300;
+		box-shadow: 2px 2px 5px $dark-gray-300;
+	}
+
 	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
 	// This positioning enables the content to sit on top of that padding to fit.
 	position: relative;

From 770ff2d0078242fc56b32593a99e3c4e712d61e0 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 09:17:42 +0100
Subject: [PATCH 18/81] Revert "try: setting styles to shadow dom elements"

This reverts commit ea573f9dd0401356ebab81b9df3e5079baf5de66.

The reason being that there is no benefit of using shadow DOM and it introduces additional complexity.
---
 package-lock.json                                   | 13 -------------
 package.json                                        |  3 +--
 .../src/components/block-preview/index.js           |  5 ++---
 .../src/components/block-preview/style.scss         |  5 -----
 4 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e34fff0a58a591..04093ff7f7b4fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12445,11 +12445,6 @@
 				"ms": "^2.0.0"
 			}
 		},
-		"humps": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
-			"integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
-		},
 		"husky": {
 			"version": "0.14.3",
 			"resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
@@ -21341,14 +21336,6 @@
 			"integrity": "sha512-ITw8t/HOFNose2yf1y9pPFSSeB9ISOq2JdHpuZvj/Qb+iSsLml8GkkHdDlURzieO7B3dFDtMrrneZLl3N5z/hg==",
 			"dev": true
 		},
-		"react-shadow": {
-			"version": "17.1.2",
-			"resolved": "https://registry.npmjs.org/react-shadow/-/react-shadow-17.1.2.tgz",
-			"integrity": "sha512-MORJx0GNmEIYFWdqKfB0jDqtWuM9buyMX/cTAISEZGRjvGl0zfrAme2amC5nqoSwzpRRcbVxU4y2pBIvte6+5Q==",
-			"requires": {
-				"humps": "^2.0.1"
-			}
-		},
 		"react-spring": {
 			"version": "8.0.20",
 			"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.20.tgz",
diff --git a/package.json b/package.json
index e8c1ce17920714..360c76bff716d9 100644
--- a/package.json
+++ b/package.json
@@ -61,8 +61,7 @@
 		"@wordpress/token-list": "file:packages/token-list",
 		"@wordpress/url": "file:packages/url",
 		"@wordpress/viewport": "file:packages/viewport",
-		"@wordpress/wordcount": "file:packages/wordcount",
-		"react-shadow": "17.1.2"
+		"@wordpress/wordcount": "file:packages/wordcount"
 	},
 	"devDependencies": {
 		"@babel/core": "7.4.4",
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 8c9863abafbd02..91f5ff3244dc92 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -4,7 +4,6 @@
 
 import { castArray } from 'lodash';
 import classnames from 'classnames';
-import root from 'react-shadow';
 
 /**
  * WordPress dependencies
@@ -21,9 +20,9 @@ import BlockList from '../block-list';
 
 const ScaledPreview = forwardRef( ( props, ref ) => {
 	return (
-		<root.div className="special-wrapper-element" ref={ ref }>
+		<div className="special-wrapper-element" ref={ ref }>
 			<BlockList />
-		</root.div>
+		</div>
 	);
 } );
 
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 0632473dae9b2f..fb9f8ab36effeb 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -27,11 +27,6 @@
 
 // These rules ensure the preview scales smoothly regardless of the container size.
 .editor-block-preview__container {
-	.special-wrapper-element::shadow .editor-block-list__layout {
-		border: 1px solid $dark-gray-300;
-		box-shadow: 2px 2px 5px $dark-gray-300;
-	}
-
 	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
 	// This positioning enables the content to sit on top of that padding to fit.
 	position: relative;

From a55e988e7d3d67ef46a7e2458518eb702ee93f9f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 09:26:08 +0100
Subject: [PATCH 19/81] Removes attempt at auto zoom on Block contents
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After much experimenting we’ve decided that attempting to reliably detect the visual size of the Block’s visual contents is impossible. This is due to inconsistencies in the DOM markup of each Block.

See https://github.com/WordPress/gutenberg/pull/16113#issuecomment-516916262
---
 .../src/components/block-preview/index.js     | 70 ++-----------------
 1 file changed, 4 insertions(+), 66 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 91f5ff3244dc92..242b23b9869068 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -10,7 +10,7 @@ import classnames from 'classnames';
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState, useRef, forwardRef } from '@wordpress/element';
+import { useLayoutEffect, useState, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,16 +18,7 @@ import { useLayoutEffect, useState, useRef, forwardRef } from '@wordpress/elemen
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-const ScaledPreview = forwardRef( ( props, ref ) => {
-	return (
-		<div className="special-wrapper-element" ref={ ref }>
-			<BlockList />
-		</div>
-	);
-} );
-
-export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, allowZoom = true } ) {
-
+export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300 } ) {
 	if ( ! blocks ) {
 		return null;
 	}
@@ -35,12 +26,9 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 	// Used to dynamically retrieve the width of the element
 	// which wraps the preview
 	const previewRef = useRef( null );
-	const blocksRef = useRef( null );
 
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 
-	const [ isPreviewZoomed, setIsPreviewZoomed ] = useState( false );
-
 	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
 	// The preview is then absolutely positioned on top of this, creating a visual unit.
 	const aspectPadding = {
@@ -68,58 +56,8 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 		setPreviewScale( scale );
 	}, [ srcWidth, srcHeight ] );
 
-	useLayoutEffect( () => {
-		let timeout;
-
-		if ( allowZoom && blocksRef && blocksRef.current ) {
-			timeout = setTimeout( () => {
-				let targetElements = Array.from( blocksRef.current.querySelectorAll( '[data-block] *' ) );
-
-				if ( ! targetElements ) {
-					return;
-				}
-
-				targetElements = targetElements.filter( ( el ) => {
-					return Array.from( el.classList ).filter( ( theClass ) => theClass.includes( 'wp-block-' ) ).length;
-				} );
-
-				const largestBlockElWidth = targetElements.reduce( ( largestWidth, currrentEl ) => {
-					// const elWidth = currrentEl.offsetWidth;
-					let elWidth = 0;
-					const computed = window.getComputedStyle( currrentEl );
-
-					elWidth += parseFloat( computed.width );
-					elWidth += parseFloat( computed.paddingLeft );
-					elWidth += parseFloat( computed.paddingRight );
-					elWidth += parseFloat( computed.marginLeft );
-					elWidth += parseFloat( computed.marginRight );
-					elWidth += parseFloat( computed.borderLeftWidth );
-					elWidth += parseFloat( computed.borderRightWidth );
-
-					largestWidth = ( elWidth > largestWidth ) ? elWidth : largestWidth;
-
-					return largestWidth;
-				}, 0 );
-
-				if ( largestBlockElWidth ) {
-					const destWidth = previewRef.current.offsetWidth;
-					const scale = Math.min( destWidth / largestBlockElWidth ) || 1;
-
-					setPreviewScale( scale );
-					setIsPreviewZoomed( true );
-				}
-			}, 2000 );
-		}
-
-		return () => {
-			if ( timeout ) {
-				clearTimeout( timeout );
-			}
-		};
-	} );
-
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
-		'is-zoomed': isPreviewZoomed,
+		'is-scaled': previewScale !== 1,
 	} );
 
 	return (
@@ -129,7 +67,7 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 					value={ castArray( blocks ) }
 					settings={ settings }
 				>
-					<ScaledPreview ref={ blocksRef } />
+					<BlockList />
 				</BlockEditorProvider>
 			</Disabled>
 		</div>

From 7755b5bbcbbcea81b23980205a4360cfda410901 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 09:29:24 +0100
Subject: [PATCH 20/81] Updates to remove scale by default in favour of opt in
 via prop

As discussed here https://github.com/WordPress/gutenberg/pull/16113#issuecomment-516917681, there is little point in having thumbnail preview and large popover preview showing the same thing.

Update to introduce a prop to opt in to scaling the preview. By default the preview is no auto-scaled.

Apply `true` value to `BlockPreview` to ensure that Block Styles popover preview is scaled to fit.
---
 packages/block-editor/src/components/block-preview/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 242b23b9869068..4b71183d6d82a0 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -18,7 +18,7 @@ import { useLayoutEffect, useState, useRef } from '@wordpress/element';
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300 } ) {
+export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, scaleToFit = false } ) {
 	if ( ! blocks ) {
 		return null;
 	}
@@ -45,6 +45,9 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
+		if ( ! scaleToFit ) {
+			return;
+		}
 		// Retrieve the actual width of the element which wraps the preview
 		// note: this is not the preview itself, but the wrapper element
 		const destWidth = previewRef.current.offsetWidth;

From 94b6e3d3c73f4dff984c29d3d6b3c333a961c3af Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 09:35:40 +0100
Subject: [PATCH 21/81] Adds scaleFactor prop to provide control for non
 dynamically scaled preview

---
 packages/block-editor/src/components/block-preview/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 4b71183d6d82a0..cddd1cb83ea6e3 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -18,7 +18,7 @@ import { useLayoutEffect, useState, useRef } from '@wordpress/element';
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, scaleToFit = false } ) {
+export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, scaleFactor = 0.9, scaleToFit = false } ) {
 	if ( ! blocks ) {
 		return null;
 	}
@@ -27,7 +27,7 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 	// which wraps the preview
 	const previewRef = useRef( null );
 
-	const [ previewScale, setPreviewScale ] = useState( 1 );
+	const [ previewScale, setPreviewScale ] = useState( scaleFactor );
 
 	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
 	// The preview is then absolutely positioned on top of this, creating a visual unit.

From cffd2e8b4a4e1e40f9be1f00400c123ff3e0cd1e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 09:36:17 +0100
Subject: [PATCH 22/81] Adjust scaleFactor for Block Styles preview

---
 packages/block-editor/src/components/block-styles/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 727fb10c6ebc4c..f992a8621b1743 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -129,6 +129,7 @@ function BlockStyles( {
 								} ) }
 								srcWidth={ 400 }
 								srcHeight={ 300 }
+								scaleFactor={ 0.6 }
 
 							/>
 						</div>

From 550f99e16bf4cb6447e534d407e595ca33140f07 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 10:17:46 +0100
Subject: [PATCH 23/81] Fix to ensure hooks are called unconditionally to obey
 rules of Hooks

See https://reactjs.org/docs/hooks-rules.html
---
 .../src/components/block-preview/index.js     | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index cddd1cb83ea6e3..c0546812ed0363 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -18,31 +18,14 @@ import { useLayoutEffect, useState, useRef } from '@wordpress/element';
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, scaleFactor = 0.9, scaleToFit = false } ) {
-	if ( ! blocks ) {
-		return null;
-	}
 
+export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, scaleFactor = 0.9, scaleToFit = false } ) {
 	// Used to dynamically retrieve the width of the element
 	// which wraps the preview
 	const previewRef = useRef( null );
 
 	const [ previewScale, setPreviewScale ] = useState( scaleFactor );
 
-	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
-	// The preview is then absolutely positioned on top of this, creating a visual unit.
-	const aspectPadding = {
-		paddingTop: Math.round( srcHeight / srcWidth * 100 ) + '%',
-	};
-
-	// Set the predefined optimal width/height for displaying the preview
-	// and scale down to fit within the preview wrapper
-	const previewStyles = {
-		width: `${ srcWidth }px`,
-		height: `${ srcHeight }px`,
-		transform: `scale(${ previewScale })`,
-	};
-
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
 		if ( ! scaleToFit ) {
@@ -59,8 +42,27 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 		setPreviewScale( scale );
 	}, [ srcWidth, srcHeight ] );
 
+	if ( ! blocks ) {
+		return null;
+	}
+
+	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
+	// The preview is then absolutely positioned on top of this, creating a visual unit.
+	const aspectPadding = {
+		paddingTop: Math.round( srcHeight / srcWidth * 100 ) + '%',
+	};
+
+	// Set the predefined optimal width/height for displaying the preview
+	// and scale down to fit within the preview wrapper
+	const previewStyles = {
+		width: `${ srcWidth }px`,
+		height: `${ srcHeight }px`,
+		transform: `scale(${ previewScale })`,
+	};
+
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
 		'is-scaled': previewScale !== 1,
+		'is-dynamically-scaled': scaleToFit && previewScale !== scaleFactor,
 	} );
 
 	return (

From c5c707940cbca58569c13cacc73ccbbfaece9dd0 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 10:25:25 +0100
Subject: [PATCH 24/81] Removes padding and border from preview on designer
 advice

---
 packages/block-editor/src/components/block-preview/style.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index fb9f8ab36effeb..ca4f3b9b982549 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -10,8 +10,6 @@
 	}
 
 	.block-editor-block-preview__content {
-		padding: $block-padding;
-		border: $border-width solid $light-gray-500;
 		font-family: $editor-font;
 
 		> div {

From 14891481f2569fff0ac79cb19ad0343ba424b00f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 1 Aug 2019 10:43:06 +0100
Subject: [PATCH 25/81] Only apply dimensions to preview content when
 dynamically scaling

---
 .../src/components/block-preview/index.js        | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index c0546812ed0363..da51cfb6894ce1 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -52,14 +52,20 @@ export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 30
 		paddingTop: Math.round( srcHeight / srcWidth * 100 ) + '%',
 	};
 
-	// Set the predefined optimal width/height for displaying the preview
-	// and scale down to fit within the preview wrapper
-	const previewStyles = {
-		width: `${ srcWidth }px`,
-		height: `${ srcHeight }px`,
+	let previewStyles = {
 		transform: `scale(${ previewScale })`,
 	};
 
+	if ( scaleToFit ) {
+		// Set the predefined optimal width/height for displaying the preview
+		// and scale down to fit within the preview wrapper
+		previewStyles = {
+			...previewStyles,
+			width: `${ srcWidth }px`,
+			height: `${ srcHeight }px`,
+		};
+	}
+
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
 		'is-scaled': previewScale !== 1,
 		'is-dynamically-scaled': scaleToFit && previewScale !== scaleFactor,

From 5649e518d837165aae9981e78cde23473902beac Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 02:46:14 -0300
Subject: [PATCH 26/81] block-preview: a different approach attempt.

---
 .../src/components/block-preview/index.js     | 63 ++++++++-----------
 .../src/components/block-preview/style.scss   |  9 +--
 .../src/components/block-styles/index.js      | 11 +---
 .../src/components/block-styles/style.scss    |  8 +++
 packages/block-editor/src/utils/dom.js        |  9 +++
 packages/block-library/src/button/edit.js     |  1 +
 packages/block-library/src/pullquote/edit.js  |  1 +
 packages/block-library/src/table/edit.js      |  2 +-
 8 files changed, 49 insertions(+), 55 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index da51cfb6894ce1..0ff7d9696b0cc6 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -10,69 +10,58 @@ import classnames from 'classnames';
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState, useRef } from '@wordpress/element';
+import { useLayoutEffect, useState, useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
+import { getClockPreviewContainerDOMNode } from '../../utils/dom';
 
-
-export function BlockPreview( { blocks, settings, srcWidth = 400, srcHeight = 300, scaleFactor = 0.9, scaleToFit = false } ) {
-	// Used to dynamically retrieve the width of the element
-	// which wraps the preview
+export function BlockPreview( { blocks, settings } ) {
 	const previewRef = useRef( null );
 
-	const [ previewScale, setPreviewScale ] = useState( scaleFactor );
+	const [ previewScale, setPreviewScale ] = useState( 1 );
+	const [ visibility, setVisibility ] = useState( 'hidden' );
+
+	let timerId;
 
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
-		if ( ! scaleToFit ) {
-			return;
-		}
-		// Retrieve the actual width of the element which wraps the preview
-		// note: this is not the preview itself, but the wrapper element
-		const destWidth = previewRef.current.offsetWidth;
-
-		// Calculate the scale factor necessary to size down the preview thumbnail
-		// so that it fits within the preview wrapper element
-		const scale = Math.min( destWidth / srcWidth ) || 1;
+		const { clientId } = blocks;
+		timerId = setTimeout( () => {
+			const refNode = previewRef.current;
+			const containerWidth = refNode.offsetWidth - ( 14 * 2 );
+
+			const previewDomElements = getClockPreviewContainerDOMNode( clientId );
+			const previewBlocksWidth = previewDomElements ? previewDomElements.offsetWidth : containerWidth;
+			const scale = Math.min( containerWidth / previewBlocksWidth ) || 1;
+
+			setPreviewScale( scale );
+			setVisibility( 'visible' );
+		}, 10 );
+	} );
 
-		setPreviewScale( scale );
-	}, [ srcWidth, srcHeight ] );
+	useEffect( () => {
+		return () => window.clearTimeout( timerId );
+	} );
 
 	if ( ! blocks ) {
 		return null;
 	}
 
-	// We use a top-padding to create a responsively sized element with the same aspect ratio as the preview.
-	// The preview is then absolutely positioned on top of this, creating a visual unit.
-	const aspectPadding = {
-		paddingTop: Math.round( srcHeight / srcWidth * 100 ) + '%',
-	};
-
-	let previewStyles = {
+	const previewStyles = {
 		transform: `scale(${ previewScale })`,
+		visibility,
 	};
 
-	if ( scaleToFit ) {
-		// Set the predefined optimal width/height for displaying the preview
-		// and scale down to fit within the preview wrapper
-		previewStyles = {
-			...previewStyles,
-			width: `${ srcWidth }px`,
-			height: `${ srcHeight }px`,
-		};
-	}
-
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
 		'is-scaled': previewScale !== 1,
-		'is-dynamically-scaled': scaleToFit && previewScale !== scaleFactor,
 	} );
 
 	return (
-		<div ref={ previewRef } style={ aspectPadding } className="editor-block-preview__container" aria-hidden>
+		<div ref={ previewRef } className="editor-block-preview__container" aria-hidden>
 			<Disabled style={ previewStyles } className={ contentClassNames }>
 				<BlockEditorProvider
 					value={ castArray( blocks ) }
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index ca4f3b9b982549..2ab3e5c2863c5c 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -32,10 +32,6 @@
 	// 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%;
-
-	// This ensures that content evne if it overlaps the preview container is properly clipped.
-	// This is mostly for previews that include arbitrary content.
-	overflow: hidden;
 }
 
 .block-editor-block-preview__content {
@@ -44,8 +40,8 @@
 
 	// Position above the padding.
 	position: absolute;
-	top: 0;
-	left: 0;
+	top: $block-padding;
+	left: $block-padding;
 
 	// Important to set the origin.
 	transform-origin: top left;
@@ -53,7 +49,6 @@
 	// Resetting paddings, margins, and other.
 	text-align: initial;
 	margin: 0;
-	padding: $block-padding;
 	overflow: visible;
 	min-height: auto;
 
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index f992a8621b1743..c5f7797aa1db84 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -122,16 +122,7 @@ function BlockStyles( {
 						aria-label={ style.label || style.name }
 					>
 						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
-							<BlockPreview
-								isScaled
-								blocks={ cloneBlock( block, {
-									className: styleClassName,
-								} ) }
-								srcWidth={ 400 }
-								srcHeight={ 300 }
-								scaleFactor={ 0.6 }
-
-							/>
+							<BlockPreview blocks={ cloneBlock( block, { className: styleClassName } ) } />
 						</div>
 						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
 							{ style.label || style.name }
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 0080cd2a4347cd..d700060dd7815c 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -12,6 +12,7 @@
 	overflow: hidden;
 	border-radius: $radius-round-rectangle;
 	padding: $grid-size-small * 1.5;
+	padding-top: calc(50% * 0.75 - #{ $grid-size-small } * 1.5);
 
 	&:focus {
 		@include block-style__focus();
@@ -39,6 +40,13 @@
 	display: flex;
 	overflow: hidden;
 	background: $white;
+	padding-top: 75%;
+	margin-top: -75%;
+
+	.editor-block-preview__container {
+		padding-top: 75%;
+		margin-top: -75%;
+	}
 }
 
 .block-editor-block-styles__item-label {
diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index f6d3328d2fd86b..398a465367eca5 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -11,6 +11,15 @@ export function getBlockDOMNode( clientId ) {
 	return document.querySelector( '[data-block="' + clientId + '"]' );
 }
 
+export function getClockPreviewContainerDOMNode( clientId ) {
+	const domNode = getBlockDOMNode( clientId );
+	if ( ! domNode ) {
+		return;
+	}
+
+	return domNode.querySelector( '.wp-block-preview-container' );
+}
+
 /**
  * Given a block client ID, returns the corresponding DOM node for the block
  * focusable wrapper, if exists. As much as possible, this helper should be
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index b258486b989203..110dcf5362b4ee 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -117,6 +117,7 @@ class ButtonEdit extends Component {
 					onChange={ ( value ) => setAttributes( { text: value } ) }
 					withoutInteractiveFormatting
 					className={ classnames(
+						'wp-block-preview-container',
 						'wp-block-button__link', {
 							'has-background': backgroundColor.color,
 							[ backgroundColor.class ]: backgroundColor.class,
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index cd5acddd1ace6f..0aa28ed70d8cb6 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -75,6 +75,7 @@ class PullQuoteEdit extends Component {
 		return (
 			<>
 				<figure style={ figureStyle } className={ classnames(
+					'wp-block-preview-container',
 					className, {
 						[ mainColor.class ]: isSolidColorStyle && mainColor.class,
 					} ) }>
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 6c44a305a9375a..43fe33685c89fd 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -591,7 +591,7 @@ export class TableEdit extends Component {
 						] }
 					/>
 				</InspectorControls>
-				<figure className={ className }>
+				<figure className={ classnames( className, 'wp-block-preview-container' ) }>
 					<table className={ tableClasses }>
 						<Section name="head" rows={ head } />
 						<Section name="body" rows={ body } />

From c4d3843f3f322790491666bba460787db5cba2eb Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 09:57:51 +0100
Subject: [PATCH 27/81] Correct typo in util function name

---
 packages/block-editor/src/components/block-preview/index.js | 4 ++--
 packages/block-editor/src/utils/dom.js                      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 0ff7d9696b0cc6..0355fdae00dcb4 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -17,7 +17,7 @@ import { useLayoutEffect, useState, useRef, useEffect } from '@wordpress/element
  */
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
-import { getClockPreviewContainerDOMNode } from '../../utils/dom';
+import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 
 export function BlockPreview( { blocks, settings } ) {
 	const previewRef = useRef( null );
@@ -34,7 +34,7 @@ export function BlockPreview( { blocks, settings } ) {
 			const refNode = previewRef.current;
 			const containerWidth = refNode.offsetWidth - ( 14 * 2 );
 
-			const previewDomElements = getClockPreviewContainerDOMNode( clientId );
+			const previewDomElements = getBlockPreviewContainerDOMNode( clientId );
 			const previewBlocksWidth = previewDomElements ? previewDomElements.offsetWidth : containerWidth;
 			const scale = Math.min( containerWidth / previewBlocksWidth ) || 1;
 
diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index 398a465367eca5..12d4b61086ea5a 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -11,7 +11,7 @@ export function getBlockDOMNode( clientId ) {
 	return document.querySelector( '[data-block="' + clientId + '"]' );
 }
 
-export function getClockPreviewContainerDOMNode( clientId ) {
+export function getBlockPreviewContainerDOMNode( clientId ) {
 	const domNode = getBlockDOMNode( clientId );
 	if ( ! domNode ) {
 		return;

From 0bb1a3015ee84aab024bb153541e8bbb69fcf3b5 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 10:13:05 +0100
Subject: [PATCH 28/81] Seek the firstChild of the Block DOM node

---
 packages/block-editor/src/utils/dom.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index 12d4b61086ea5a..763362e2e9f3a1 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -13,11 +13,12 @@ export function getBlockDOMNode( clientId ) {
 
 export function getBlockPreviewContainerDOMNode( clientId ) {
 	const domNode = getBlockDOMNode( clientId );
+
 	if ( ! domNode ) {
 		return;
 	}
 
-	return domNode.querySelector( '.wp-block-preview-container' );
+	return domNode.firstChild || domNode;
 }
 
 /**

From 8d7738152feaa87ad6796c6b40e41e91219a3248 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 10:14:12 +0100
Subject: [PATCH 29/81] Tidy up effect timers and improve comments

---
 .../src/components/block-preview/index.js     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 0355fdae00dcb4..835f595366bf70 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -10,7 +10,7 @@ import classnames from 'classnames';
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState, useRef, useEffect } from '@wordpress/element';
+import { useLayoutEffect, useState, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,14 +25,17 @@ export function BlockPreview( { blocks, settings } ) {
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 	const [ visibility, setVisibility ] = useState( 'hidden' );
 
-	let timerId;
-
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
 		const { clientId } = blocks;
-		timerId = setTimeout( () => {
+
+		// this.props.setTimeout( () => {
+		// Timer - required to account for async render of `BlockEditorProvider`
+		const timerId = setTimeout( () => {
+			window.clearTimeout( timerId );
 			const refNode = previewRef.current;
-			const containerWidth = refNode.offsetWidth - ( 14 * 2 );
+			const blockHozPadding = ( 14 * 2 ); // Todo - use getComputedStyle to grab the real dimensions!
+			const containerWidth = refNode.offsetWidth - blockHozPadding;
 
 			const previewDomElements = getBlockPreviewContainerDOMNode( clientId );
 			const previewBlocksWidth = previewDomElements ? previewDomElements.offsetWidth : containerWidth;
@@ -41,10 +44,13 @@ export function BlockPreview( { blocks, settings } ) {
 			setPreviewScale( scale );
 			setVisibility( 'visible' );
 		}, 10 );
-	} );
 
-	useEffect( () => {
-		return () => window.clearTimeout( timerId );
+		// Cleanup
+		return () => {
+			if ( timerId ) {
+				window.clearTimeout( timerId );
+			}
+		};
 	} );
 
 	if ( ! blocks ) {

From 4def13236cd7fd85ee6be9a6ff876bb30e269853 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 10:36:20 +0100
Subject: [PATCH 30/81] Dynamically calculate widths and offsets of preview
 container

Removes hardcoded values.
---
 .../src/components/block-preview/index.js     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 835f595366bf70..96732d7422144a 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -29,17 +29,28 @@ export function BlockPreview( { blocks, settings } ) {
 	useLayoutEffect( () => {
 		const { clientId } = blocks;
 
-		// this.props.setTimeout( () => {
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
 			window.clearTimeout( timerId );
 			const refNode = previewRef.current;
-			const blockHozPadding = ( 14 * 2 ); // Todo - use getComputedStyle to grab the real dimensions!
-			const containerWidth = refNode.offsetWidth - blockHozPadding;
 
+			if ( ! refNode ) {
+				return;
+			}
+
+			// Detect any offset on the preview content as we will need to account for that in the "width"
+			// calcultions below
+			const previewContentComputed = window.getComputedStyle( refNode.firstChild );
+			const previewContentOffset = parseFloat( previewContentComputed.top ) + parseFloat( previewContentComputed.left );
+
+			// Determine the rendered width of the container
+			const previewContainerWidth = refNode.offsetWidth - previewContentOffset;
+
+			// Attempt to get a handle on the DOM node that represents the _visual_ portion of the Block's
+			// content.
 			const previewDomElements = getBlockPreviewContainerDOMNode( clientId );
-			const previewBlocksWidth = previewDomElements ? previewDomElements.offsetWidth : containerWidth;
-			const scale = Math.min( containerWidth / previewBlocksWidth ) || 1;
+			const previewBlocksWidth = previewDomElements ? previewDomElements.offsetWidth : previewContainerWidth;
+			const scale = Math.min( previewContainerWidth / previewBlocksWidth ) || 1;
 
 			setPreviewScale( scale );
 			setVisibility( 'visible' );

From ea1d096ba42128eb4c44f268ca6d97542de2a040 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 11:09:21 +0100
Subject: [PATCH 31/81] Updates to account for widths of all Blocks passed into
 to preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Preivously we only considered a single Block scenario. However, the recent addition of multi block support for Previews means we need to ensure we’re measuring the widths of _all_ Blocks.
---
 .../src/components/block-preview/index.js     | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 96732d7422144a..7cb039d298cd68 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -20,6 +20,8 @@ import BlockList from '../block-list';
 import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 
 export function BlockPreview( { blocks, settings } ) {
+	blocks = castArray( blocks );
+
 	const previewRef = useRef( null );
 
 	const [ previewScale, setPreviewScale ] = useState( 1 );
@@ -27,7 +29,7 @@ export function BlockPreview( { blocks, settings } ) {
 
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
-		const { clientId } = blocks;
+		const blockClientIds = blocks.map( ( block ) => block.clientId );
 
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
@@ -46,11 +48,16 @@ export function BlockPreview( { blocks, settings } ) {
 			// Determine the rendered width of the container
 			const previewContainerWidth = refNode.offsetWidth - previewContentOffset;
 
-			// Attempt to get a handle on the DOM node that represents the _visual_ portion of the Block's
-			// content.
-			const previewDomElements = getBlockPreviewContainerDOMNode( clientId );
-			const previewBlocksWidth = previewDomElements ? previewDomElements.offsetWidth : previewContainerWidth;
-			const scale = Math.min( previewContainerWidth / previewBlocksWidth ) || 1;
+			const comparisonBlockWidth = blockClientIds.reduce( ( acc, currClientId ) => {
+				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId );
+
+				if ( previewDomElement && previewDomElement.offsetWidth > acc ) {
+					acc = previewDomElement.offsetWidth;
+				}
+				return acc;
+			}, previewContainerWidth );
+
+			const scale = Math.min( previewContainerWidth / comparisonBlockWidth ) || 1;
 
 			setPreviewScale( scale );
 			setVisibility( 'visible' );
@@ -81,7 +88,7 @@ export function BlockPreview( { blocks, settings } ) {
 		<div ref={ previewRef } className="editor-block-preview__container" aria-hidden>
 			<Disabled style={ previewStyles } className={ contentClassNames }>
 				<BlockEditorProvider
-					value={ castArray( blocks ) }
+					value={ blocks }
 					settings={ settings }
 				>
 					<BlockList />

From 02e69f5c1e85c67eab312be9cae1503b4c966bdd Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 11:54:49 +0100
Subject: [PATCH 32/81] Revert class additions to Blocks

---
 packages/block-library/src/button/edit.js    | 1 -
 packages/block-library/src/pullquote/edit.js | 1 -
 packages/block-library/src/table/edit.js     | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 110dcf5362b4ee..b258486b989203 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -117,7 +117,6 @@ class ButtonEdit extends Component {
 					onChange={ ( value ) => setAttributes( { text: value } ) }
 					withoutInteractiveFormatting
 					className={ classnames(
-						'wp-block-preview-container',
 						'wp-block-button__link', {
 							'has-background': backgroundColor.color,
 							[ backgroundColor.class ]: backgroundColor.class,
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 0aa28ed70d8cb6..cd5acddd1ace6f 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -75,7 +75,6 @@ class PullQuoteEdit extends Component {
 		return (
 			<>
 				<figure style={ figureStyle } className={ classnames(
-					'wp-block-preview-container',
 					className, {
 						[ mainColor.class ]: isSolidColorStyle && mainColor.class,
 					} ) }>
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 43fe33685c89fd..6c44a305a9375a 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -591,7 +591,7 @@ export class TableEdit extends Component {
 						] }
 					/>
 				</InspectorControls>
-				<figure className={ classnames( className, 'wp-block-preview-container' ) }>
+				<figure className={ className }>
 					<table className={ tableClasses }>
 						<Section name="head" rows={ head } />
 						<Section name="body" rows={ body } />

From 52084affd8964d0f08eccc9d8b18294e21284b3c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 12:04:56 +0100
Subject: [PATCH 33/81] Adds optional scope to DOM utils. Use to limit scope in
 Block width comparison.

---
 .../block-editor/src/components/block-preview/index.js   | 4 +++-
 packages/block-editor/src/utils/dom.js                   | 9 +++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 7cb039d298cd68..1d9bcd4add8817 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -49,7 +49,9 @@ export function BlockPreview( { blocks, settings } ) {
 			const previewContainerWidth = refNode.offsetWidth - previewContentOffset;
 
 			const comparisonBlockWidth = blockClientIds.reduce( ( acc, currClientId ) => {
-				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId );
+				// Selector scoped to `refNode` to avoid global selector being ambiguous in the case
+				// of multiple previews on the same view
+				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId, refNode );
 
 				if ( previewDomElement && previewDomElement.offsetWidth > acc ) {
 					acc = previewDomElement.offsetWidth;
diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index 763362e2e9f3a1..fd732b40c5318d 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -4,15 +4,16 @@
  * in cases where isolated behaviors need remote access to a block node.
  *
  * @param {string} clientId Block client ID.
+ * @param {Element} scope an optional DOM Element to which the selector should be scoped
  *
  * @return {Element} Block DOM node.
  */
-export function getBlockDOMNode( clientId ) {
-	return document.querySelector( '[data-block="' + clientId + '"]' );
+export function getBlockDOMNode( clientId, scope = document ) {
+	return scope.querySelector( '[data-block="' + clientId + '"]' );
 }
 
-export function getBlockPreviewContainerDOMNode( clientId ) {
-	const domNode = getBlockDOMNode( clientId );
+export function getBlockPreviewContainerDOMNode( clientId, scope ) {
+	const domNode = getBlockDOMNode( clientId, scope );
 
 	if ( ! domNode ) {
 		return;

From 6d0a85d56bba4ad8cc674b4af79b648aa5dc71a1 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 12:07:18 +0100
Subject: [PATCH 34/81] Update
 packages/block-editor/src/components/block-preview/index.js

Co-Authored-By: Riad Benguella <benguella@gmail.com>
---
 packages/block-editor/src/components/block-preview/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 1d9bcd4add8817..9ed42c8079117e 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-
 import { castArray } from 'lodash';
 import classnames from 'classnames';
 

From 3ed1f99c1310287565c9e3fb86e6057687f66a7e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 12:23:03 +0100
Subject: [PATCH 35/81] Allow prop based opt out from scaling

---
 packages/block-editor/src/components/block-preview/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 9ed42c8079117e..0269d06802781e 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -18,7 +18,7 @@ import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 
-export function BlockPreview( { blocks, settings } ) {
+export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 	blocks = castArray( blocks );
 
 	const previewRef = useRef( null );
@@ -28,6 +28,9 @@ export function BlockPreview( { blocks, settings } ) {
 
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
+		if ( ! scaleToFit ) {
+			return;
+		}
 		const blockClientIds = blocks.map( ( block ) => block.clientId );
 
 		// Timer - required to account for async render of `BlockEditorProvider`

From 7c867420b5f1d129039328b9784be838c9fb1260 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 12:29:11 +0100
Subject: [PATCH 36/81] Fix to ensure smallest Block is found even if smaller
 than container

Preivously we were default to the container width being the largest item. In fact we always want to determine the largest Block contents element and use that to determine the scale.
---
 packages/block-editor/src/components/block-preview/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 0269d06802781e..fdfadd144b8618 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -59,7 +59,7 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 					acc = previewDomElement.offsetWidth;
 				}
 				return acc;
-			}, previewContainerWidth );
+			}, 0 );
 
 			const scale = Math.min( previewContainerWidth / comparisonBlockWidth ) || 1;
 

From efa2127e53802a1623a04ef1fd9f4437f41cd2b5 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 2 Aug 2019 12:49:40 +0100
Subject: [PATCH 37/81] Remove unecessary Math.min usage

---
 packages/block-editor/src/components/block-preview/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index fdfadd144b8618..1fe2ed6fb8289a 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -61,7 +61,7 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 				return acc;
 			}, 0 );
 
-			const scale = Math.min( previewContainerWidth / comparisonBlockWidth ) || 1;
+			const scale = previewContainerWidth / comparisonBlockWidth || 1;
 
 			setPreviewScale( scale );
 			setVisibility( 'visible' );

From 595cf03115576d9708a2b7ea93f5324bfb7181ef Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 10:14:10 -0300
Subject: [PATCH 38/81] core/button: adjust dims of button wrapper

---
 packages/block-library/src/button/edit.js    | 4 ++++
 packages/block-library/src/button/style.scss | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index b258486b989203..e70cc00b278540 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -33,6 +33,10 @@ import {
 const { getComputedStyle } = window;
 
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
+	if ( node ) {
+		node.classList.add( 'wp-block-button-wrapper' );
+	}
+
 	const { textColor, backgroundColor } = ownProps;
 	const backgroundColorValue = backgroundColor && backgroundColor.color;
 	const textColorValue = textColor && textColor.color;
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 1ba7da6425f5f2..e3b2a18a18342b 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -48,3 +48,11 @@ $blocks-button__height: 56px;
 		border: 2px solid;
 	}
 }
+
+.wp-block-button-wrapper {
+	display: table;
+}
+
+.block-editor-block-list__block.is-selected .wp-block-button-wrapper {
+	width: 100%;
+}

From 6941688e383751ee3db362024a205d271663d238 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 11:27:15 -0300
Subject: [PATCH 39/81] apply vertical alignment

---
 .../src/components/block-preview/index.js      | 18 +++++++++++-------
 .../src/components/block-preview/style.scss    |  9 +++++++--
 .../src/components/block-styles/index.js       |  2 +-
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 1fe2ed6fb8289a..a23534666bbcab 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -42,13 +42,17 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 				return;
 			}
 
-			// Detect any offset on the preview content as we will need to account for that in the "width"
-			// calcultions below
-			const previewContentComputed = window.getComputedStyle( refNode.firstChild );
-			const previewContentOffset = parseFloat( previewContentComputed.top ) + parseFloat( previewContentComputed.left );
+			// Detect any offset on the preview content as we will need
+			// to account for that in the "width" calculations below
+			// const previewContentComputed = window.getComputedStyle( refNode.firstChild );
+			// const previewContentOffset = parseFloat( previewContentComputed.top ) + parseFloat( previewContentComputed.left );
 
 			// Determine the rendered width of the container
-			const previewContainerWidth = refNode.offsetWidth - previewContentOffset;
+			// const previewContainerWidth = refNode.offsetWidth - previewContentOffset;
+			const previewContainerWidth = refNode.offsetWidth;
+
+			// Adjust the final computed scale if it's desired.
+			const scaleAdjustment = 0.5;
 
 			const comparisonBlockWidth = blockClientIds.reduce( ( acc, currClientId ) => {
 				// Selector scoped to `refNode` to avoid global selector being ambiguous in the case
@@ -61,7 +65,7 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 				return acc;
 			}, 0 );
 
-			const scale = previewContainerWidth / comparisonBlockWidth || 1;
+			const scale = ( previewContainerWidth / comparisonBlockWidth || 1 ) * scaleAdjustment;
 
 			setPreviewScale( scale );
 			setVisibility( 'visible' );
@@ -80,7 +84,7 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 	}
 
 	const previewStyles = {
-		transform: `scale(${ previewScale })`,
+		transform: `scale(${ previewScale }) translate(-50%, -50%)`,
 		visibility,
 	};
 
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 2ab3e5c2863c5c..6f632c049d6c8a 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -12,6 +12,9 @@
 	.block-editor-block-preview__content {
 		font-family: $editor-font;
 
+		// Vertical alignment.
+		margin-top: 50%;
+
 		> div {
 			font-family: $editor-font;
 		}
@@ -40,8 +43,10 @@
 
 	// Position above the padding.
 	position: absolute;
-	top: $block-padding;
-	left: $block-padding;
+
+	// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
+	top: 50%;
+	left: 50%;
 
 	// Important to set the origin.
 	transform-origin: top left;
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index c5f7797aa1db84..8cc4e8694c5b4d 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -116,7 +116,7 @@ function BlockStyles( {
 							}
 						} }
 						onMouseEnter={ () => onHoverClassName( styleClassName ) }
-						onMouseLeave={ () => onHoverClassName( null ) }
+						// onMouseLeave={ () => onHoverClassName( null ) }
 						role="button"
 						tabIndex="0"
 						aria-label={ style.label || style.name }

From d7e7b4affc72c55055709674bf688a960ceb5569 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 11:28:40 -0300
Subject: [PATCH 40/81] set scale factor to 0.9

---
 packages/block-editor/src/components/block-preview/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index a23534666bbcab..8914e655461402 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -52,7 +52,7 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 			const previewContainerWidth = refNode.offsetWidth;
 
 			// Adjust the final computed scale if it's desired.
-			const scaleAdjustment = 0.5;
+			const scaleAdjustment = 0.9;
 
 			const comparisonBlockWidth = blockClientIds.reduce( ( acc, currClientId ) => {
 				// Selector scoped to `refNode` to avoid global selector being ambiguous in the case

From 6a7c6d9728804b38acdbb29c4e50b5b2300d2aa6 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 11:45:19 -0300
Subject: [PATCH 41/81] rollback testing purpose comment

---
 packages/block-editor/src/components/block-styles/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 8cc4e8694c5b4d..c5f7797aa1db84 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -116,7 +116,7 @@ function BlockStyles( {
 							}
 						} }
 						onMouseEnter={ () => onHoverClassName( styleClassName ) }
-						// onMouseLeave={ () => onHoverClassName( null ) }
+						onMouseLeave={ () => onHoverClassName( null ) }
 						role="button"
 						tabIndex="0"
 						aria-label={ style.label || style.name }

From 0fab9b246e0a2835cd57d967f7f81cebc9454118 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 12:47:53 -0300
Subject: [PATCH 42/81] cpre/button: keep adjusting styles for preview

---
 packages/block-library/src/button/style.scss | 33 +++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index e3b2a18a18342b..ec30d18bde0ff1 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -49,10 +49,33 @@ $blocks-button__height: 56px;
 	}
 }
 
-.wp-block-button-wrapper {
-	display: table;
-}
+// Tweak styles for the Preview.
+.editor-block-preview__container {
+	.wp-block-button-wrapper,
+	.wp-block-button {
+		display: table;
+	}
+
+	.wp-block-button {
+		text-align: justify;
+	}
+
+	[data-type="core/button"].wp-block {
+		width: auto;
+		height: auto;
 
-.block-editor-block-list__block.is-selected .wp-block-button-wrapper {
-	width: 100%;
+		> .block-editor-block-list__block-edit {
+			float: none;
+			margin: 0;
+		}
+	}
+
+	.editor-styles-wrapper [data-block] {
+		margin: 0;
+	}
+
+	.block-editor-block-list__insertion-point,
+	.wp-block-button__inline-link {
+		display: none;
+	}
 }

From 0f0d6b8860e054821109fc9ea39d467f867c518b Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 16:40:29 -0300
Subject: [PATCH 43/81] rename vars and css class names

---
 .../src/components/block-preview/index.js        | 16 +++++-----------
 .../src/components/block-preview/style.scss      |  4 ++--
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 8914e655461402..198d23475c2cf6 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -36,28 +36,22 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
 			window.clearTimeout( timerId );
-			const refNode = previewRef.current;
+			const previewContainerDomElement = previewRef.current;
 
-			if ( ! refNode ) {
+			if ( ! previewContainerDomElement ) {
 				return;
 			}
 
-			// Detect any offset on the preview content as we will need
-			// to account for that in the "width" calculations below
-			// const previewContentComputed = window.getComputedStyle( refNode.firstChild );
-			// const previewContentOffset = parseFloat( previewContentComputed.top ) + parseFloat( previewContentComputed.left );
-
 			// Determine the rendered width of the container
-			// const previewContainerWidth = refNode.offsetWidth - previewContentOffset;
-			const previewContainerWidth = refNode.offsetWidth;
+			const previewContainerWidth = previewContainerDomElement.offsetWidth;
 
 			// Adjust the final computed scale if it's desired.
 			const scaleAdjustment = 0.9;
 
 			const comparisonBlockWidth = blockClientIds.reduce( ( acc, currClientId ) => {
-				// Selector scoped to `refNode` to avoid global selector being ambiguous in the case
+				// Selector scoped to `previewContainerDomElement` to avoid global selector being ambiguous in the case
 				// of multiple previews on the same view
-				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId, refNode );
+				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId, previewContainerDomElement );
 
 				if ( previewDomElement && previewDomElement.offsetWidth > acc ) {
 					acc = previewDomElement.offsetWidth;
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 6f632c049d6c8a..88a273730daaaf 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -9,7 +9,7 @@
 		display: block;
 	}
 
-	.block-editor-block-preview__content {
+	.editor-block-preview__content {
 		font-family: $editor-font;
 
 		// Vertical alignment.
@@ -37,7 +37,7 @@
 	width: 100%;
 }
 
-.block-editor-block-preview__content {
+.editor-block-preview__content {
 	// This element receives inline styles for width, height, and transform-scale.
 	// Those inline styles are calculated to fit a perfect thumbnail.
 

From d11b6ab3bed3c241a24c3339e057e76374a46346 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 18:37:57 -0300
Subject: [PATCH 44/81] adjust rebase

---
 .../src/components/block-preview/index.js           | 13 ++++++++-----
 .../src/components/block-preview/style.scss         |  6 ++++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 198d23475c2cf6..de2b3480b24d63 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -18,7 +18,13 @@ import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 
-export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
+export function BlockPreview( {
+	blocks,
+	settings,
+	scaleToFit = true,
+	scaleAdjustment = 1,
+	isScaled = true,
+} ) {
 	blocks = castArray( blocks );
 
 	const previewRef = useRef( null );
@@ -45,9 +51,6 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 			// Determine the rendered width of the container
 			const previewContainerWidth = previewContainerDomElement.offsetWidth;
 
-			// Adjust the final computed scale if it's desired.
-			const scaleAdjustment = 0.9;
-
 			const comparisonBlockWidth = blockClientIds.reduce( ( acc, currClientId ) => {
 				// Selector scoped to `previewContainerDomElement` to avoid global selector being ambiguous in the case
 				// of multiple previews on the same view
@@ -83,7 +86,7 @@ export function BlockPreview( { blocks, settings, scaleToFit = true } ) {
 	};
 
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
-		'is-scaled': previewScale !== 1,
+		'is-scaled': isScaled,
 	} );
 
 	return (
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 88a273730daaaf..6b262f0b3fc08d 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -1,9 +1,11 @@
 // This is the preview that shows up to the right of the thumbnail when hovering.
-.block-editor-block-preview {
+.block-editor-block-switcher__preview {
 	padding: $block-padding;
 	font-family: $editor-font;
 	overflow: hidden;
 	width: 100%;
+	pointer-events: none;
+	display: none;
 
 	@include break-medium {
 		display: block;
@@ -72,7 +74,7 @@
 
 	&.is-scaled {
 		> div {
-			transform: scale(0.9);
+			transform: scale(0.3);
 			transform-origin: center top;
 		}
 	}

From d39c1d7c80a4c3bd6d9fe0d0544dee715f6d1d1a Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 18:40:39 -0300
Subject: [PATCH 45/81] restore isScaled factor scale

---
 packages/block-editor/src/components/block-preview/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 6b262f0b3fc08d..bc5264e7fb0174 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -74,7 +74,7 @@
 
 	&.is-scaled {
 		> div {
-			transform: scale(0.3);
+			transform: scale(0.9);
 			transform-origin: center top;
 		}
 	}

From 55cd6628251bd0e8535c47acd51a1745d090c060 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 18:50:28 -0300
Subject: [PATCH 46/81] set the scale adjustment in the proper place

---
 packages/block-editor/src/components/block-preview/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index de2b3480b24d63..d3ec7200b80389 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -62,7 +62,7 @@ export function BlockPreview( {
 				return acc;
 			}, 0 );
 
-			const scale = ( previewContainerWidth / comparisonBlockWidth || 1 ) * scaleAdjustment;
+			const scale = previewContainerWidth / comparisonBlockWidth || 1;
 
 			setPreviewScale( scale );
 			setVisibility( 'visible' );
@@ -81,7 +81,7 @@ export function BlockPreview( {
 	}
 
 	const previewStyles = {
-		transform: `scale(${ previewScale }) translate(-50%, -50%)`,
+		transform: `scale(${ previewScale * scaleAdjustment }) translate(-50%, -50%)`,
 		visibility,
 	};
 

From b942fb91ef171779c835047e7ab2af97398f3f74 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 2 Aug 2019 18:54:22 -0300
Subject: [PATCH 47/81] update README file

---
 .../src/components/block-preview/README.md           | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-editor/src/components/block-preview/README.md b/packages/block-editor/src/components/block-preview/README.md
index 10aaec2dd4001c..088071fc6cabb4 100644
--- a/packages/block-editor/src/components/block-preview/README.md
+++ b/packages/block-editor/src/components/block-preview/README.md
@@ -27,3 +27,15 @@ A block instance (object) or a blocks array you would like to render a preview.
 * **Default:** `false`
 
 Use this if you need to render previews in smaller areas, like block thumbnails.
+
+### `scaleAdjustment`
+* **Type:** `number`
+* **Default:** 1 
+
+Use this to adjust the scale to the desired factor. For instance, 0.5 will reduce the size to 50%.
+
+### `scaleToFit`
+* **Type:** `boolean`
+* **Default:** true
+
+Use this to adjust the blocks to fit inside the preview viewport.

From 0ab14f8370766c663f6482a1aa8052fd6147b7e8 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 10:23:58 -0300
Subject: [PATCH 48/81] core/button: tidy edit preview styles

---
 packages/block-library/src/button/editor.scss | 57 +++++++++++++------
 packages/block-library/src/button/style.scss  | 31 ----------
 2 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 9fe1a9afabd1bd..658329a62dc01f 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -39,22 +39,6 @@
 	[data-rich-text-placeholder]::after {
 		opacity: 0.8;
 	}
-
-	// Don't let the placeholder text wrap in the variation preview.
-	.block-editor-block-preview__content & {
-		max-width: 100%;
-
-		.wp-block-button__link {
-			max-width: 100%;
-			overflow: hidden;
-			// Override is allowed here only because the rich text instance in
-			// a preview is not editable.
-			// To do: use the `save` function to preview a block transform, not
-			// the `edit` function.
-			white-space: nowrap !important;
-			text-overflow: ellipsis;
-		}
-	}
 }
 
 .wp-block-button__inline-link {
@@ -91,3 +75,44 @@
 		margin-top: $grid-size-large;
 	}
 }
+
+// Tweak styles for the Preview.
+.block-editor-block-preview__content {
+	.wp-block-button-wrapper,
+	.wp-block-button {
+		display: table;
+	}
+
+	.wp-block-button {
+		text-align: left;
+	}
+
+	[data-type="core/button"].wp-block {
+		width: auto;
+		height: auto;
+
+		> .block-editor-block-list__block-edit {
+			float: none;
+			margin: 0;
+		}
+	}
+
+	.editor-styles-wrapper [data-block] {
+		margin: 0;
+	}
+
+	.block-editor-block-list__insertion-point {
+		display: none;
+	}
+
+	.block-editor-block-preview__content & {
+		max-width: 100%;
+		overflow: hidden;
+		// Override is allowed here only because the rich text instance in
+		// a preview is not editable.
+		// To do: use the `save` function to preview a block transform, not
+		// the `edit` function.
+		white-space: nowrap !important;
+		text-overflow: ellipsis;
+	}
+}
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index ec30d18bde0ff1..1ba7da6425f5f2 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -48,34 +48,3 @@ $blocks-button__height: 56px;
 		border: 2px solid;
 	}
 }
-
-// Tweak styles for the Preview.
-.editor-block-preview__container {
-	.wp-block-button-wrapper,
-	.wp-block-button {
-		display: table;
-	}
-
-	.wp-block-button {
-		text-align: justify;
-	}
-
-	[data-type="core/button"].wp-block {
-		width: auto;
-		height: auto;
-
-		> .block-editor-block-list__block-edit {
-			float: none;
-			margin: 0;
-		}
-	}
-
-	.editor-styles-wrapper [data-block] {
-		margin: 0;
-	}
-
-	.block-editor-block-list__insertion-point,
-	.wp-block-button__inline-link {
-		display: none;
-	}
-}

From c86f750a1b956356f580f16d12c3b0d0a3872c44 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 12:58:24 -0300
Subject: [PATCH 49/81] coer/button: tweak button preview

---
 packages/block-library/src/button/editor.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 658329a62dc01f..56e1c0bc107a96 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -80,7 +80,7 @@
 .block-editor-block-preview__content {
 	.wp-block-button-wrapper,
 	.wp-block-button {
-		display: table;
+		display: block;
 	}
 
 	.wp-block-button {
@@ -88,7 +88,7 @@
 	}
 
 	[data-type="core/button"].wp-block {
-		width: auto;
+		max-width: 150px;
 		height: auto;
 
 		> .block-editor-block-list__block-edit {

From 18ded7d2890d4c8a57bf3d619377f00173186467 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 14:14:05 -0300
Subject: [PATCH 50/81] preview-block: ensure make the preview visible.

---
 packages/block-editor/src/components/block-preview/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index d3ec7200b80389..bc9d7427cb2079 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -35,6 +35,7 @@ export function BlockPreview( {
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
 		if ( ! scaleToFit ) {
+			setVisibility( 'visible' );
 			return;
 		}
 		const blockClientIds = blocks.map( ( block ) => block.clientId );

From 0b7de1622eed75bf8dea943e62c862b83e71f22c Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 14:15:23 -0300
Subject: [PATCH 51/81] block-preview: hide dropzone

---
 packages/block-editor/src/components/block-preview/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index bc5264e7fb0174..ea02ae6d827350 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -65,7 +65,7 @@
 	}
 
 	.editor-block-list__block-edit [data-block] {
-		margin-top: 0;
+		margin: 0;
 	}
 
 	> div section {
@@ -79,6 +79,7 @@
 		}
 	}
 
+	.block-editor-block-drop-zone,
 	.reusable-block-indicator,
 	.block-list-appender {
 		display: none;

From 354d42c44a45a64caa637bbc4ef2522c4cd64c54 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 14:16:58 -0300
Subject: [PATCH 52/81] core/button: adjust preview for thumb and full sizes

---
 packages/block-library/src/button/editor.scss | 18 +++++++++++++++++-
 packages/block-library/src/quote/editor.scss  | 12 ++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 56e1c0bc107a96..e7a2dc3330a7f8 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -88,8 +88,10 @@
 	}
 
 	[data-type="core/button"].wp-block {
-		max-width: 150px;
+		//max-width: 150px;
+		//width: auto;
 		height: auto;
+		//width: 100%;
 
 		> .block-editor-block-list__block-edit {
 			float: none;
@@ -116,3 +118,17 @@
 		text-overflow: ellipsis;
 	}
 }
+
+// Preview Thumbnail.
+.block-editor-block-styles__item .block-editor-block-preview__content {
+	[data-type="core/button"].wp-block {
+		max-width: 150px;
+	}
+}
+
+// Right Popover preview.
+.block-editor-block-switcher__preview .block-editor-block-preview__content {
+	[data-type="core/button"].wp-block {
+		width: auto;
+	}
+}
diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss
index 12455da81199b9..8bdeb09f221c0b 100644
--- a/packages/block-library/src/quote/editor.scss
+++ b/packages/block-library/src/quote/editor.scss
@@ -1,3 +1,15 @@
 .wp-block-quote__citation {
 	font-size: $default-font-size;
 }
+
+// Tweak Preview styles in the Styles.
+.block-editor-block-preview__content {
+	.wp-block-quote {
+		display: block;
+		margin: 0;
+	}
+
+	[data-type="core/quote"].wp-block {
+		max-width: 300px;
+	}
+}

From d70011f8062f02f9a6f5399094eac0ac4b40a4b1 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 16:30:04 -0300
Subject: [PATCH 53/81] core/button: set same width for preview

---
 packages/block-library/src/button/editor.scss | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index e7a2dc3330a7f8..033a6c0024fb50 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -118,17 +118,3 @@
 		text-overflow: ellipsis;
 	}
 }
-
-// Preview Thumbnail.
-.block-editor-block-styles__item .block-editor-block-preview__content {
-	[data-type="core/button"].wp-block {
-		max-width: 150px;
-	}
-}
-
-// Right Popover preview.
-.block-editor-block-switcher__preview .block-editor-block-preview__content {
-	[data-type="core/button"].wp-block {
-		width: auto;
-	}
-}

From 608947870722685274ce24e0e1ba24ce46a072cb Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 19:20:05 -0300
Subject: [PATCH 54/81] core/button: because it's !important

---
 packages/block-library/src/button/editor.scss | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 033a6c0024fb50..bf6a65e4bfe2ea 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -78,9 +78,11 @@
 
 // Tweak styles for the Preview.
 .block-editor-block-preview__content {
-	.wp-block-button-wrapper,
+	//.wp-block-button-wrapper {
+	//}
+
 	.wp-block-button {
-		display: block;
+		display: table;
 	}
 
 	.wp-block-button {
@@ -88,10 +90,7 @@
 	}
 
 	[data-type="core/button"].wp-block {
-		//max-width: 150px;
-		//width: auto;
 		height: auto;
-		//width: 100%;
 
 		> .block-editor-block-list__block-edit {
 			float: none;
@@ -118,3 +117,22 @@
 		text-overflow: ellipsis;
 	}
 }
+
+// Preview Thumbnail.
+.block-editor-block-styles__item .block-editor-block-preview__content {
+	.block-editor-rich-text__editable {
+		white-space: nowrap !important;
+	}
+
+	[data-type="core/button"].wp-block {
+		//width: calc(3.5 * (100vw / 12));
+		width: auto;
+	}
+}
+
+// Right Popover preview.
+.block-editor-block-switcher__preview .block-editor-block-preview__content {
+	[data-type="core/button"].wp-block {
+		width: auto;
+	}
+}

From dbbe0bc8c3fd98ece6faaff63fb1cbe350e3fa7d Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 21:11:19 -0300
Subject: [PATCH 55/81] core/button: set nowrap button in preview

---
 packages/block-library/src/button/editor.scss | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index bf6a65e4bfe2ea..16b3343d959b6e 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -78,22 +78,15 @@
 
 // Tweak styles for the Preview.
 .block-editor-block-preview__content {
-	//.wp-block-button-wrapper {
-	//}
 
 	.wp-block-button {
-		display: table;
-	}
-
-	.wp-block-button {
-		text-align: left;
+		display: block;
 	}
 
 	[data-type="core/button"].wp-block {
 		height: auto;
 
 		> .block-editor-block-list__block-edit {
-			float: none;
 			margin: 0;
 		}
 	}
@@ -102,6 +95,7 @@
 		margin: 0;
 	}
 
+	.wp-block-button__inline-link,
 	.block-editor-block-list__insertion-point {
 		display: none;
 	}
@@ -122,16 +116,20 @@
 .block-editor-block-styles__item .block-editor-block-preview__content {
 	.block-editor-rich-text__editable {
 		white-space: nowrap !important;
+		margin-top: 6px;
 	}
 
 	[data-type="core/button"].wp-block {
-		//width: calc(3.5 * (100vw / 12));
 		width: auto;
 	}
 }
 
-// Right Popover preview.
+// Preview Popover.
 .block-editor-block-switcher__preview .block-editor-block-preview__content {
+	.block-editor-rich-text__editable {
+		white-space: nowrap !important;
+	}
+
 	[data-type="core/button"].wp-block {
 		width: auto;
 	}

From 758468c803a6abec1ad9aed00f240f3af44cf86d Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 21:53:08 -0300
Subject: [PATCH 56/81] core/button: set nowrap onlu for button

---
 packages/block-library/src/button/editor.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 16b3343d959b6e..c32c256c595e63 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -114,7 +114,7 @@
 
 // Preview Thumbnail.
 .block-editor-block-styles__item .block-editor-block-preview__content {
-	.block-editor-rich-text__editable {
+	.wp-block-button .block-editor-rich-text__editable {
 		white-space: nowrap !important;
 		margin-top: 6px;
 	}
@@ -126,10 +126,6 @@
 
 // Preview Popover.
 .block-editor-block-switcher__preview .block-editor-block-preview__content {
-	.block-editor-rich-text__editable {
-		white-space: nowrap !important;
-	}
-
 	[data-type="core/button"].wp-block {
 		width: auto;
 	}

From 2b71c32695a321468e394fd54649d26b63443642 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 5 Aug 2019 22:20:43 -0300
Subject: [PATCH 57/81] core/quote: adjust quote size

---
 packages/block-library/src/quote/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss
index 8bdeb09f221c0b..10bd33f0dd9491 100644
--- a/packages/block-library/src/quote/editor.scss
+++ b/packages/block-library/src/quote/editor.scss
@@ -10,6 +10,6 @@
 	}
 
 	[data-type="core/quote"].wp-block {
-		max-width: 300px;
+		width: calc(4 * (100vw / 12));
 	}
 }

From 65097d0938fb6e6bb6ef8487da0442d9fb2666c9 Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Mon, 5 Aug 2019 18:36:36 -0700
Subject: [PATCH 58/81] Make previews overflow to the bottom.

Currently still has a bug where the large `.block-editor-block-switcher__preview` pane behaves like it's previewing a taller block, when it's not
---
 .../src/components/block-preview/index.js     | 31 ++++++++++++-------
 .../src/components/block-preview/style.scss   | 12 +++++--
 2 files changed, 29 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 bc9d7427cb2079..213907bbdd3fad 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -29,6 +29,7 @@ export function BlockPreview( {
 
 	const previewRef = useRef( null );
 
+	const [ isTallPreview, setIsTallPreview ] = useState( false );
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 	const [ visibility, setVisibility ] = useState( 'hidden' );
 
@@ -43,28 +44,31 @@ export function BlockPreview( {
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
 			window.clearTimeout( timerId );
-			const previewContainerDomElement = previewRef.current;
+			const previewContainer = previewRef.current;
 
-			if ( ! previewContainerDomElement ) {
+			if ( ! previewContainer ) {
 				return;
 			}
 
-			// Determine the rendered width of the container
-			const previewContainerWidth = previewContainerDomElement.offsetWidth;
-
-			const comparisonBlockWidth = blockClientIds.reduce( ( acc, currClientId ) => {
+			const comparisonBlock = blockClientIds.reduce( ( acc, currClientId ) => {
 				// Selector scoped to `previewContainerDomElement` to avoid global selector being ambiguous in the case
 				// of multiple previews on the same view
-				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId, previewContainerDomElement );
+				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId, previewContainer );
+
+				if ( previewDomElement ) {
+					acc.height += previewDomElement.offsetHeight;
 
-				if ( previewDomElement && previewDomElement.offsetWidth > acc ) {
-					acc = previewDomElement.offsetWidth;
+					if ( previewDomElement.offsetWidth > acc.width ) {
+						acc.width = previewDomElement.offsetWidth;
+					}
 				}
+
 				return acc;
-			}, 0 );
+			}, { height: 0, width: 0 } );
 
-			const scale = previewContainerWidth / comparisonBlockWidth || 1;
+			const scale = previewContainer.offsetWidth / comparisonBlock.width || 1;
 
+			setIsTallPreview( comparisonBlock.height > previewContainer.offsetHeight );
 			setPreviewScale( scale );
 			setVisibility( 'visible' );
 		}, 10 );
@@ -86,8 +90,13 @@ export function BlockPreview( {
 		visibility,
 	};
 
+	if ( isTallPreview ) {
+		previewStyles.transform = `scale(${ previewScale * scaleAdjustment }) translate(-50%, 0)`;
+	}
+
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
 		'is-scaled': isScaled,
+		'is-tall-preview': isTallPreview,
 	} );
 
 	return (
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index ea02ae6d827350..dd8d1c79d34a29 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -14,12 +14,14 @@
 	.editor-block-preview__content {
 		font-family: $editor-font;
 
-		// Vertical alignment.
-		margin-top: 50%;
-
 		> div {
 			font-family: $editor-font;
 		}
+
+		&:not(.is-tall-preview) {
+			// Vertical alignment.
+			margin-top: 50%;
+		}
 	}
 
 	.block-editor-block-preview__title {
@@ -79,6 +81,10 @@
 		}
 	}
 
+	&.is-tall-preview {
+		top: 4px;
+	}
+
 	.block-editor-block-drop-zone,
 	.reusable-block-indicator,
 	.block-list-appender {

From 6096c3e98a87c5c7fc9e999b1ec0b8f028866be1 Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Mon, 5 Aug 2019 19:22:19 -0700
Subject: [PATCH 59/81] Revert "core/button: set nowrap onlu for button"

It breaks previews of long buttons

This reverts commit 758468c803a6abec1ad9aed00f240f3af44cf86d.
---
 packages/block-library/src/button/editor.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index c32c256c595e63..16b3343d959b6e 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -114,7 +114,7 @@
 
 // Preview Thumbnail.
 .block-editor-block-styles__item .block-editor-block-preview__content {
-	.wp-block-button .block-editor-rich-text__editable {
+	.block-editor-rich-text__editable {
 		white-space: nowrap !important;
 		margin-top: 6px;
 	}
@@ -126,6 +126,10 @@
 
 // Preview Popover.
 .block-editor-block-switcher__preview .block-editor-block-preview__content {
+	.block-editor-rich-text__editable {
+		white-space: nowrap !important;
+	}
+
 	[data-type="core/button"].wp-block {
 		width: auto;
 	}

From e1b9483a31840d24b6e80f0db104075c25e8e2a4 Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Mon, 5 Aug 2019 20:41:13 -0700
Subject: [PATCH 60/81] Fix unit test

---
 .../src/components/block-preview/test/index.js           | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/test/index.js b/packages/block-editor/src/components/block-preview/test/index.js
index b98ee94f3db934..11f257c0ba9f79 100644
--- a/packages/block-editor/src/components/block-preview/test/index.js
+++ b/packages/block-editor/src/components/block-preview/test/index.js
@@ -11,7 +11,7 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 /**
  * Internal dependencies
  */
-import { BlockPreviewContent } from '../index';
+import { BlockPreview } from '../index';
 
 describe( 'BlockPreviewContent', () => {
 	beforeAll( () => {
@@ -19,20 +19,15 @@ describe( 'BlockPreviewContent', () => {
 	} );
 
 	it( 'renders a preview with suitable default dimensions', () => {
-		const wrapper = shallow( <BlockPreviewContent
+		const wrapper = shallow( <BlockPreview
 			name="core/paragraph"
 		/> );
 
 		wrapper.update();
 
-		const previewAspectRatioStyle = wrapper.find( '.editor-block-preview__container' ).first().prop( 'style' );
 		const previewTransform = wrapper.find( '.editor-block-preview__content' ).first().prop( 'style' ).transform;
 		const previewScale = parseInt( previewTransform.match( /\d/ )[ 0 ], 10 );
 
 		expect( previewScale ).toEqual( 1 );
-
-		expect( previewAspectRatioStyle ).toEqual( {
-			paddingTop: '75%',
-		} );
 	} );
 } );

From 75d43ceb04f488c4017b235197721705befb1b15 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 06:43:58 -0300
Subject: [PATCH 61/81] core/button: apply nowrap only to buttons

---
 packages/block-library/src/button/editor.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 16b3343d959b6e..50325ffd9fe520 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -114,7 +114,7 @@
 
 // Preview Thumbnail.
 .block-editor-block-styles__item .block-editor-block-preview__content {
-	.block-editor-rich-text__editable {
+	.wp-block-button .block-editor-rich-text__editable {
 		white-space: nowrap !important;
 		margin-top: 6px;
 	}
@@ -126,7 +126,7 @@
 
 // Preview Popover.
 .block-editor-block-switcher__preview .block-editor-block-preview__content {
-	.block-editor-rich-text__editable {
+	.wp-block-button .block-editor-rich-text__editable {
 		white-space: nowrap !important;
 	}
 

From 89f6393d144ca430a9d370be8839c52149f25949 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 6 Aug 2019 11:33:26 +0100
Subject: [PATCH 62/81] Try a fixed canvas width

---
 .../src/components/block-preview/index.js     |  1 +
 .../src/components/block-preview/style.scss   |  7 +++
 packages/block-library/src/button/editor.scss | 59 -------------------
 packages/components/src/popover/index.js      |  4 +-
 4 files changed, 10 insertions(+), 61 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 213907bbdd3fad..05e46cf0a15534 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -97,6 +97,7 @@ export function BlockPreview( {
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
 		'is-scaled': isScaled,
 		'is-tall-preview': isTallPreview,
+		'is-scaled-auto': visibility === 'visible',
 	} );
 
 	return (
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index dd8d1c79d34a29..0c87c8167e2eca 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -61,6 +61,9 @@
 	overflow: visible;
 	min-height: auto;
 
+	// Width of the canvas before scaling
+	width: 700px;
+
 	.block-editor-block-list__layout,
 	.block-editor-block-list__block {
 		padding: 0;
@@ -74,6 +77,10 @@
 		height: auto;
 	}
 
+	&.is-scaled-auto {
+		width: auto;
+	}
+
 	&.is-scaled {
 		> div {
 			transform: scale(0.9);
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 50325ffd9fe520..a03babec7f4fe6 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -75,62 +75,3 @@
 		margin-top: $grid-size-large;
 	}
 }
-
-// Tweak styles for the Preview.
-.block-editor-block-preview__content {
-
-	.wp-block-button {
-		display: block;
-	}
-
-	[data-type="core/button"].wp-block {
-		height: auto;
-
-		> .block-editor-block-list__block-edit {
-			margin: 0;
-		}
-	}
-
-	.editor-styles-wrapper [data-block] {
-		margin: 0;
-	}
-
-	.wp-block-button__inline-link,
-	.block-editor-block-list__insertion-point {
-		display: none;
-	}
-
-	.block-editor-block-preview__content & {
-		max-width: 100%;
-		overflow: hidden;
-		// Override is allowed here only because the rich text instance in
-		// a preview is not editable.
-		// To do: use the `save` function to preview a block transform, not
-		// the `edit` function.
-		white-space: nowrap !important;
-		text-overflow: ellipsis;
-	}
-}
-
-// Preview Thumbnail.
-.block-editor-block-styles__item .block-editor-block-preview__content {
-	.wp-block-button .block-editor-rich-text__editable {
-		white-space: nowrap !important;
-		margin-top: 6px;
-	}
-
-	[data-type="core/button"].wp-block {
-		width: auto;
-	}
-}
-
-// Preview Popover.
-.block-editor-block-switcher__preview .block-editor-block-preview__content {
-	.wp-block-button .block-editor-rich-text__editable {
-		white-space: nowrap !important;
-	}
-
-	[data-type="core/button"].wp-block {
-		width: auto;
-	}
-}
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 1dad7be985dfb5..4663a5b61e2978 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -321,10 +321,10 @@ const Popover = ( {
 		// both `onFocusOutside` and `onClickOutside` are unspecified. Doing so
 		// assures backwards-compatibility for prior `onClickOutside` default.
 		if ( onFocusOutside ) {
-			onFocusOutside( event );
+			// onFocusOutside( event );
 			return;
 		} else if ( ! onClickOutside ) {
-			onClose();
+			// onClose();
 			return;
 		}
 

From 5a1e5ad7e4622c6c39b9d8650d408d1c6d173dd6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 6 Aug 2019 11:45:39 +0100
Subject: [PATCH 63/81] Fix blocks editor styles

---
 packages/block-library/src/button/editor.scss |  4 ++++
 packages/block-library/src/quote/editor.scss  | 12 ------------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index a03babec7f4fe6..da2116d2fc492d 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -75,3 +75,7 @@
 		margin-top: $grid-size-large;
 	}
 }
+
+.wp-block-button-wrapper {
+	display: table;
+}
diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss
index 10bd33f0dd9491..12455da81199b9 100644
--- a/packages/block-library/src/quote/editor.scss
+++ b/packages/block-library/src/quote/editor.scss
@@ -1,15 +1,3 @@
 .wp-block-quote__citation {
 	font-size: $default-font-size;
 }
-
-// Tweak Preview styles in the Styles.
-.block-editor-block-preview__content {
-	.wp-block-quote {
-		display: block;
-		margin: 0;
-	}
-
-	[data-type="core/quote"].wp-block {
-		width: calc(4 * (100vw / 12));
-	}
-}

From 3d47db8f8b482dca36c6ac9f85303a00d59eee40 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 09:25:58 -0300
Subject: [PATCH 64/81] core/button: centering preview

---
 packages/block-library/src/button/editor.scss | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index da2116d2fc492d..83e42baa0dd259 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -76,6 +76,20 @@
 	}
 }
 
-.wp-block-button-wrapper {
-	display: table;
+// Tweak styles for the Preview.
+.block-editor-block-preview__content {
+	.wp-block-button-wrapper {
+		display: table;
+		margin: 0 auto;
+		text-align: center;
+	}
+
+	.block-editor-block-list__layout .block-editor-block-list__block[data-align] .block-editor-block-list__block-edit {
+		float: none;
+		margin: 0;
+	}
+
+	[data-type="core/button"].wp-block {
+		height: auto;
+	}
 }

From 27b430f64777a0203cad489e26762caf85c8649b Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 11:15:32 -0300
Subject: [PATCH 65/81] core/button: adjust only into teh styles preview

---
 packages/block-library/src/button/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 83e42baa0dd259..f1a83bab0bb92b 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -77,7 +77,7 @@
 }
 
 // Tweak styles for the Preview.
-.block-editor-block-preview__content {
+.block-editor-block-styles__item-preview .block-editor-block-preview__content {
 	.wp-block-button-wrapper {
 		display: table;
 		margin: 0 auto;

From d21df0bf5d05aa4ef5e5b97f98f510807a5172de Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 11:16:25 -0300
Subject: [PATCH 66/81] block-preview: remove scaleAdjustment property

---
 packages/block-editor/src/components/block-preview/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 05e46cf0a15534..3bf8b22839c6f7 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -22,7 +22,6 @@ export function BlockPreview( {
 	blocks,
 	settings,
 	scaleToFit = true,
-	scaleAdjustment = 1,
 	isScaled = true,
 } ) {
 	blocks = castArray( blocks );
@@ -86,12 +85,12 @@ export function BlockPreview( {
 	}
 
 	const previewStyles = {
-		transform: `scale(${ previewScale * scaleAdjustment }) translate(-50%, -50%)`,
+		transform: `scale(${ previewScale }) translate(-50%, -50%)`,
 		visibility,
 	};
 
 	if ( isTallPreview ) {
-		previewStyles.transform = `scale(${ previewScale * scaleAdjustment }) translate(-50%, 0)`;
+		previewStyles.transform = `scale(${ previewScale }) translate(-50%, 0)`;
 	}
 
 	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {

From d8212f28532d34d44bb660b1d7aef982407d2de8 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 13:48:19 -0300
Subject: [PATCH 67/81] block-preview: hide inserte element in preview

---
 packages/block-editor/src/components/block-preview/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 0c87c8167e2eca..00dee6a1ff18df 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -92,6 +92,7 @@
 		top: 4px;
 	}
 
+	.block-editor-block-list__insertion-point,
 	.block-editor-block-drop-zone,
 	.reusable-block-indicator,
 	.block-list-appender {

From 2b1a11196d1daa271033e84df722584941e1fb97 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 14:04:48 -0300
Subject: [PATCH 68/81] block-preview: just pick up the first block to scale

---
 .../src/components/block-preview/index.js     | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 3bf8b22839c6f7..c4705262c73351 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -38,7 +38,6 @@ export function BlockPreview( {
 			setVisibility( 'visible' );
 			return;
 		}
-		const blockClientIds = blocks.map( ( block ) => block.clientId );
 
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
@@ -49,27 +48,20 @@ export function BlockPreview( {
 				return;
 			}
 
-			const comparisonBlock = blockClientIds.reduce( ( acc, currClientId ) => {
-				// Selector scoped to `previewContainerDomElement` to avoid global selector being ambiguous in the case
-				// of multiple previews on the same view
-				const previewDomElement = getBlockPreviewContainerDOMNode( currClientId, previewContainer );
+			// comparisonBlock
+			const block = blocks[ 0 ];
+			const previewElement = getBlockPreviewContainerDOMNode( block.clientId, previewContainer );
+			if ( previewElement ) {
+				const containerElementWidth = previewContainer.offsetWidth;
+				const previewElementHeight = previewElement.offsetHeight;
+				const previewElementWidth = previewElement.offsetWidth;
 
-				if ( previewDomElement ) {
-					acc.height += previewDomElement.offsetHeight;
+				const scale = containerElementWidth / previewElementWidth || 1;
 
-					if ( previewDomElement.offsetWidth > acc.width ) {
-						acc.width = previewDomElement.offsetWidth;
-					}
-				}
-
-				return acc;
-			}, { height: 0, width: 0 } );
-
-			const scale = previewContainer.offsetWidth / comparisonBlock.width || 1;
-
-			setIsTallPreview( comparisonBlock.height > previewContainer.offsetHeight );
-			setPreviewScale( scale );
-			setVisibility( 'visible' );
+				setIsTallPreview( previewElementHeight > previewElementHeight );
+				setPreviewScale( scale );
+				setVisibility( 'visible' );
+			}
 		}, 10 );
 
 		// Cleanup

From e50cfcbb875fa872371b962217b1036a694606cc Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 15:09:06 -0300
Subject: [PATCH 69/81] block-preview: fix set tall class. X position (wip)

---
 .../src/components/block-preview/index.js     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index c4705262c73351..9d9d9955809543 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -31,6 +31,7 @@ export function BlockPreview( {
 	const [ isTallPreview, setIsTallPreview ] = useState( false );
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 	const [ visibility, setVisibility ] = useState( 'hidden' );
+	const [ xPosition, setXPosition ] = useState( 0 );
 
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
@@ -42,24 +43,33 @@ export function BlockPreview( {
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
 			window.clearTimeout( timerId );
-			const previewContainer = previewRef.current;
+			const containerElement = previewRef.current;
 
-			if ( ! previewContainer ) {
+			if ( ! containerElement ) {
 				return;
 			}
 
 			// comparisonBlock
 			const block = blocks[ 0 ];
-			const previewElement = getBlockPreviewContainerDOMNode( block.clientId, previewContainer );
+			const previewElement = getBlockPreviewContainerDOMNode( block.clientId, containerElement );
+
 			if ( previewElement ) {
-				const containerElementWidth = previewContainer.offsetWidth;
+				// Get dimensions.
+				const containerElementWidth = containerElement.offsetWidth;
+				const containerElementHeight = containerElement.offsetHeight;
 				const previewElementHeight = previewElement.offsetHeight;
 				const previewElementWidth = previewElement.offsetWidth;
 
 				const scale = containerElementWidth / previewElementWidth || 1;
 
-				setIsTallPreview( previewElementHeight > previewElementHeight );
+				// Compute left position.
+				const scaledElementRect = previewElement.getBoundingClientRect();
+				const containerElementRect = containerElement.getBoundingClientRect();
+				const offsetX = scaledElementRect.left - containerElementRect.left;
+
+				setIsTallPreview( previewElementHeight > containerElementHeight );
 				setPreviewScale( scale );
+				// setXPosition( offsetX );
 				setVisibility( 'visible' );
 			}
 		}, 10 );
@@ -79,6 +89,7 @@ export function BlockPreview( {
 	const previewStyles = {
 		transform: `scale(${ previewScale }) translate(-50%, -50%)`,
 		visibility,
+		// left: xPosition,
 	};
 
 	if ( isTallPreview ) {

From 5208a03172a0c03b62fa917693ae08316aaf68e4 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 6 Aug 2019 15:13:01 -0300
Subject: [PATCH 70/81] popover: remove commented lines

---
 packages/components/src/popover/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 4663a5b61e2978..1dad7be985dfb5 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -321,10 +321,10 @@ const Popover = ( {
 		// both `onFocusOutside` and `onClickOutside` are unspecified. Doing so
 		// assures backwards-compatibility for prior `onClickOutside` default.
 		if ( onFocusOutside ) {
-			// onFocusOutside( event );
+			onFocusOutside( event );
 			return;
 		} else if ( ! onClickOutside ) {
-			// onClose();
+			onClose();
 			return;
 		}
 

From 029e1310aaa48ec83b39499eccf776fc7c1a361d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2019 12:03:04 +0100
Subject: [PATCH 71/81] Refactor the preview

---
 .../src/components/block-preview/README.md    | 18 ----
 .../src/components/block-preview/index.js     | 90 +++++++++----------
 .../src/components/block-preview/style.scss   | 24 ++---
 .../src/components/block-styles/style.scss    |  4 +-
 packages/block-library/src/button/editor.scss | 18 +---
 packages/components/src/popover/index.js      |  4 +-
 6 files changed, 55 insertions(+), 103 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/README.md b/packages/block-editor/src/components/block-preview/README.md
index 088071fc6cabb4..a499557d34df73 100644
--- a/packages/block-editor/src/components/block-preview/README.md
+++ b/packages/block-editor/src/components/block-preview/README.md
@@ -21,21 +21,3 @@ Render the component passing in the required props:
 * **Default:** `undefined`
 
 A block instance (object) or a blocks array you would like to render a preview.
-
-### `isScaled`
-* **Type:** `Boolean`
-* **Default:** `false`
-
-Use this if you need to render previews in smaller areas, like block thumbnails.
-
-### `scaleAdjustment`
-* **Type:** `number`
-* **Default:** 1 
-
-Use this to adjust the scale to the desired factor. For instance, 0.5 will reduce the size to 50%.
-
-### `scaleToFit`
-* **Type:** `boolean`
-* **Default:** true
-
-Use this to adjust the blocks to fit inside the preview viewport.
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 9d9d9955809543..b57b89847a6cea 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useState, useRef, useReducer, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,61 +18,63 @@ import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 
+const PREVIEW_CONTAINER_WIDTH = 700;
+
 export function BlockPreview( {
 	blocks,
 	settings,
-	scaleToFit = true,
-	isScaled = true,
 } ) {
-	blocks = castArray( blocks );
-
+	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 	const previewRef = useRef( null );
 
 	const [ isTallPreview, setIsTallPreview ] = useState( false );
+	const [ isReady, setIsReady ] = useState( false );
 	const [ previewScale, setPreviewScale ] = useState( 1 );
-	const [ visibility, setVisibility ] = useState( 'hidden' );
 	const [ xPosition, setXPosition ] = useState( 0 );
 
-	// Dynamically calculate the scale factor
-	useLayoutEffect( () => {
-		if ( ! scaleToFit ) {
-			setVisibility( 'visible' );
-			return;
-		}
+	const [ recompute, triggerRecompute ] = useReducer( ( state ) => state + 1 );
+	useEffect( () => {
+		setIsReady( false );
+		setPreviewScale( 1 );
+		setXPosition( 0 );
+		setIsTallPreview( false );
+		triggerRecompute();
+	}, [ blocks ] );
 
+	// Dynamically calculate the scale factor
+	useEffect( () => {
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
-			window.clearTimeout( timerId );
 			const containerElement = previewRef.current;
-
 			if ( ! containerElement ) {
 				return;
 			}
 
-			// comparisonBlock
-			const block = blocks[ 0 ];
-			const previewElement = getBlockPreviewContainerDOMNode( block.clientId, containerElement );
-
-			if ( previewElement ) {
-				// Get dimensions.
-				const containerElementWidth = containerElement.offsetWidth;
-				const containerElementHeight = containerElement.offsetHeight;
-				const previewElementHeight = previewElement.offsetHeight;
-				const previewElementWidth = previewElement.offsetWidth;
+			// If we're previewing a single block, scale the preview to fit it.
+			if ( renderedBlocks.length === 1 ) {
+				const block = renderedBlocks[ 0 ];
+				const previewElement = getBlockPreviewContainerDOMNode( block.clientId, containerElement );
+				if ( ! previewElement ) {
+					return;
+				}
 
-				const scale = containerElementWidth / previewElementWidth || 1;
-
-				// Compute left position.
-				const scaledElementRect = previewElement.getBoundingClientRect();
 				const containerElementRect = containerElement.getBoundingClientRect();
+				const scaledElementRect = previewElement.getBoundingClientRect();
+
+				const scale = containerElementRect.width / scaledElementRect.width || 1;
 				const offsetX = scaledElementRect.left - containerElementRect.left;
 
-				setIsTallPreview( previewElementHeight > containerElementHeight );
+				setIsTallPreview( scaledElementRect.height * scale > containerElementRect.height );
 				setPreviewScale( scale );
-				// setXPosition( offsetX );
-				setVisibility( 'visible' );
+				setXPosition( offsetX * scale );
+			} else {
+				const containerElementRect = containerElement.getBoundingClientRect();
+				setPreviewScale( containerElementRect.width / PREVIEW_CONTAINER_WIDTH );
+				setIsTallPreview( true );
 			}
-		}, 10 );
+
+			setIsReady( true );
+		}, 100 );
 
 		// Cleanup
 		return () => {
@@ -80,33 +82,29 @@ export function BlockPreview( {
 				window.clearTimeout( timerId );
 			}
 		};
-	} );
+	}, [ recompute ] );
 
-	if ( ! blocks ) {
+	if ( ! renderedBlocks || renderedBlocks.length === 0 ) {
 		return null;
 	}
 
 	const previewStyles = {
-		transform: `scale(${ previewScale }) translate(-50%, -50%)`,
-		visibility,
-		// left: xPosition,
+		transform: `scale(${ previewScale })`,
+		visibility: isReady ? 'visible' : 'hidden',
+		left: -xPosition,
+		width: PREVIEW_CONTAINER_WIDTH,
 	};
 
-	if ( isTallPreview ) {
-		previewStyles.transform = `scale(${ previewScale }) translate(-50%, 0)`;
-	}
-
-	const contentClassNames = classnames( 'editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper', {
-		'is-scaled': isScaled,
+	const contentClassNames = classnames( 'block-editor-block-preview__content editor-styles-wrapper', {
 		'is-tall-preview': isTallPreview,
-		'is-scaled-auto': visibility === 'visible',
+		'is-ready': isReady,
 	} );
 
 	return (
-		<div ref={ previewRef } className="editor-block-preview__container" aria-hidden>
+		<div ref={ previewRef } className="block-editor-block-preview__container" aria-hidden>
 			<Disabled style={ previewStyles } className={ contentClassNames }>
 				<BlockEditorProvider
-					value={ blocks }
+					value={ renderedBlocks }
 					settings={ settings }
 				>
 					<BlockList />
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 00dee6a1ff18df..76c2f4ccaf10a5 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -11,7 +11,7 @@
 		display: block;
 	}
 
-	.editor-block-preview__content {
+	.block-editor-block-preview__content {
 		font-family: $editor-font;
 
 		> div {
@@ -31,7 +31,7 @@
 }
 
 // These rules ensure the preview scales smoothly regardless of the container size.
-.editor-block-preview__container {
+.block-editor-block-preview__container {
 	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
 	// This positioning enables the content to sit on top of that padding to fit.
 	position: relative;
@@ -41,7 +41,7 @@
 	width: 100%;
 }
 
-.editor-block-preview__content {
+.block-editor-block-preview__content {
 	// This element receives inline styles for width, height, and transform-scale.
 	// Those inline styles are calculated to fit a perfect thumbnail.
 
@@ -49,8 +49,8 @@
 	position: absolute;
 
 	// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
-	top: 50%;
-	left: 50%;
+	top: 0;
+	left: 0;
 
 	// Important to set the origin.
 	transform-origin: top left;
@@ -61,9 +61,6 @@
 	overflow: visible;
 	min-height: auto;
 
-	// Width of the canvas before scaling
-	width: 700px;
-
 	.block-editor-block-list__layout,
 	.block-editor-block-list__block {
 		padding: 0;
@@ -77,17 +74,6 @@
 		height: auto;
 	}
 
-	&.is-scaled-auto {
-		width: auto;
-	}
-
-	&.is-scaled {
-		> div {
-			transform: scale(0.9);
-			transform-origin: center top;
-		}
-	}
-
 	&.is-tall-preview {
 		top: 4px;
 	}
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index d700060dd7815c..e5eb662d93b1f8 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -43,8 +43,8 @@
 	padding-top: 75%;
 	margin-top: -75%;
 
-	.editor-block-preview__container {
-		padding-top: 75%;
+	.block-editor-block-preview__container {
+		padding-top: 0;
 		margin-top: -75%;
 	}
 }
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index f1a83bab0bb92b..da2116d2fc492d 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -76,20 +76,6 @@
 	}
 }
 
-// Tweak styles for the Preview.
-.block-editor-block-styles__item-preview .block-editor-block-preview__content {
-	.wp-block-button-wrapper {
-		display: table;
-		margin: 0 auto;
-		text-align: center;
-	}
-
-	.block-editor-block-list__layout .block-editor-block-list__block[data-align] .block-editor-block-list__block-edit {
-		float: none;
-		margin: 0;
-	}
-
-	[data-type="core/button"].wp-block {
-		height: auto;
-	}
+.wp-block-button-wrapper {
+	display: table;
 }
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 1dad7be985dfb5..d50ac9712e65cd 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -321,10 +321,10 @@ const Popover = ( {
 		// both `onFocusOutside` and `onClickOutside` are unspecified. Doing so
 		// assures backwards-compatibility for prior `onClickOutside` default.
 		if ( onFocusOutside ) {
-			onFocusOutside( event );
+			//onFocusOutside( event );
 			return;
 		} else if ( ! onClickOutside ) {
-			onClose();
+			//onClose();
 			return;
 		}
 

From 72c5027c0554550d9f1be5ff247b7536442101d0 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2019 12:04:46 +0100
Subject: [PATCH 72/81] Remove debug code

---
 packages/components/src/popover/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index d50ac9712e65cd..1dad7be985dfb5 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -321,10 +321,10 @@ const Popover = ( {
 		// both `onFocusOutside` and `onClickOutside` are unspecified. Doing so
 		// assures backwards-compatibility for prior `onClickOutside` default.
 		if ( onFocusOutside ) {
-			//onFocusOutside( event );
+			onFocusOutside( event );
 			return;
 		} else if ( ! onClickOutside ) {
-			//onClose();
+			onClose();
 			return;
 		}
 

From a4958f3ede86bc3f81eef3d1d71e54e755cb2d70 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2019 12:22:10 +0100
Subject: [PATCH 73/81] simplify preview resets

---
 .../src/components/block-preview/index.js     | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index b57b89847a6cea..092bd117f1868d 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
-import { useEffect, useState, useRef, useReducer, useMemo } from '@wordpress/element';
+import { useLayoutEffect, useState, useRef, useReducer, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,11 +20,7 @@ import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 
 const PREVIEW_CONTAINER_WIDTH = 700;
 
-export function BlockPreview( {
-	blocks,
-	settings,
-} ) {
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+function ScaledBlockPreview( { blocks } ) {
 	const previewRef = useRef( null );
 
 	const [ isTallPreview, setIsTallPreview ] = useState( false );
@@ -32,17 +28,8 @@ export function BlockPreview( {
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 	const [ xPosition, setXPosition ] = useState( 0 );
 
-	const [ recompute, triggerRecompute ] = useReducer( ( state ) => state + 1 );
-	useEffect( () => {
-		setIsReady( false );
-		setPreviewScale( 1 );
-		setXPosition( 0 );
-		setIsTallPreview( false );
-		triggerRecompute();
-	}, [ blocks ] );
-
 	// Dynamically calculate the scale factor
-	useEffect( () => {
+	useLayoutEffect( () => {
 		// Timer - required to account for async render of `BlockEditorProvider`
 		const timerId = setTimeout( () => {
 			const containerElement = previewRef.current;
@@ -51,8 +38,8 @@ export function BlockPreview( {
 			}
 
 			// If we're previewing a single block, scale the preview to fit it.
-			if ( renderedBlocks.length === 1 ) {
-				const block = renderedBlocks[ 0 ];
+			if ( ! blocks.length !== 1 ) {
+				const block = blocks[ 0 ];
 				const previewElement = getBlockPreviewContainerDOMNode( block.clientId, containerElement );
 				if ( ! previewElement ) {
 					return;
@@ -82,9 +69,9 @@ export function BlockPreview( {
 				window.clearTimeout( timerId );
 			}
 		};
-	}, [ recompute ] );
+	}, [] );
 
-	if ( ! renderedBlocks || renderedBlocks.length === 0 ) {
+	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
 
@@ -103,17 +90,34 @@ export function BlockPreview( {
 	return (
 		<div ref={ previewRef } className="block-editor-block-preview__container" aria-hidden>
 			<Disabled style={ previewStyles } className={ contentClassNames }>
-				<BlockEditorProvider
-					value={ renderedBlocks }
-					settings={ settings }
-				>
-					<BlockList />
-				</BlockEditorProvider>
+				<BlockList />
 			</Disabled>
 		</div>
 	);
 }
 
+export function BlockPreview( { blocks, settings } ) {
+	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const [ recompute, triggerRecompute ] = useReducer( ( state ) => state + 1 );
+	useLayoutEffect( triggerRecompute, [ blocks ] );
+
+	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.
+				 */
+			}
+			<ScaledBlockPreview key={ recompute } blocks={ renderedBlocks } />
+		</BlockEditorProvider>
+	);
+}
+
 /**
  * BlockPreview renders a preview given an array of blocks.
  *

From 22b4d8411341b0dfc04a40d08b3af9ce2d3578b1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2019 13:04:03 +0100
Subject: [PATCH 74/81] Fix the preview recomputing

---
 packages/block-editor/src/components/block-preview/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 092bd117f1868d..2473d089c24594 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -98,9 +98,8 @@ function ScaledBlockPreview( { blocks } ) {
 
 export function BlockPreview( { blocks, settings } ) {
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
-	const [ recompute, triggerRecompute ] = useReducer( ( state ) => state + 1 );
+	const [ recompute, triggerRecompute ] = useReducer( ( state ) => state + 1, 0 );
 	useLayoutEffect( triggerRecompute, [ blocks ] );
-
 	return (
 		<BlockEditorProvider
 			value={ renderedBlocks }

From f218f6479ac7097bc161d415ae292e8605fdb05c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 7 Aug 2019 15:31:10 +0100
Subject: [PATCH 75/81] Vertical alignining small blocks

---
 .../src/components/block-preview/index.js            | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 2473d089c24594..abc5145854a7e3 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -26,7 +26,7 @@ function ScaledBlockPreview( { blocks } ) {
 	const [ isTallPreview, setIsTallPreview ] = useState( false );
 	const [ isReady, setIsReady ] = useState( false );
 	const [ previewScale, setPreviewScale ] = useState( 1 );
-	const [ xPosition, setXPosition ] = useState( 0 );
+	const [ { x, y }, setPosition ] = useState( { x: 0, y: 0 } );
 
 	// Dynamically calculate the scale factor
 	useLayoutEffect( () => {
@@ -50,10 +50,15 @@ function ScaledBlockPreview( { blocks } ) {
 
 				const scale = containerElementRect.width / scaledElementRect.width || 1;
 				const offsetX = scaledElementRect.left - containerElementRect.left;
+				const offsetY = ( containerElementRect.height > scaledElementRect.height * scale ) ?
+					( containerElementRect.height - ( scaledElementRect.height * scale ) ) / 2 : 0;
 
 				setIsTallPreview( scaledElementRect.height * scale > containerElementRect.height );
 				setPreviewScale( scale );
-				setXPosition( offsetX * scale );
+				setPosition( { x: offsetX * scale, y: offsetY } );
+
+				// Hack: we need  to reset the scaled elements margins
+				previewElement.style.marginTop = '0';
 			} else {
 				const containerElementRect = containerElement.getBoundingClientRect();
 				setPreviewScale( containerElementRect.width / PREVIEW_CONTAINER_WIDTH );
@@ -78,7 +83,8 @@ function ScaledBlockPreview( { blocks } ) {
 	const previewStyles = {
 		transform: `scale(${ previewScale })`,
 		visibility: isReady ? 'visible' : 'hidden',
-		left: -xPosition,
+		left: -x,
+		top: y,
 		width: PREVIEW_CONTAINER_WIDTH,
 	};
 

From 835c4ba6fc97930ec5d5628157bdeb272dd2f621 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 7 Aug 2019 13:47:45 -0300
Subject: [PATCH 76/81] block-editor: restore viewportWidth as a property

---
 .../src/components/block-preview/index.js        | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index abc5145854a7e3..8266015a6b7f78 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -18,9 +18,7 @@ import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 
-const PREVIEW_CONTAINER_WIDTH = 700;
-
-function ScaledBlockPreview( { blocks } ) {
+function ScaledBlockPreview( { blocks, viewportWidth } ) {
 	const previewRef = useRef( null );
 
 	const [ isTallPreview, setIsTallPreview ] = useState( false );
@@ -61,7 +59,7 @@ function ScaledBlockPreview( { blocks } ) {
 				previewElement.style.marginTop = '0';
 			} else {
 				const containerElementRect = containerElement.getBoundingClientRect();
-				setPreviewScale( containerElementRect.width / PREVIEW_CONTAINER_WIDTH );
+				setPreviewScale( containerElementRect.width / viewportWidth );
 				setIsTallPreview( true );
 			}
 
@@ -85,7 +83,7 @@ function ScaledBlockPreview( { blocks } ) {
 		visibility: isReady ? 'visible' : 'hidden',
 		left: -x,
 		top: y,
-		width: PREVIEW_CONTAINER_WIDTH,
+		width: viewportWidth,
 	};
 
 	const contentClassNames = classnames( 'block-editor-block-preview__content editor-styles-wrapper', {
@@ -102,7 +100,7 @@ function ScaledBlockPreview( { blocks } ) {
 	);
 }
 
-export function BlockPreview( { blocks, settings } ) {
+export function BlockPreview( { blocks, viewportWidth = 700, settings } ) {
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 	const [ recompute, triggerRecompute ] = useReducer( ( state ) => state + 1, 0 );
 	useLayoutEffect( triggerRecompute, [ blocks ] );
@@ -118,7 +116,11 @@ export function BlockPreview( { blocks, settings } ) {
 				 * be rerendered.
 				 */
 			}
-			<ScaledBlockPreview key={ recompute } blocks={ renderedBlocks } />
+			<ScaledBlockPreview
+				key={ recompute }
+				blocks={ renderedBlocks }
+				viewportWidth={ viewportWidth }
+			/>
 		</BlockEditorProvider>
 	);
 }

From 3fe45d7027214b60fa6c71bf96887e9c656951dd Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Wed, 7 Aug 2019 10:45:03 -0700
Subject: [PATCH 77/81] Update Readme docs

Props @marekhrabe.
---
 packages/block-editor/README.md                      |  9 +++++++--
 .../src/components/block-preview/README.md           | 12 ++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index e777495d699e7b..babdd7ade62bbc 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -124,16 +124,21 @@ Undocumented declaration.
 
 <a name="BlockPreview" href="#BlockPreview">#</a> **BlockPreview**
 
-BlockPreview renders a preview given an array of blocks.
+BlockPreview renders a preview of a block or array of blocks.
 
 _Parameters_
 
--   _props_ `Object`: Component props.
+-   _blocks_ `Array|Object`: A block instance (object) or an array of blocks to be previewed.
+-   _viewportWidth_ `Int`: Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
 
 _Returns_
 
 -   `WPElement`: Rendered element.
 
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-preview/README.md>
+
 <a name="BlockSelectionClearer" href="#BlockSelectionClearer">#</a> **BlockSelectionClearer**
 
 Undocumented declaration.
diff --git a/packages/block-editor/src/components/block-preview/README.md b/packages/block-editor/src/components/block-preview/README.md
index a499557d34df73..b415f2bbc22379 100644
--- a/packages/block-editor/src/components/block-preview/README.md
+++ b/packages/block-editor/src/components/block-preview/README.md
@@ -10,14 +10,22 @@ Render the component passing in the required props:
 ```jsx
 <BlockPreview
 	blocks={ blocks }
-	isScaled={ false }
+	viewportWidth={ 800 }
 />
 ```
 
 ## Props
 
 ### `blocks`
-* **Type:** `array|object`
+* **Type:** `Array|Object`
 * **Default:** `undefined`
 
 A block instance (object) or a blocks array you would like to render a preview.
+
+### `viewportWidth`
+* **Type:** `Int`
+* **Default:** `700`
+
+Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview.
+
+`viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure make sure multiple previews will be rendered with the same scale, regardless of their content.

From 91f142f5cac85c5ea0c624fa744328121d7a932e Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Wed, 7 Aug 2019 12:09:01 -0700
Subject: [PATCH 78/81] Remove tests for now

We'll revisit when we have a better idea what specifically we should be testing
---
 .../components/block-preview/test/index.js    | 33 -------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-preview/test/index.js

diff --git a/packages/block-editor/src/components/block-preview/test/index.js b/packages/block-editor/src/components/block-preview/test/index.js
deleted file mode 100644
index 11f257c0ba9f79..00000000000000
--- a/packages/block-editor/src/components/block-preview/test/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-/**
- * Internal dependencies
- */
-import { BlockPreview } from '../index';
-
-describe( 'BlockPreviewContent', () => {
-	beforeAll( () => {
-		registerCoreBlocks();
-	} );
-
-	it( 'renders a preview with suitable default dimensions', () => {
-		const wrapper = shallow( <BlockPreview
-			name="core/paragraph"
-		/> );
-
-		wrapper.update();
-
-		const previewTransform = wrapper.find( '.editor-block-preview__content' ).first().prop( 'style' ).transform;
-		const previewScale = parseInt( previewTransform.match( /\d/ )[ 0 ], 10 );
-
-		expect( previewScale ).toEqual( 1 );
-	} );
-} );

From 33fb2d9fde1f2fc1c9797dff711a7a060ad8cebb Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 7 Aug 2019 16:35:34 -0300
Subject: [PATCH 79/81] block-preview: simplify comparision

---
 packages/block-editor/src/components/block-preview/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 8266015a6b7f78..41c5ee7e9ce3bc 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -36,7 +36,7 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 			}
 
 			// If we're previewing a single block, scale the preview to fit it.
-			if ( ! blocks.length !== 1 ) {
+			if ( blocks.length === 1 ) {
 				const block = blocks[ 0 ];
 				const previewElement = getBlockPreviewContainerDOMNode( block.clientId, containerElement );
 				if ( ! previewElement ) {

From 6f29c279648ca0d98ce06bc7264bdad1f583153c Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Wed, 7 Aug 2019 13:43:16 -0700
Subject: [PATCH 80/81] Remove readme updates that break tests

---
 packages/block-editor/README.md | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index babdd7ade62bbc..e777495d699e7b 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -124,21 +124,16 @@ Undocumented declaration.
 
 <a name="BlockPreview" href="#BlockPreview">#</a> **BlockPreview**
 
-BlockPreview renders a preview of a block or array of blocks.
+BlockPreview renders a preview given an array of blocks.
 
 _Parameters_
 
--   _blocks_ `Array|Object`: A block instance (object) or an array of blocks to be previewed.
--   _viewportWidth_ `Int`: Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
+-   _props_ `Object`: Component props.
 
 _Returns_
 
 -   `WPElement`: Rendered element.
 
-_Related_
-
--   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-preview/README.md>
-
 <a name="BlockSelectionClearer" href="#BlockSelectionClearer">#</a> **BlockSelectionClearer**
 
 Undocumented declaration.

From a3bb4738bd563cb68b901ae8fe60b3864163f7db Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Wed, 7 Aug 2019 13:51:09 -0700
Subject: [PATCH 81/81] Update docs properly.

See 6f29c27
---
 packages/block-editor/README.md                          | 9 +++++++--
 .../block-editor/src/components/block-preview/index.js   | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index e777495d699e7b..3d6511550e0012 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -124,11 +124,16 @@ Undocumented declaration.
 
 <a name="BlockPreview" href="#BlockPreview">#</a> **BlockPreview**
 
-BlockPreview renders a preview given an array of blocks.
+BlockPreview renders a preview of a block or array of blocks.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-preview/README.md>
 
 _Parameters_
 
--   _props_ `Object`: Component props.
+-   _blocks_ `(Array|Object)`: A block instance (object) or an array of blocks to be previewed.
+-   _viewportWidth_ `number`: Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
 
 _Returns_
 
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 41c5ee7e9ce3bc..d8235eea0c1ddd 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -126,10 +126,12 @@ export function BlockPreview( { blocks, viewportWidth = 700, settings } ) {
 }
 
 /**
- * BlockPreview renders a preview given an array of blocks.
+ * BlockPreview renders a preview of a block or array of blocks.
  *
- * @param {Object} props Component props.
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-preview/README.md
  *
+ * @param {Array|Object} blocks A block instance (object) or an array of blocks to be previewed.
+ * @param {number} viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
  * @return {WPElement} Rendered element.
  */
 export default withSelect( ( select ) => {