Update viewport width in PreviewBlockPopover for better block preview…

… alignment
WordPress · Jan 2, 2025 · af0eadc · af0eadc
1 parent 9b5a345
commit af0eadc
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-switcher/preview-block-popover.js b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
@@ -29,7 +29,9 @@ export default function PreviewBlockPopover( { blocks } ) {
 					<div className="block-editor-block-switcher__preview-title">
 						{ __( 'Preview' ) }
 					</div>
-					<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+					{ /* 600px is the value of $break-small in base-styles/_breakpoints.scss.
+						So we set the viewport somewhat arbitrarily to 610px to account for the padding of the block. */ }
+					<BlockPreview viewportWidth={ 610 } blocks={ blocks } />
 				</div>
 			</Popover>
 		</div>