Update pattern rendering constants and receive URL params (#86900)

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts

@@ -92,3 +92,13 @@ export const ORDERED_PATTERN_PAGES_CATEGORIES = [
 	'posts',
 	'contact',
 ];
+
+// From URL params for testing
+const searchParams = new URLSearchParams( window.location.search );
+const viewportWidth = searchParams.get( 'viewportWidth' );
+const placeholderHeight = searchParams.get( 'placeholderHeight' );
+
+// Pattern rendering
+export const DEFAULT_VIEWPORT_HEIGHT = 500;
+export const DEFAULT_VIEWPORT_WIDTH = Number( viewportWidth ) || 1200;
+export const PLACEHOLDER_HEIGHT = Number( placeholderHeight ) || 150;

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pages/page-preview.tsx

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import { CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import useOutsideClickCallback from 'calypso/lib/use-outside-click-callback';
+import { DEFAULT_VIEWPORT_WIDTH, DEFAULT_VIEWPORT_HEIGHT } from '../constants';
 import { PATTERN_ASSEMBLER_EVENTS } from '../events';
 import prependTitleBlockToPagePattern from '../html-transformers/prepend-title-block-to-page-pattern';
 import PatternTooltipDeadClick from '../pattern-tooltip-dead-click';
@@ -30,9 +31,6 @@ interface PagePreviewProps extends BasePageProps {
 	onFullscreenLeave: () => void;
 }
 
-const PATTERN_PAGE_PREVIEW_ITEM_VIEWPORT_HEIGHT = 500;
-const PATTERN_PAGE_PREVIEW_ITEM_VIEWPORT_WIDTH = 1080;
-
 const Page = ( { className, style, patterns, transformPatternHtml }: PageProps ) => {
 	const pageTitle = useMemo( () => {
 		return patterns.find( isPagePattern )?.title ?? '';
@@ -56,8 +54,8 @@ const Page = ( { className, style, patterns, transformPatternHtml }: PageProps )
 					key={ pattern.ID }
 					maxHeight="none"
 					patternId={ encodePatternId( pattern.ID ) }
-					viewportWidth={ PATTERN_PAGE_PREVIEW_ITEM_VIEWPORT_WIDTH }
-					viewportHeight={ PATTERN_PAGE_PREVIEW_ITEM_VIEWPORT_HEIGHT }
+					viewportWidth={ DEFAULT_VIEWPORT_WIDTH }
+					viewportHeight={ DEFAULT_VIEWPORT_HEIGHT }
 					transformHtml={
 						isPagePattern( pattern ) ? transformPagePatternHtml : transformPatternHtml
 					}

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-large-preview.tsx

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import React, { useRef, useEffect, useState, useMemo, CSSProperties, useCallback } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
+import { DEFAULT_VIEWPORT_WIDTH } from './constants';
 import { PATTERN_ASSEMBLER_EVENTS } from './events';
 import { injectTitlesToPageListBlock } from './html-transformers';
 import PatternActionBar from './pattern-action-bar';
@@ -167,6 +168,7 @@ const PatternLargePreview = ( {
 						key={ device }
 						patternId={ encodePatternId( pattern.ID ) }
 						viewportHeight={ viewportHeight }
+						viewportWidth={ DEFAULT_VIEWPORT_WIDTH }
 						// Disable default max-height
 						maxHeight="none"
 						transformHtml={ transformPatternHtml }

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-list-renderer.tsx

@@ -3,6 +3,7 @@ import { Tooltip, __unstableCompositeItem as CompositeItem } from '@wordpress/co
 import classnames from 'classnames';
 import { useEffect, useCallback, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { DEFAULT_VIEWPORT_WIDTH, DEFAULT_VIEWPORT_HEIGHT, PLACEHOLDER_HEIGHT } from './constants';
 import { encodePatternId, isPriorityPattern } from './utils';
 import type { Pattern } from './types';
 import './pattern-list-renderer.scss';
@@ -30,10 +31,6 @@ interface PatternListRendererProps {
 	isShowMorePatterns?: boolean;
 }
 
-const DEFAULT_VIEWPORT_WIDTH = 1060;
-const DEFAULT_VIEWPORT_HEIGHT = 500;
-const PLACEHOLDER_HEIGHT = 100;
-
 const PatternListItem = ( {
 	pattern,
 	className,