Pattern Assembler - Scroll to the bottom of the preview when choosing a footer

[miksansegundo]

Proposed Changes

• WebPreview support for scroll to selector
• Pattern assembler preview scrolls to footer

Screen Recording on 2022-09-22 at 15_56_15.webm

Testing instructions

• Sandbox the API using D88290-code
• Click on the Calypso Live (direct link) in the comment below.
• Type the URL /setup?siteSlug={Site slug}&flags=signup/design-picker-pattern-assembler in the Calypso Live domain
• Select the goal Promote myself or business
• Select the category Show all
• Click on the Blank canvas CTA
• Add a header, sections and a footer
• When a footer is added or replaced, the footer should be visible because the preview scrolls down

Pre-merge Checklist

• [ ] Have you written new tests for your changes?
• [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [x] Have you checked for TypeScript, React or other console errors?
• [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

Related to #68070

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-9019d3eff8ce28157a184dbaaa31f0e67bc91f52

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-9019d3eff8ce28157a184dbaaa31f0e67bc91f52&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~75 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +320 B  (+0.0%)      +75 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Async-loaded Components (~42 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-calypso-components-web-preview-component       +187 B  (+0.0%)      +42 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.