Fix: Update viewportWidth of BlockPreview to better align with core breakpoints (#67097)

Ensured the Media & Text block displays components side by side in the preview, even on larger devices. The preview container was previously too small, causing the elements to stack. This change ensures the components remain properly aligned in the preview.

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: dsas <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>

Author: 6 people

packages/block-editor/src/components/block-switcher/preview-block-popover.js

@@ -29,7 +29,10 @@ 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.
+						We set the viewport width to 601px to make sure that the media-text 
+						block which uses this breakpoint has the correct padding. */ }
+					<BlockPreview viewportWidth={ 601 } blocks={ blocks } />
 				</div>
 			</Popover>
 		</div>