#7664081 Pattern Assembler – Pattern selection UX

Proposed Changes

• Keep the pattern selector open when adding/replacing a pattern without going back to the list on each click
  • Allow adding multiple sections patterns
• Cleaned the code
• Fixed a CSS background issue
• Make sure the list of available patterns is scrolled to the top

Testing Instructions

• Click on the Calypso Live (direct link) in the first comment
• Update the URL to /setup?siteSlug=[ YOUR SITE ]&flags=signup/design-picker-pattern-assembler
• Don’t mark any goal or vertical
• In the Design Picker, scroll down to find the Blank canvas CTA, click on Start designing to access the Pattern Assembler
• Add and replace patterns to confirm that the pattern selector remains open until you click on Done or the back button
• Confirm that you can add multiple section patterns without going back to the list on each click

Screenshots

Showing the flow to Replace section

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)?
• 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)?
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Related to #70461 #70473