Improve the writing experience on mobile

[iseulde]

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.

[ericlewis]

This is great.

[ryan]

Looks like the patch needs refresh.

$ grunt patch:29923
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?

Running "patch:29923" (patch) task
patching file src/wp-includes/js/tinymce/plugins/wordpress/plugin.js
Hunk #1 succeeded at 844 (offset 8 lines).
Hunk #2 succeeded at 887 (offset 8 lines).
patching file src/wp-includes/js/tinymce/plugins/wplink/plugin.js
Hunk #1 FAILED at 105.
1 out of 1 hunk FAILED -- saving rejects to file src/wp-includes/js/tinymce/plugins/wplink/plugin.js.rej

[netweb]

Replying to ryan:

>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?

@Ryan, you should also run npm install to fix that missing NPM module :)

[joehills]

Refreshed patch by @isuelde too reflect updated tinymce conditional structure in wplink/plugin.js

[ryan]

29923.2 on an iPhone 6+

[ryan]

While selecting

[joehills]

I wasn't sure if the toolbar was supposed to float like that on the iPhone or stick to the bottom like the iPad screenshot, so I just focused on getting the patch to actually apply. Where should we go from here?

[ryan]

A big aggravation for me on touch devices is how the Cut|Copy|Paste menu obscures the editor toolbar and the link controls when trying to create links on the first couple lines of text. I enthusiastically support improving that experience.

Notes on the patch, as tested on an iPhone 6+:

• The link modal doesn't always open. The link button often noops.
• The toolbar follows you as you drag to select. It manages to stay out of the way but could end up feeling like drag baggage. I need to use it more to see how nicely it plays in my flow. It could clutter already awkward iOS selection.

[karmatosed]

I would suggest with Gutenberg we have a chance make the mobile flow better. I will link this from the issue on GitHub: ​https://github.com/WordPress/gutenberg/issues/1712. Tentatively removing ux-feedback here as hopefully a lot of this can be solved with Gutenberg.