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

[retnonindya]

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)

RPReplay_Final1721729262_480.mov

WordPress information

• WordPress version: 6.6
• Gutenberg version: 18.8.0
• Are all plugins except Gutenberg deactivated? No. My plugins are: Akismet, Jetpack, and Jetpack Protect
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes. Twenty-Twenty Four

Device information

• Device: iPhone Pro Max 13
• Operating system: iOS 17.5.1
• WordPress app version: None
• Browser: Chrome mobile ver. 127.0.6533.56

[mrfoxtalbot]

CCing @annezazu for additional triage and escalation since this bug impacts very negatively the mobile writing experience discussed in #63255

[annezazu]

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

[ellatrix]

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]

Related #33198

[retnonindya]

@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.)

480_RPReplay_Final1725414856.mov

I hope it helps!