Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout Grid: Mobile view is confusing #151

Open
alaczek opened this issue Oct 16, 2020 · 1 comment
Open

Layout Grid: Mobile view is confusing #151

alaczek opened this issue Oct 16, 2020 · 1 comment
Labels
Enhancement New feature or request

Comments

@alaczek
Copy link

alaczek commented Oct 16, 2020

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)?

@jasmussen
Copy link
Member

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 WordPress/gutenberg#19909 have merit.

@johngodley johngodley added the Enhancement New feature or request label Jan 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants