Layout Grid: Explore responsive dropdown integration

[jasmussen]

Gutenberg 7.7 ships with a new responsive preview feature that lets you actually preview responsive breakpoint changes.

We should explore how the layout grid block can leverage this. Can the tabs in the sidebar invoke a particular breakpoint? Or can we contextually change the contents of the sidebar depending on which breakpoint is chosen by the user?

[johngodley]

We can read the current device type, and we can change the device type. This should mean we should be able to do something.

Based on your suggestions we could:

• Change the sidebar tab to match the preview device type
• Change the preview device type to match the sidebar tab
• Both

Which would be your preference?

[jasmussen]

Is any one of those vastly simpler to build than the other?

[johngodley]

I think they will be the same - it's the same core functionality, so there shouldn't be much we need to do other than hook it up.

[jasmussen]

Understood.

The current disconnect is that you choose a breakpoint tab in the sidebar and the block changes but there's no visual indication that you're now viewing a mobile or tablet specific breakpoint, let alone making changes just for that.

In that vein my first instinct would be "both": regardless of how you choose the breakpoint, the edits you make should apply to that breakpoint.

But I think this is the kind of change we should try out in a branch, not spending a ton of time on. Because we might find that it doesn't feel as good and intuitive in practice. Or we find that it's so good that we might actually want to build it core first and fix WordPress/gutenberg#19909

[jasmussen]

Damnit mobile interface and fiddly fingers argh