Question: do images get properly…

Question: do images get properly attached to posts when publishing via various WP.com apps and clients?

One reason to know the answer is that certain displays, like Reader, might depend on an image being attached to the post in question to pull out a representative image to the post card in the Reader stream.

For example, in the Android app Reader: Reader: certain posts with an image don’t show the image.

The Flow Patrol team recently dug into this more (source: 6 tagged posts) to see how each app or client behaves. Here are the results:

Environment Image attached? Preview in Reader? Test results
Jetpack WP Admin Yes Yes #
Simple WP Admin Yes Yes #
WP Android No Yes #
WP iOS Yes Yes #
Calypso Yes Yes #
Gutenberg No Depends #

Summary: Looks like both Gutenberg and WP Android media handling could use more investigation to make sure images added to posts during publishing are attached to said posts correctly.

#image-post-flow #attachments #media

Image Posting Flow – Self-hosted (Jetpack) wp-admin

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the wp-admin dashboard of a self-hosted WordPress site (which happens to be connected via Jetpack, although that’s largely irrelevant for this flow).

#image-post-flow

  1. From the wp-admin dashboard, open the Posts list
  2. Click Add New
  3. Add a title and body to the post
  4. Click Add Media
  5. Click Upload Files
  6. Click Select Files, and choose a file from your local machine (note that the file selection dialog isn’t visible in the video below)
  7. Click Publish

Question 1: Is the image you uploaded attached to the post afterward?
Yes –
wp-admin-image-attached-from-wpadmin-jetpack

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?Yes (Seen here on desktop web, but also observed in Android)
wp-reader-image-present-from-wpadmin-jetpack

 

Image Posting Flow – Gutenberg

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from Gutenberg (version 1.4.0 on a Pressable self-hosted site).

#image-post-flow

  1. Select Gutenberg > New Post in WP Admin.
  2. Enter a title and text.
  3. Add an image block.
  4. Drag and drop an image on the image block.
  5. Wait for the image to upload.
  6. Select Publish in the top right.
  7. Select “View Post” to view the published post.

Question 1: Is the image you uploaded attached to the post afterward?

No, I checked in the media library and the image was not attached to the post:

Screen Shot 2017-10-13 at 5.57.18 PM.png

This was an issue that is supposed to be resolved:

https://github.com/WordPress/gutenberg/issues/1586

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?

The image does appear on the post in the Calypso Reader feed:

CalypsoReader-GutenbergPhotoPost

However, there is no image preview on the Reader feed in the iOS and Android apps:

Image Posting Flow – Calypso

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from Calypso (in Chrome, Mac OS 10.12.6).

#image-post-flow

  1. Select the Write button in the top right (masterbar).
  2. Enter a title and text.
  3. Select the Add Content button.
  4. Select Media.
  5. Drag and drop an image into the media library.
  6. Select the Insert button.
  7. Wait for the Publish button to be enabled.
  8. Select Publish in the top right.
  9. Select Publish again to confirm.
  10. View the post preview.

Question 1: Is the image you uploaded attached to the post afterward?

Yes. I confirmed in the WP Admin media library that the photo is attached to the post:

Screen Shot 2017-10-13 at 5.37.31 PM.png

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?

Yes. I confirmed the image shows up on the post in the Reader feed in Calypso, iOS app, and Android app:

Image Posting Flow – WPiOS

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the iOS native app (version 8.5 on iPhone 6, iOS 11.0.3).

#image-post-flow

  1. Tap the Post button in the center of the bottom navigation bar.
  2. Enter a title and text.
  3. Tap the Add Media button.
  4. Select a photo from the device photos.
  5. Tap “Insert 1” to insert the photo in the post content.
  6. Wait for the photo to upload.
  7. Tap “Publish” in the top right.
  8. Tap the View Post button to view the post.

Question 1: Is the image you uploaded attached to the post afterward?

Yes. I confirmed in the WP Admin media library that the photo is attached to the post:

Screen Shot 2017-10-13 at 5.10.49 PM

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?

Yes. I confirmed the image shows up on the post in the Reader feed in Calypso, iOS app, and Android app:

Image Posting Flow – WordPress.com Simple wp-admin

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the wp-admin dashboard of a WordPress.com Simple site

#image-post-flow

  1. From the wp-admin dashboard, open the Posts list
  2. Click Add New
  3. Add a title and body to the post
  4. Click Add Media
  5. Click Upload Files
  6. Click Select Files, and choose a file from your local machine (note that the file selection dialog isn’t visible in the video below)
  7. Click Publish

Question 1: Is the image you uploaded attached to the post afterward?
Yes –
wp-admin-image-attached-from-wpadmin

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?Yes (Seen here on desktop web, but also observed in Android)
wp-reader-image-present-from-wpadmin.png

 

Image Posting Flow – WPAndroid

There have been some reports of people attempting to write posts with images, only to find that the images aren’t actually present on the post. To work through the problem, we’re going to post a quick series here on https://test.wordpress.com of image posts from a variety of platforms. This is the post documenting the flow from the Android native app.

#image-post-flow

  1. From the main site menu, tap the Compose Post button on the bottom right of the screen
  2. Add a title and text
  3. Tap the Add Media button
  4. Select a photo from my phone’s memory
  5. Tap Publish
  6. Wait for the post to upload
  7. View the post

Question 1: Is the image you uploaded attached to the post afterward?
No –
wp-admin-image-unattached

Question 2: If you view the resulting post in our various Reader environments, do you see an image preview?
Yes (Seen here in WordPress.com / Calypso web, but also seen from the Android app)-
wp-reader-image-present

Social Sign Up – Visual Record

I often sign up as a new user for testing. Sometimes I take screenshots as a visual record. They serve as a reference and keep a pulse on how things change over time. Here is a visual record of the new social sign up process that you will soon be able to use to create a WordPress.com account.

Mobile Empathy Challenge: Edit posts with embeds

My posts often have embedded tweets and YouTube videos. Conversations start on Twitter and then make their way into blog posts, where the tweets are cited. These days, a whole lot of journalism and advocacy features embedded tweets.

Here’s a sample of what my posts with embeds and videos looks like in the iOS app.

IMG_3885

Newlines have been stripped. This is an uneditable, run-on mess. I don’t even try to edit this for fear of messing something up. The iOS app is not a valid option for editing the kind of posts I write.

Unfortunately, neither is Calypso in mobile Safari. When a video is present, the text overflows the viewport. (Notice also the blank space below the title.)

IMG_3883

If I pinch to zoom all the text into view, I get this.

IMG_3884

This overflow and zooming is caused by embedded videos.

IMG_3886

The video overflow is not the only frustration. The Twitter embeds do a jittering resize dance that interferes with scrolling and cursor placement. I’m too tired to do a screencast, so here’s a static shot of two tweets that exhibit the behavior.

IMG_3887

Most of my posts contain embedded tweets. I think that is fairly typical of self-advocates bringing social media discussions into their posts. Many of my posts contain a related video or two from other self-advocates. Between embedded tweets and videos, I cannot edit my posts on my phone with either the iOS app or Calypso. I have to get out my laptop. I’m disabled, in chronic pain, and spend much of my time in bed. My phone is my primary device. I use my laptop only when I have to, which seems to be whenever I want to publish or edit posts on wordpress.com. Many of my posts are living documents that I continually update. I cannot update them from my phone using either the app or the web.

Other problems with editing on the mobile web (some of which apply to desktop too):

  • The editor toolbar is not pinned
  • Sometimes embeds load as blank placeholders.
  • Embeds cause reflow as the load, stomping vertical scroll postion and cursor postition.
  • Scroll bleed in settings menu.
  • Scroll bleed in preview.
  • The author selector doesn’t dismiss with outside taps.
  • Info bubbles in the settings sidebar sometimes run offscreen.
  • Jittery embed reflow when switching from HTML back to Visual.
  • Losing vscroll and cursor position when toggling settings.
  • Settings opening scrolled down to the bottom.

#editor, #embed-reflow, #embeds, #mobile, #scroll-bleed

Session Notes – Preview scrolling, embeds in iOS app editor, repeated notifications, editing flow, disappearing embeds, post-post

Pardon this lazy, unedited, and raw session note.

Can’t scroll to end of preview

And sometimes scroll jumps back to top

My iOS flow: I compose my posts entirely in Ulysses, including tags and featured images. I publish to Calypso, where I preview. But, preview doesn’t scroll all the way down and often jumps back to the top while scrolling.

Outside tap to dismiss

Tapping in the content doesn’t dismiss the follow confirmation dialog. Tapping in the blank space of the actionbar does dismiss, but I haven’t been able to make it a habit. I always tap a couple times in content before remembering to tap in the actionbar.

iOS app embeds

Embeds don’t display in the iOS editor and their URLs don’t receive newlines. I don’t use the iOS app to edit most of my posts due to this. I’m afraid to edit these posts. This happens with the native editor and the production visual editor.

Notifications icon disappears

Tap notifications and then W menu.

Notifications with repeated ops

This notification style always gets in the way of repeated operations. I let them pile up until they obscure and then Cmd+R to save clicks.

https://github.com/Automattic/wp-calypso/issues/3203

Editing

Having a rough time editing a post. I pasted some text into a post. Added block quotes to one of the pasted paragraphs. Noticed I put the text in the wrong place. Tried to cut and paste to move it, but ran into the blockquote and half-height cursor problems. When coupled with slow connection that prevents embeds from loading in a displaying fully, I wasn’t confident in my edits. Tried the “revert to draft button” (I didn’t get a screenshot) thinking it would revert to my state at the beginning of my edits, but it seems to unpublish the post. When I clicked the “revert to draft” button, I thought, for a moment, that it wasn’t doing anything. Then I noticed the subtle spinner in the Update button. I have a hard time seeing that animation.

Embeds need a placeholder. I see empty space for embeds often, making me think they have disappeared.

Published the post again. Original permalink retained. Leaving the editor after pub triggered our lingering NMIT, the save/restore AYS.

Embeds didn’t load after pub, making it looking like they disappeared.

Chrome chewing up CPU. Closing the editor session brought CPU back down. I’m pretty good at triggering it. My embed and blockquote posts that reflow on every editor page load are a workout.

I can’t really edit these posts anywhere in WP. The iOS app doesn’t display embeds and strips newlines between them. On desktop, all of the reflow makes editing a chore to avoid. I still haven’t made the edit that started this adventure.

I think core wp-admin caches embeds and doesn’t reflow like Calypso, but haven’t tested that lately.

Lots of journalism is full of Twitter embeds. Calypso’s embed handling is a bad experience.

Reflow on every editor page load, reflow when adding new embeds, reflow on undo, partially loaded embeds, blank embeds, vscroll loss.

No access to embed link without going to HTML editor. Can’t edit embed except to delete.

Which means scroll-scan-correlate cycles between visual and html editors.

My posts full of embeds and block quotes are my litmus, and I can’t edit them without quite a lot of grief on any platform, web or app.

I consider these posts a good litmus. Take a look at what journalists are creating these days. Lots of Twitter embeds and quotes.

So hear this flow canary singing embeds.

Global post search doesn’t return results

I have many posts that should show for this search.

Confirmed by two others.

Partial, disappearing embeds

Embeds often load in partially.

And then disappear. In this shot, the embed went away and the editor ended up scrolled all the way down into the trailing chunk of whitespace that always bugs me.

The embed link is still there.

Switching to HTML and then back to visual editor fixes the embed display.

But what’s with that more tag? Maybe I accidentally clicked into the HTML toolbar on the way to the visual editor. I sometimes miss the tabs, especially when going back and forth doing scroll-scan-correlate between the editors. Pin the editor tabs.

Post-post

One of the first things I do after pubbing is grab a link to the post. Even with publicize on I usually want a link, often to drop in a chat or email. Anecdote for post-post.

My flow is very clipboard heavy. I love Copied app.

Notifications error

Sometimes notifications won’t open, or it opens but refuses to dismiss with an outside click. These errors showed after clicking notifications.

This might be slow connection related. Clicking notifications while the page is still loading might be a contributor.

Need help opens another customer instance in a new tab

Resolves to https://ryan.wordpress.com/wp-admin/customize.php?return=https%3A%2F%2Fwordpress.com%2Fsettings%2Ftraffic%2Fboren.blog&calypso=true&calypsoOrigin=https%3A%2F%2Fwordpress.com&frame-nonce=c485046c87

Happens even with Ghostery paused.

Rough iOS web session

I’m a broken record, but this experience was another of cascading failure and frustration. I can’t edit the kind of posts I make in any of our interfaces without frustration and distrust.

I also had a restore AYS pop up.

Facebook publicize re-auth

While doing reauth from the iOS with 2FA on my FB account, I got stuck on this screen after submitting my generator code. I confirmed the auth on desktop and it remained stuck. Tapping X does not dismiss. I had to kill the WP app. I lost my draft.

Post opens zoomed and overflowing

I tried adding a new tweet to that since I couldn’t work with the iOS app. After pasting, interface went it reflow jitter, constantly jumping scroll around. I backspaced over the added tweet even though it kept jumping offscreen. Once the whole thing was gone the reflow jitter stopped. I abandoned the post, proceeding through the unsaved changes ays. Wish I could discard changes so I know I’m rolled back.

Bottom line: I can’t edit what I write in either interface, forcing me to desktop. I’ll probably forget what I wanted to add before I get to a laptop.

When I’m feeling persistent, I’ll drop my links and edits in a “To edit” sheet in Ulysses so they are saved for later. I’m not feeling persistent right now.