[Spike/Research] Blank Canvas: Pattern Assembler in onboarding

[autumnfjeld]

Description

Blank Canvas: build your own layout in onboarding

Info

• See design vision post: p58i-cQg-p2
• Figma (see at MVP page): 7l53h5fxAUNjVRBQ82YFwn-fi-238%3A41198
• See discussion call: Design Sync with Saxon: Blank Canvas & Styles in onboarding: pbxlJb-2j3-p2
• See draft PT

This concept is very similar to the recipe tool, building a layout from patterns, but of course this work is a fancier UI and built in calypso/stepper:

• User selects "Blank Canvas" from the DP
• User is guided through series of screeens
  • pick a header
  • pick a footer
  • pick section patterns (for the main body)
• click complete
• land in FSE

Let's discuss if we should build a skeleton POC as part of this spike, or if we can assess technical complications without a POC.

Things to discover & report on

• Read design post (p58i-cQg-p2) & the comments
• Read notes [Design Sync with Saxon: Blank Canvas & Styles in onboarding: pbxlJb-2j3-p2] as some of the open questions are mentioned there, some questions that may be answered during initial research/spike investigations
• Surface any potential complications with headstart
• Look for any technical blockers and challenges in implementing this as an onboarding flow.
• Based on understanding of technical implementation, break down the work in an umbrella issue or individual git issues.
• Anything else we should be looking for in terms of technical feasibility or tech blockers?

[autumnfjeld]

Looking like @arthur791004 and @miksansegundo will be main devs on this project. :) I have enough info from meeting with Saxon to break down more specific tasks.

Consider this issue a "search for possible tech blockers". 😄

[arthur791004]

I think we could break this one down into the following tasks:

wpcom

• Get patterns - We have already had the following endpoints to get patterns and they are used in FSE plugin.
  • /wp/v2/sites/:site_id/block-patterns/patterns
  • /rest/v1/ptk/patterns/:locale
• Preview - The /wpcom/v2/block-previews/site endpoint has supported header_pattern_ids, pattern_ids and footer_pattern_ids, so I think we're able to show the preview with the selected patterns.
• Build the home page with selected patterns
  • One way is to use the headstart to wipe out the original content as it has supported customized header, content, and footer patterns. But it replaces the content with those patterns only when the veritcal_id is provided. Thus, we have to separate the pattern replacement and v13n into different parts
  • Another idea is to use call the API to update the home page from the calypso side. The blank-canvas-block theme uses page as its home page, so we can use the /wp/v2/template-parts endpoint to update the header and footer, and
    use the /wp/v2/sites/:site_id/pages/:page_id endpoint to update the home page. But we need to check how to get the header/footer template slug

If we decide to call the API to update the home page from the calypso side, then I think there is nothing to do on wpcom 🙂

Calypso

• A new web preview component, and it supports device switching and resizing. One thing we need to take care of is the performance. I'm not sure whether the /wpcom/v2/block-previews/site endpoint is good to use in this situation. It does a bunch of things to generate the preview and I think it will be a bit slow and the user might need to wait for the response to preview the selected one.
  
• The main layout to add/remove/reorder the header, sections, and the footer
  
• The pattern selector that accepts title, and patterns props and has a search bar to search the pattern. We can refer to __experimentalGetAllowedPatterns selector and patternsTab from Gutenberg to see what's the structure it uses and how to render the patterns.
  
• A new step located in the stepper framework and it consists of the above components

Note that it might be better to consider how to re-use this flow at the beginning

• One might be to make an independent flow (ex. build-blank-canvas) in the stepper framework. After selecting the blank canvas theme in the design picker, everything works as before but the destination will be changed to the new flow
• Create a new package for this one (just like design picker) so that we could re-use this in another flow
• etc

[autumnfjeld]

Great summary @arthur791004 !

If we decide to call the API to update the home page from the calypso side
Maybe good to bounce ideas on plan for smartest/efficient approach with @fushar or @taipeicoder .

One thing we need to take care of is the performance.
100% this is an important user impact concern. 😃

has a search bar to search the pattern.
No search bar for now. Saxon mentioned that in our call.

Create a new package for this one (just like design picker) so that we could re-use this in another flow
This might be useful, particualarly if there are definite plans to do such a flow in the theme showcase. @mtias or @SaxonF could confirm.

A new web preview component, and it supports device switching and resizing.
This will only be offered in desktop flow (of course the user's site will be for all devices). But I'd say we don't need to support
device switching and resizing in this MVP. Keep it in mind, that it might come in a later iteration. But for now let's just ship desktop view.

[arthur791004]

No search bar for now. Saxon mentioned that in our call.

Yep, but I remembered that the search bar is not shown on the main (first) screen but it's still shown on the pattern selector screen.

main screen	pattern selector screen

[arthur791004]

Here are the related tasks

• Pattern Assembler: Show Blank Canvas option in the Unified Design Picker #66785
• Pattern Assembler: Show the main screen on "build-your-own-layout" step #66787
• Pattern Assembler: Show the pattern selector on "build-your-own-layout" step #66788
• (Optional) Pattern Assembler: Make a new preview component to preview the selected patterns #66786

[SaxonF]

The search input on the high level view of the page shouldn't be there. Ive updated Figma to reflect that.

When inserting a pattern we should work towards adding search, however it doesn't necessary need to be part of V1, so we can add to the bottom of the backlog and consider it a stretch goal.

[autumnfjeld]

I've moved all the tasks to wp-calypso repo - this is a calypso feature so all issues should go there (even any wpcom / backend work that is supporting the feature)