Support preview mode from mobile devices

[roo2]

Background:

Gutenberg's preview mode is working well for previewing blogs on mobile/tablet from within a desktop sized editor.
But preview mode hasn't been optimized to work when the editor is opened on a mobile device.
In gutenberg core, we simply don't allow device preview from a Mobile sized editor, we keep the preview mode set to "Desktop" and have the preview button open a new preview tab instead

The Layout Grid block allows users to select different column widths and offsets for different device widths.
So for example you can have a three column layout on desktop, and then have two half width and one full width column on mobile.
The block has a portion of its settings which utilizes gutenberg's preview mode in order to preview and set column width/offset on different devices
This allows users to create flexible responsive designs and is very useful for e.g. theme homepages.

The problem:

With the Layout Grid block, we need to use the three different preview modes so that we can set column widths/offsets for different breakpoints

Currently when opening the editor on a mobile device, preview mode defaults to "desktop" and results in a confusing experience.

• The grid attempts to render in "Desktop" mode
• There is insufficient width to render

When the layout grid block is used in the wild and on wpcom, the results can be more dramatic:
Automattic/wp-calypso#42148
Automattic/block-experiments#152

I originally tried to fix this issue in the Layout Grid block, but was unable to achieve a satisfactory outcome for mobile and desktop Automattic/block-experiments#161

Another minor issue is that when using mobile preview on mobile devices, only 320px of the screen are used e.g.

Looking beyond the layout grid block, better supporting preview from a mobile device is a useful feature, especially as more responsive aware content is developed and mobile device usage continues to increase.

Ideal Solution:

• The selected preview mode should match what the user sees on their screen so that changing column widths is intuitive
• Mobile devices should display mobile preview by default
• Mobile preview on mobile should use all of available space, not be limited to 320px width
• Desktop preview should be available from mobile

My proposed solution:

• Keep track of the native device type being used (Mobile/Desktop)
• On editor load, set the preview mode to the native device type ( Default to mobile preview on mobile devices ).
• When the preview mode is the same as the native device type, use all available width ( so no grey 320px box when previewing mobile on mobile ).
• When previewing desktop from a mobile device, enable horizontal scrolling and expand the visual editor so that a desktop site can be rendered.

Outcome:

This will allow the experience on a mobile device to be intuitive, the preview mode will be mobile by default and use the screen efficiently.
when editing column widths in the grid layout, mobile mode will be selected by default as expected.

A desktop preview will be available from mobile, horizontal scrolling will be used.

Desktop will actually continue to work exactly as it does now.

Tablet mode will render in an efficient tablet preview by default, mobile and desktop can be previewed as expected.

Conclusion:

Phew I've gone down a few different paths thinking about mobile preview, but I think that this solution
will work really nicely for mobile without affecting desktop and it should actually be pretty simple to implement in gutenberg. I hope this communicates the issues and proposal well, and also, enjoy your holidays!

[jasmussen]

Good ticket, important issue to address, and it should probably be considered as part of #19909.

High level, #19909 considers it critical that when you are making responsive edits, that you visually see the changes in context of an accurate screensize. In that vein, it makes sense for you to go the other direction as well — being able to see a full desktop from mobile. Whether that means using transform: scale() to see a desktop viewport on a tiny screen, or scrollbars, I can see the use case.

Where it gets gnarly is exactly the case of the Layout Grid block which is used as an example. Responsive edits are tied to the preview choice, which means if you only ever edit on a phone, you only ever edit the phone breakpoint. This just speaks to the importance of good defaults, and of the need for a solid responsive editing solution. But nevertheless it outlines a subtle challenge that is easily forgotten: sometimes you want to make edits that are not tied to any one viewport, and other times you want to make an edit that is unique just to this one breakpoint.

[roo2]

@jasmussen Thank you!

yea, I agree seeing the responsive edits in the correct screensize is essential, nice I didn't consider using transform: scale().

I think that #19909 is a lot more ambitious than this, and this change could be done on its own to make the preview work more intuitively on mobile, and would then add to the work being done in #19909

[roo2]

We merged workarounds on the block-experiments end which mitigates the effect on the layout-grid block Automattic/block-experiments#161.

I still think that implementing this solution is worthwhile to make mobile editing of such blocks really work well.