Session notes: Editor, customizer, undo, AYS, vscroll – Macnchrome, iPhone 7+

Author drop down – iOS Safari

Dismissing the author drop requires tapping the disclosure triangle. Tapping author name opens but doesn’t dismiss. Outside taps in the header don’t dismiss.

Switch themes in customizer – Macnchrome

I miss theme switching in the dotcom customizer. The customizer is always where I head first to switch themes. Getting at live preview in the customizer when switching themes requires some clicking on dotcom. Here’s what core WP is up to.

https://make.wordpress.org/flow/2016/10/01/customizer-browse-install-preview-themes-on-mobile/

Editor – Macnchrome

  • Cmd+Z loses the cursor and scroll position and causes some reflow jiggle. This is a flow killer for me. I can’t use an editor that does this every time I try to undo, which is often, very often. I regularly forget to paste as plain text, using Cmd+V instead of Shift+Cmd+V. To clean up, I Cmd+Z so I can Shift+Cmd+V. Having to scroll back down to find my place interrupts an ingrained groove.
  • Updating a posts scrolls the editor to the top to show the notice. Losing scroll position when Updating a published post is frustrating. I like to periodically push my changes without losing my place. I like to edit a section, update to push it live, and then move on to another section. I do this often when updating living documents.
  • I often need to switch between Visual and HTML to put ids on headers and work around cursor bugs, particularly with images. Since the Visual and HTML tabs don’t stay on screen, I must scroll up, switch to HTML, find my place again amidst tag soup, make the change, scroll back up, flip to Visual, and scroll back down to where the journey started. I fall off my cognitive train in the process.
  • View Post in the published/updated notification opens in #new-tab-window, resulting in #forked-flow. I end up with multiple editing sessions because of this, confusing the hell out of me. I’m training myself with poor result to ignore View Post and always use Preview, although it is a source of anxiety over whether I’m seeing what’s actually published or a version with accidental, unsaved changes.
  • Immediately after publishing or updating, I’ll navigate away from the editing session with the editor back button or the masterbar. I often get an unsaved changes AYS despite there being no changes to save. This results in #anxiety-flow. I’m not sure if there are unsaved changes. I could Update to be sure, but what if I fat fingered something and added spurious text? If I ignore it and proceed without updating, I’ll get a prompt to restore the autosave when I come back. There can be days and months before I come back to something. Upon returning, I’ll wonder what’s up the post, and wish I could quick peek a diff between published and autosave. I’ll go through more #anxiety-flow to convince myself I’ve got the right content.

While working on the following post, I experienced these old familiars: Cmd+z in calypso editor loses vscroll and cursor placement. Moving links loses href. Moving blockquotes is awkward. Sometimes clicking in embeds loses vscroll. Editor scrolls down after adding link, losing cursor placement and vscroll.

https://hypubnemata.me/2016/10/03/dsisd-commons-2/

Three dots menu in actionbar, Macnchrome

The three dots button is a noop in this window initiated from the press this bookmarklet. This is the moment after publishing from Press This.

After clicking the follow button, the page reloaded and the actionbar changed. Now the three dots menu works.

vscroll loss switching between editors – iOS app

50% ish repro.

Start in visual.

Switch to HTML and note the vscroll jump.

vscroll loss after peeking link – iOS app

I want to be able to peek a link without losing vscroll or cursor position.

Tap into link.

Note the url and tap Cancel.

Vscroll bumped down and cursor position lost following keyboard flyup gymnastics.

reaching bottom – iOS app

Why can’t I reach the bottom of the post until I tap into the editor?

As low as I can go

Undo and discard changes AYS – iOS app

While editing a post, I accidentally removed hrefs from two links when I bumped the link icon in the keyboard button bar. Where is undo?

Leaving the editor offers to discard the changes. Is this the only route to undo? AFAICT, I have to leave the editor and discard all changes to undo.

I often get this discard ays when I enter and leave a post without making any changes. Is it not really discarding? This happens with several, but not all, posts. Don’t AYS for unsaved changes if there aren’t unsaved changes. Calypso does this too.

Ulysses has a great keyboard button bar. Undo, redo, and cursor buttons are essential to me.

 

https://test.wordpress.com/2016/09/05/session-notes-ios-app-editor-buttons-iphone-6/

Says published when updated

When I hit the Update button for an already published post, I get Published as a confirmation. This makes me question the status of the post.

Also, which posts was updated, and on what site? Give some information to ease anxiety. The pencil button is global. With multiple sites, the post just published may have nothing to do with what’s on screen after leaving the editor.

editor zooms – iOS Safari

The editor zooms when you tap into it, introducing hscroll.

Tapping the HTML tab zooms.

Slow loading Manage Sites – iOS app

This showed only four entries for about 10 seconds then filled.

scroll bleed – iOS Safari

Layout quirk after triggering AYS – Macnchrome

Start a post. Add content and then quickly hit the editor back button. This triggers AYS. Click through the AYS and this presents.

Related to https://github.com/Automattic/wp-calypso/issues/4509

Save/discard changes AYS and editor back button flow are banes of my sessions.

Latest drafts + button title

Hovering over the Latest Drafts + button shows gridicons-plus. How about “Create a new Post” as seen on the pencil icon? Or s/Post/Draft/?

Actionbar flicker

Getting the dancing action bar for the first time in awhile. As I scroll, I see two actionbars flick into being, a larger one and a smaller one that ends up beneath the larger one. Sometimes they continue their flicker dance until you scroll again. No screenshots or screencasts, sorry.

Editor Prime Directives

Thinking out loud, standard disclaimers.

  • Mind the cursor. Don’t lose vscroll or cursor position. Looking at you modals, popups, undo, redo.
  • Mind the keyboard. Watch keyboard flyup and what it does to vscroll and cursor position.
  • Respect calling context.
  • Avoid scroll, scan, correlate cycles.
  • Don’t AYS for unsaved changes if there aren’t unsaved changes.
  • Make undo easy, especially on small screens where mistakes are easy to make and hard to correct.
  • Clearly indicate when there are unpublished changes.
  • Offer a diff when offering to restore from autosave.

#app, #ays, #chrome, #customizer, #desktop, #editor, #ios, #macos, #phablet, #scroll-bleed, #scroll-loss, #session-notes, #undo, #undo-reflow, #vscroll, #web