Assembler: Add a "cycle" option in the large preview action bar

[taipeicoder]

Description

Project Thread: pbxlJb-4gB-p2

As suggested in p1689805304075719-slack-C048CUFRGFQ, consider adding a "cycle" option in the action bar of the Assembler's large preview. The option should be placed before the "remove" option. Clicking this button would cycle through the patterns in the same category. See:

Acceptance Criteria

• Confirm with @lucasmendes-design in that design is not needed, and that the content in the description should be enough.
• Implement the cycle button.
• Add tracks events.
• After shipping, report back on early click/usage data in p1689805304075719-slack-C048CUFRGFQ

[miksansegundo]

Seems related to WordPress/gutenberg#44581

[miksansegundo]

Also related to Patterns as Sectioning Elements:

Cycling through Patterns

By having stricter structures that can be edited but not rearranged, transforming between different designs becomes more straightforward beyond what we achieved already for semantic template parts (headers and footers). This can allow a user to cycle quickly through variations of a section pattern while retaining its content customizations. While we have these features already in the ability to transform a pattern into another pattern, this can significantly simplify how these patterns are connected.

This is a feature we can surface in the container block toolbar, for example, in addition to the carousel explorations we added for template parts.

There's a question of how to conceptualize these variations (consider a pattern with an image, a heading, some text, and a button, arranged in different ways but with the same overall elements) when defining or registering patterns. We should look at it from the perspective of the patterns directory as well.

It's also important to discriminate between cycling between patterns that have the same elements and replacing a pattern / section with something else entirely. The latter we already support for template parts, for example. In the case of patterns, we should probably still retain the two, since you may cycle between variations of a "call to action" pattern or aim to replace that section with an entirely different "hero" pattern.

[lucasmendes-design]

Design is not needed.

Just let make sure that when users click on the button, we don't show strange patterns. In the GIF above, I can see that the background color changes sometimes but we should be careful not adding more complexity and difficulty to build a site with SA.

[autumnfjeld]

@miksansegundo Could you help me: What is the estimate of effort on this? S? M? Few days dev time?
Want to make sure it gets prioritized.

And then simple data check on the usage is reported back in this thread: p1689805304075719-slack-C048CUFRGFQ

[arthur791004]

I can take this today 🙂

[arthur791004]

Proposed #80078 but I need to confirm the logic of cycling

• Pick the pattern with the same category randomly
• Pick the next pattern with the same category

Which one is what we want here 🤔

[arthur791004]

Closing it as it's completed via #80078, and reported back in p1690882248456019/1689805304.075719-slack-C048CUFRGFQ.

Conv

p1690877360341899-slack-CRWCHQGUB

Demo

assembler-shuffle-patterns.mov

Event

[autumnfjeld]

Thank you for the amazingly quick response here!!