block-experiments icon indicating copy to clipboard operation
block-experiments copied to clipboard

Layout Grid: Mobile view is confusing

Open alaczek opened this issue 5 years ago • 1 comments

This might not be a bug, but I was confused by this so I thought I'd bring it up. So the Layout Grid block has a responsive layout switcher, where users can switch between desktop, tablet, and mobile. But if I switch to mobile and then select another block in the editor (on purpose or by accident), it's not clear how to go back to the desktop view, as the switcher is a part of Layout Grid settings.

One problem with this is that to access the settings, one has to select the Layout Grid (parent), not individual columns, which is hard, bordering on impossible in the mobile preview. The other thing is when the editor switched to the mobile preview I got the impression that I'm editing the whole page/post on mobile, which is not the case.

Here's a quick demo of the experience. I'm basically desperately clicking around, trying to select the Layout Grid block to access the responsive controls. In the end, I had to use the keyboard to navigate the block tree to get to the settings:

m2MdSEGcuM

Not sure what the best solution would be tbh - maybe finding some more permanent way to let people know this is a mobile/tablet view triggered via Layout Grid block and easily accessible way to switch back to desktop view (even if the Layout Grid block is not selected)?

alaczek avatar Oct 16 '20 03:10 alaczek

This is a good ticket, and it touches on a great deal of issues:

  • Hard to select parent block.
  • Not always clear which block you're editing.
  • Responsive design controls in their infancy.

To an extent, all three should be addressed in the core project itself, and benefits that happen there would trickle to the columns block.

Specifically about the 3rd item, though, I would note that this is one of the reasons why I feel that having the DimensionControl in the sidebar is generally something we should try and avoid in favor of a more holistically thought out responsive editing interface. This is both the driving force behind this ticket discussing responsive editing, and the reason why we have integrated the breakpoint selector both in the block toolbar for the layout grid block itself, but also in this menu:

Screenshot 2020-10-16 at 10 39 52

I definitely agree that this is something to improve, and your experiences here, I feel, suggest that some of the ideas outlined in https://github.com/WordPress/gutenberg/issues/19909 have merit.

jasmussen avatar Oct 16 '20 08:10 jasmussen