WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 5 months ago

#29923 new enhancement

Improve the writing experience on mobile

Reported by: iseulde Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-ux-feedback has-ui-feedback dev-feedback has-patch
Focuses: ui Cc:
PR Number:

Description

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.

Attachments (5)

IMG_0026.PNG (1.1 MB) - added by iseulde 5 years ago.
29923.patch (1.6 KB) - added by iseulde 4 years ago.
29923.2.patch (1.6 KB) - added by joehills 4 years ago.
Refreshed patch by @isuelde too reflect updated tinymce conditional structure in wplink/plugin.js
IMG_4556.png (219.6 KB) - added by ryan 4 years ago.
29923.2 on an iPhone 6+
IMG_4557.PNG (220.3 KB) - added by ryan 4 years ago.
While selecting

Download all attachments as: .zip

Change History (15)

@iseulde
5 years ago

#1 @ericlewis
5 years ago

This is great.

@iseulde
4 years ago

#2 follow-up: @ryan
4 years ago

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

#3 in reply to: ↑ 2 @netweb
4 years ago

  • Keywords needs-refresh added

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
4 years ago

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

#4 @joehills
4 years ago

  • Keywords has-patch added

#5 @joehills
4 years ago

  • Keywords needs-refresh removed

@ryan
4 years ago

29923.2 on an iPhone 6+

@ryan
4 years ago

While selecting

#6 @joehills
4 years ago

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?

#7 @ryan
4 years ago

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.

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


4 years ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

#10 @karmatosed
2 years ago

  • Keywords has-ux-feedback has-ui-feedback added; ux-feedback ui-feedback removed

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.

Note: See TracTickets for help on using tickets.