[Spike/Research] Style Selection in the onboarding Design Picker

[autumnfjeld]

Description

Draft Project thread Design Post Painting the web: p58i-cQg-p2 [Tips from Caribou’s importer work: p1659954134198229/1659941429.904089-slack-C01A60HCGUA ) Cool tutorial: https://richtabor.com/wordpress-style-variations

We can go ahead and start doing research / learning / spikes for style selection in the DP. For right now simply focusing on how we'll add the UI in the previews in the design grid (don't worry about full screen previews now) and how we'll work with theme.json as the source of style switching.

From this research we should then write up an umbrella issue or many smaller issues to plan out the dev work.

[autumnfjeld]

@roo2 Would you like to take the lead on this project? If so, then this is all yours whenever you are ready. I still have much work to do on the project thread, but I think there is enough understanding that we can begin tech research and foundations.

[autumnfjeld]

Following up on my above comment: after chatting with @roo2 he's happy to let someone else take the lead on this. 😃

[fushar]

Okay, now I think I have all the data I need to implement this project. General idea:

1. (wpcom) Return theme style variations for each (static) theme in the /wpcom/v2/starter-designs endpoint.
   • This will be used for showing the color variation circles in the Design Picker theme grid, and for showing the style switch button in the Design Picker theme preview.
2. (wpcom) Apply the style variation to the preview by passing the slug as style_variation to the /wpcom/v2/block-previews/site endpoint (for applying colors, works already done by the Caribou team in the past).
3. (wpcom) Apply the style variation during Headstart.
4. (Calypso) Show the color variation circles in the Design Picker theme grid (does nothing when clicked -- will lead to the theme preview)
5. (Calypso) Show the style switch button in the Design Picker theme preview.

Now answering @autumnfjeld's questions above (not in the original order):

How would style switching work with mShots ? Is that even possible?

We use mShots only for the theme thumbnails in the Design Picker. As discussed on pbxlJb-2j3-p2, the style switching "buttons" there will just load the theme full screen preview page, which will show iframe preview. So, we don't have to do anything w.r.t. mShots.

Is adding the style switch buttons in the preview grid the same technical effort as adding the functionality to the full screen theme preview?

Similar to the above. The effort will be minimal.

What performance issues are there? e.g. what kind of latency is involved with reading a style file and updating the theme preview?

There are two questions here:

• What kind of latency is involved with reading a style file? -> This will be done for each theme in the static themes in the Design Picker, and returned via the /wpcom/v2/starter-designs endpoint. I've tested by calling the (sandboxed) endpoint 100 times for both the unmodified version and the (WIP) one that reads the style variation files, and did not perceive any slowness. The p90 and p95 response times were essentially the same -- reading the style files is not the bottleneck. (We can add caching as well just to be safe.)
• What kind of latency is involved with updating the theme preview? -- This is for the theme preview after applying the style variation by clicking the style switch button. The works have been done by the Caribou team (for colors), which basically just injects a couple of CSS declarations in the HTML page, so the latency is negligible.

Based on understanding of technical implication, break down the work in an umbrella issue or individual git issues.

Will do (soon).

[fushar]

@autumnfjeld : I've created the following tasks:

• 120-gh-Automattic/ganon-issues
• 121-gh-Automattic/ganon-issues
• 122-gh-Automattic/ganon-issues
• https://github.com/Automattic/wp-calypso/issues/66734
• https://github.com/Automattic/wp-calypso/issues/66741

Feel free to close this issue if needed!

[fushar]

I'll consider this spike ticket as closed!