From 898a114dabfb7e300ab186812d78968edab923ac Mon Sep 17 00:00:00 2001 From: Miguel San Segundo <1881481+miksansegundo@users.noreply.github.com> Date: Tue, 30 Jan 2024 12:18:40 +0700 Subject: [PATCH] Update pattern rendering constants and receive URL params (#86900) --- .../steps-repository/pattern-assembler/constants.ts | 10 ++++++++++ .../pattern-assembler/pages/page-preview.tsx | 8 +++----- .../pattern-assembler/pattern-large-preview.tsx | 2 ++ .../pattern-assembler/pattern-list-renderer.tsx | 5 +---- 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts index 8e91e521c48aa..f014858987742 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts +++ b/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; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pages/page-preview.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pages/page-preview.tsx index bd3324f421e60..76069aeea7d52 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pages/page-preview.tsx +++ b/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 } diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-large-preview.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-large-preview.tsx index 96efcef446d45..676dd3f831552 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-large-preview.tsx +++ b/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 } diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-list-renderer.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-list-renderer.tsx index 0a3ff86a483ad..9a6e5bf932356 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-list-renderer.tsx +++ b/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,