Wp-calypso: Gutenboarding: Change Design Screen Sort to Random

[ianstewart]

With so many designs on the design screen — 21 in production today — it would be good to get more data back on what's working well there while, at the same time, accounting for the sort order potentially "cooking" the results by making the first results on the screen more popular by virtue of their position.

Let's randomize the results.

Here's what the design screen looks like today.

If the design screen changes by the time we get to this issue, say to introduce groups of designs in categories like …

… then, additionally, I’d randomize the category group order and the contents of the category groups.

Note: The randomization should stay random the same way between multiple visits to that step during single session.

cc @simison

[andrewserong]

@autumnfjeld here's a couple of links that might help navigating around this part of Gutenboarding:

• We store the list of designs in a JSON file: https://github.com/automattic/wp-calypso/blob/HEAD/client/landing/gutenboarding/available-designs-config.json
• This JSON file is loaded here: https://github.com/automattic/wp-calypso/blob/HEAD/client/landing/gutenboarding/available-designs.ts#L17
• It's then used in getAvailableDesigns: https://github.com/automattic/wp-calypso/blob/HEAD/client/landing/gutenboarding/available-designs.ts#L73
• getAvailableDesigns is currently the main function we're using whenever we want to get the available designs within Gutenboarding, so this (or a similar function) would ideally return the available designs in a randomized order
• For example, the designs step imports getAvailableDesigns as designs here: https://github.com/automattic/wp-calypso/blob/HEAD/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx#L18
• And the style step import getAvailableDesigns as designs here: https://github.com/automattic/wp-calypso/blob/HEAD/client/landing/gutenboarding/onboarding-block/style-preview/font-select.tsx#L17

However, we also want to ensure that the randomised order is consistent if a user clicks back and forward through Gutenboarding (e.g. returns to the design step after looking at the style step), or if a user reloads the page.

We currently persist some Redux state in Gutenboarding by adding a persist key to the store when we register it, e.g. here: https://github.com/automattic/wp-calypso/blob/HEAD/client/landing/gutenboarding/stores/onboard/index.ts#L27

That kind of persistence is managed here: https://github.com/automattic/wp-calypso/blob/HEAD/packages/data-stores/src/persistence-config-factory/index.ts — so if you're looking into persisting the randomized order, this could be a good abstraction to use for that purpose.