Gutenberg-mobile: Page Templates: difficult to access content area in landscape mode on smaller devices

[designsimply]

Describe the bug

It's difficult to access the content area for editing pages in landscape mode on small devices because the page templates icons overlap with it.

To Reproduce

1. Go to My Sites > Pages > +.
2. Rotate the device to landscape mode.
3. Try to tap on the "Start writing…" prompt in the default first block.

Expected behavior

I expect that I should be able to tap on the default first paragraph block without interference, but the page templates overlap with the first block and it's hard to access it.

Screenshots

The problem is even more prevalent on small device screens.

Smartphone (please complete the following information):

• Device: iPhone 6S
• OS: iOS 13.3.1
• Version: WPiOS 14.5.0.1 TestFlight beta

[geriux]

Thanks for opening this issue @designsimply =)

There were some feedback discussions about this but I don't think any decisions were made.

The current status on 14.6 will be the same but without that transparency:

@pinarol 👋 you mentioned:

I thought this was already discussed when we dropped the first design which had the buttons under the paragraph block

Should we move these buttons to be under the first paragraph block? cc @iamthomasbishop

[iamthomasbishop]

Should we move these buttons to be under the first paragraph block? cc @iamthomasbishop

In landscape, perhaps. Or we could also hide the keyboard when the user first lands on or rotates to landscape. On portrait, I would keep as-is if possible, as that seems to be working well.

[geriux]

Or we could also hide the keyboard when the user first lands on or rotates to landscape.

I like this option better and it'd be easier than to switch the position of the picker depending on the orientation.

[iamthomasbishop]

@geriux Cool, let’s roll with that then. Do you think we should also fade out the buttons when the keyboard comes back in? (And fade back in when the keyboard is hidden?)

[pinarol]

I think we can put a smarter mechanism like:

• if the keyboard is closed: Display the template picker buttons normally
• if the keyboard is open: Check if window height is enough(detect a good enough threshold), if not, just hide the buttons.

Or we could also hide the keyboard when the user first lands on or rotates to landscape.

This would effect all writing flow not just the one with template picker buttons so I'd avoid doing that.
Also, we don't need to hide it for iPads.

[geriux]

Sounds good @pinarol!

[iamthomasbishop]

@pinarol

if the keyboard is open: Check if window height is enough(detect a good enough threshold), if not, just hide the buttons.

This would def be good 👍

This would effect all writing flow not just the one with template picker buttons so I'd avoid doing that. Also, we don't need to hide it for iPads.

Yea, I definitely wouldn't hide the keyboard on iPad — only on phone in landscape phone because of lack of real estate. The overall landscape writing experience could probably be an entire separate project, so for now, simply hiding the SPTs inline picker on landscape phone sounds good to me.

[wptester9845]

This issue has also been observed on the iPhone X (12.3.1) using WordPress 14.6.