Use example viewport width in style previews

WordPress · Jul 11, 2021 · 210a123 · 210a123
1 parent d775b34
commit 210a123
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -103,6 +103,7 @@ function BlockStyles( {
 				return (
 					<BlockStyleItem
 						genericPreviewBlock={ genericPreviewBlock }
+						viewportWidth={ type.example?.viewportWidth ?? 500 }
 						className={ className }
 						isActive={ activeStyle === style }
 						key={ style.name }
@@ -127,6 +128,7 @@ function BlockStyles( {
 
 function BlockStyleItem( {
 	genericPreviewBlock,
+	viewportWidth,
 	style,
 	isActive,
 	onBlur,
@@ -165,7 +167,10 @@ function BlockStyleItem( {
 			aria-label={ style.label || style.name }
 		>
 			<div className="block-editor-block-styles__item-preview">
-				<BlockPreview viewportWidth={ 500 } blocks={ previewBlocks } />
+				<BlockPreview
+					viewportWidth={ viewportWidth }
+					blocks={ previewBlocks }
+				/>
 			</div>
 			<div className="block-editor-block-styles__item-label">
 				{ style.label || style.name }