Iterating on the inserter for mobile

[karmatosed]

We have a lot of similar issues, all around improving the inserter for mobile. Having one issue we can focus on will help get this solved.

The mobile experience for inserting right now has a number of issues and one solution is to reduce this to a single inserter. There are a number of tickets to reflect on for this:

• Adding block is impossible when window width is less than 780px Adding block is impossible when window witdh is less than 780px #2471
• Inserter block takes over screen Inserter block takes over screen #2672
• Blocks Menu Opens Incorrectly on iOS Portrait Blocks Menu Opens Incorrectly on iOS Portrait #1280
• Cannot insert new blocks in iOS Safari Cannot insert new blocks in iOS Safari #2602

(Note: closing those tickets to focus here)

Technical issues around this are summarised [here] by @aduth (#2602 (comment)):

It's a tricky problem to solve because the Popover component has built-in logic to try to flip itself when exceeding bounds, but doesn't yet have the ability to know how to handle the case where there is no suitable position to open.

In my mind, I'm thinking one or more of:

The inserter menu probably shouldn't have offset 100vh height for the content inserter
If we encounter the case where no suitable position exists, we should at least set a max height/width of the popover to ensure it doesn't go offscreen, then allow remaining content to be scrollable
Edit: Another, perhaps more preferable option, is to treat the inserter as a full-page modal in mobile contexts, not "attached" to the specific anchor node.

Ultimately, we need a solution that solves all these issues. My thoughts are a single inserter is the way to go. I would recommend it being the top one, but discussion and ideas are important around this. We are not going to get far in mobile testing without this being fixed.

[ellatrix]

High priority for mobile xp imo. Gutenberg is not very useful without it.

[ellatrix]

Here's another: #2577.

[hedgefield]

The Inserter is indeed still very broken.

The sidebar works quite well on mobile, one option could be to apply that same look on the inserter. I think a lot of the weirdness it displays right now is because it's (incorrectly) figuring out which way to render towards. If we take that away and always have it take over the whole screen, that seems better already.

Are there any PRs or examinations being done on this already? As 1.7 was slated as the mobile UX update.

[afercia]

always have it take over the whole screen,

I'd agree that on small screens all the popup/modals and similar should be "full screen": take the max available space and no need to calculate positions.

[mtias]

Closing as full-screen popovers cover the main goal. Let's open specific issues for any other changes.