[wp-trac] [WordPress Trac] #29923: Improve the writing experience on mobile

[WordPress Trac]

#29923: Improve the writing experience on mobile
-------------------------+-------------------------------------------------
 Reporter:  avryl        |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Future Release
Component:  Editor       |    Version:
 Severity:  normal       |   Keywords:  ux-feedback ui-feedback dev-
  Focuses:  ui           |  feedback
-------------------------+-------------------------------------------------
 Maybe something like the screenshot attached.

 Problems:

 * In iOS, position fixed doesn't work when the keyboard is open. And
 that's exactly when we need it. But there are workarounds. We can absolute
 position everything and make only the iframe scrollable. Oh wait...
 * `overflow: hidden;` doesn't work on `html` and `body`. Can be worked
 around by using `#wpwrap` instead. We can also block scrolling completely
 with JS since the content we want to scroll is in an iframe. But...
 * For some reason Apple decided to automatically adjust the height of
 iframes to its content. So for this we'll need to force a specific height
 on the iframe, `html` and `body` tags, and make the `body` scrollable.
 Seems to work.
 * There are no events fired when the keyboard shows or hides. Also no
 resize event. The keyboard kind of floats over the window. This means that
 the window height doesn't change and that we can't detect the height of
 the visible area and keyboard. But it's possible to work around that too.
 :)

 The screenshot is from a working prototype.
 Ideally there should be a left and right arrow on the toolbar so you can
 browse the tools.
 The post.php screen stays mostly the same, with a preview of the content.
 When you click on it, it goes "fullscreen". When you hide the keyboard or
 tab away, it goes back to the original screen.

 The alternative is to leave things as they are, with the toolbar unpinned
 on top of the editor, but we could still move all the buttons to one row
 with arrows to browse them.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/29923>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform