#7757025 Site Assembler: Revamp sidebar

Proposed Changes

• Use the feature flag, pattern-assembler/sidebar-revamp, to control the new layout
• Use the NavigatorProvider and NavigatorScreen to handle the navigation on the sidebar. So, the layout of the sidebar will be changed based on the current navigator location

Also, here are changes to the existing components

• <PatternLayout />: Displays the layout of their homepage (or section patterns). If the feature flag is off, it will also display the header and footer

TODOs

• Confirm track events: pbxlJb-3bS-p2#comment-2300
• Confirm the copies

Demo

Testing Instructions

Current layout

• Go to /setup?siteSlug=<your_site>
• Click the “Continue” button until you land on the Design Picker step
• Scroll to the bottom and select the Blank Canvas CTA
• When you’re in the Pattern Assembler step, verify the behavior is the same as before

New layout

• Go to /setup?flags=pattern-assembler/sidebar-revamp&siteSlug=<your_site>
• Click the “Continue” button until you land on the Design Picker step
• Scroll to the bottom and select the Blank Canvas CTA
• When you’re in the Pattern Assembler step, verify the following behaviors
  • Clicking on the “Choose a header” will open the header pattern selector
    • Selecting any header should work as before
    • Selecting “No Header” will remove the selected header
  • Clicking on the “Choose a footer” will open the footer pattern selector
    • Selecting any footer should work as before
    • Selecting “No Footer” will remove the selected footer
  • Clicking on the “Design your homepage” will open the panel to show the selected pattern and let you select any pattern for your homepage
    • Clicking on “+” button will open the section pattern selector (without categories)
    • Hovering on “+” button will show the tooltip
    • Selecting/Replacing/Ordering/Removing any patterns should work as before
  • Clicking on the “Continue” button, will apply the selected patterns to your homepage as before

Screenshots

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• 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 #71976