Iterate zoom out shuffle into a more visual control

[richtabor]

Currently, the shuffle control in Gutenberg allows users to iterate through like patterns to pick from. This proposal aims to improve the feature by transforming it into a more visual selecting experience, enhancing usability and providing a more intuitive interface.

Current

Proposed

Replace the existing shuffle control with more visual picker that displays thumbnail previews of patterns in a grid within a popover, instead of iterating to the next pattern. I suggest a max rendering of six, to keep scope minimal here.

[ntsekouras]

It's worth noting that we have other similar patterns lists like:

1. Quick inserter previews
2. Replace in blocks like Query Loop (bigger dialog)

This issue suggests yet another design. Should we proceed with the new design and see if can consolidate designs or this is considered the best one for this specific functionality?

--cc @jasmussen

[jasmussen]

I think shuffle can coexist with this, somehow. But the motivation for making it a visual control is also valid. What might that look like? "Change Design" is perhaps not the best label, in part we should use sentence case, in part I wonder if there's a shorter/simpler label.

[ntsekouras]

I think shuffle can coexist with this, somehow. But the motivation for making it a visual control is also valid.

To me shuffle is like the I'm Feeling Lucky from Google, which I don't find useful at all (if it still exists). Having said that, if we want to preserve both, we can do it.

[richtabor]

Yea, I don't think we need both shuffle and this change design (maybe change layout) control.

[afercia]

with more visual picker that displays thumbnail previews of patterns in a grid

The pattern previews in the popover need to be accessible. As such they need a title and a description to provide (in a succint way) information on their basic appearance and purpose. Note thaat this information should preferably be in visible text_ and tooltips can't be used for descriptions.

[afercia]

It's worth noting that we have other similar patterns lists like:

1. Quick inserter previews
2. Replace in blocks like Query Loop (bigger dialog)

This issue suggests yet another design.

I tend to share @ntsekouras concern as this would be yet another UI to select patterns. I'd suggest to strive for a more holistic approach and ideally provide just one UI to select patterns. The editor is already complex. I'd think design should aim to drastically simplify rather than introducing new UIs and cognitive load.

This unique UI may include randomizing the list of presented patterns, which would be a little more useful than a 'shuffle'.

Also, I'd think the visual previews would need way more space to provide some useful preview. I'm not sure previewing a pattern in a relatively small 'box' would allow to see all the details of a pattern.

[afercia]

A note on the current shuffle feature: to my understanding, isn't a real 'shuffle'. It mainly picks up the next pattern in the same category and when it reaches the last one, it starts again from the first one. Not arguing about this mechanism but maybe the name 'Shuffle' isn't tbe best one as it doesn't really communicate how this feature works.

[jasmussen]

Created #66465 related to this.

[richtabor]

A note on the current shuffle feature: to my understanding, isn't a real 'shuffle'. It mainly picks up the next pattern in the same category and when it reaches the last one, it starts again from the first one. Not arguing about this mechanism but maybe the name 'Shuffle' isn't tbe best one as it doesn't really communicate how this feature works.

Yes, that's why I proposed "Change design".

[richtabor]

. As such they need a title and a description to provide (in a succint way) information on their basic appearance and purpose.

In the same fashion as the pattern lists in the inspector/inserter, without visible title or description.

[richtabor]

It's worth noting that we have other similar patterns lists

Yes, we can consolidate a bit. I think we should land on one toolbar implementation (this) and one inspector implementation (the "Design" panel).