From 3edc36d76721a2541475ef9cdb9ff4fd49b4fae1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 31 Mar 2020 12:36:00 +0100
Subject: [PATCH] Increase the viewport width (non-scaled) for template
 previews (#21287)

---
 packages/block-editor/src/components/block-patterns/index.js  | 2 +-
 packages/block-library/src/template-part/edit/placeholder.js  | 2 +-
 .../edit-site/src/components/template-switcher/preview.js     | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-patterns/index.js b/packages/block-editor/src/components/block-patterns/index.js
index c2737e4e7ee12..30269f6ac6649 100644
--- a/packages/block-editor/src/components/block-patterns/index.js
+++ b/packages/block-editor/src/components/block-patterns/index.js
@@ -34,7 +34,7 @@ function BlockPattern( { pattern, onClick } ) {
 			tabIndex={ 0 }
 		>
 			<div className="block-editor-patterns__item-preview">
-				<BlockPreview blocks={ blocks } />
+				<BlockPreview blocks={ blocks } viewportWidth={ 800 } />
 			</div>
 			<div className="block-editor-patterns__item-title">{ title }</div>
 		</div>
diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js
index abeb2d12139ef..c1cc10d9cadcb 100644
--- a/packages/block-library/src/template-part/edit/placeholder.js
+++ b/packages/block-library/src/template-part/edit/placeholder.js
@@ -22,7 +22,7 @@ function TemplatePartPreview() {
 			<div className="wp-block-template-part__placeholder-preview-title">
 				{ __( 'Preview' ) }
 			</div>
-			<BlockPreview blocks={ blocks } />
+			<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/template-switcher/preview.js b/packages/edit-site/src/components/template-switcher/preview.js
index ac1eda0899383..b1761f7b502b8 100644
--- a/packages/edit-site/src/components/template-switcher/preview.js
+++ b/packages/edit-site/src/components/template-switcher/preview.js
@@ -23,7 +23,9 @@ function TemplatePreview( { item } ) {
 	);
 	return (
 		<div className="edit-site-template-switcher__preview">
-			{ !! blocks && <BlockPreview blocks={ blocks } /> }
+			{ !! blocks && (
+				<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
+			) }
 		</div>
 	);
 }