search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.57k stars 4.22k forks source link

Paragraph Block covered by keyboard on post/page editor when working on Mobile #63844

Open retnonindya opened 4 months ago

retnonindya commented 4 months ago

Description

When adding a text using Paragraph Block under Image Block, the keyboard covers the Paragraph Block that currently being worked on.

Step-by-step reproduction instructions

  1. Open post/page editor using mobile browser (in my case, I'm using Chrome on iOS)
  2. Add an Image Block
  3. Add a Paragraph Block under the Image Block
  4. See the text area/Paragraph Block got covered by the keyboard.

Expected behaviour

The Paragraph Block to be the focal point on the screen and I should be able to type and see the texts as I type.

Actual behaviour

The Paragraph Block got "hidden" and when I type text, I can't see it. We can "fix" it by swiping the screen up so the Paragraph Block becomes the focal point on the screen, but this should not happen in the first place.

Screenshots or screen recording (optional)

https://github.com/user-attachments/assets/061a34e6-f31b-465e-aef7-dbd116b045a7

WordPress information

Device information

mrfoxtalbot commented 3 months ago

CCing @annezazu for additional triage and escalation since this bug impacts very negatively the mobile writing experience discussed in https://github.com/WordPress/gutenberg/issues/63255

annezazu commented 3 months ago

Thank you for flagging this. This is rough. @ellatrix I've added this under UI for your tracking list.

ellatrix commented 3 months ago

Add a Paragraph Block under the Image Block

Could you elaborate on how you added the paragraph block under the image block? It's not possible to see it on the video. Whenever there's no text selected, the keyboard will hide, so it's not possible to press Enter.

ellatrix commented 3 months ago

Related #33198

retnonindya commented 3 months ago

@ellatrix -- My apologies for the late response! And yes, so the process goes like this:

  1. I opened the Post Editor.
  2. I added Image Block by typing "/..." as usual.
  3. Now, you are correct that there is no text selected, the keyboard will hide. At this point, I can still scroll down/see the blank area under Image Block. I scrolled down. On the video above, you can see me scroll down (at the very beginning of the video. Second 1 and 2-mark.)
  4. I tap the blank area. This action automatically adds a Paragraph Block (text-based). That's when the keyboard appears.

I made a new video, this time from the "Add New Post" step, and you can see me scrolling the screen up and down. I first tapped "Add Title." The keyboard appears as expected, and I can still see the title area. I then scrolled down and tapped the blank area under Image Block. The issue happened.

(Also, I'm sorry for the video quality. I had to reduce the quality to meet GitHub's 10 MB file limit 😞 I hope it's clear enough, though.)

https://github.com/user-attachments/assets/4a7535a3-b680-4971-ad09-5c120deeaf5a

I hope it helps!