Import: Medium importer flow

Here are @designsimply‘s notes for Medium importer testing done via horizon using Safari 9.1 on Mac OS X 10.11.13. See PR 4248.

I was unable to complete an import (spoke too soon) the import completed but it took over 10 minutes at the “Finishing up the import” step.

My testing steps:

  1. Download test archive https://cldup.com/Cxkn9ukr3i.zip or https://cldup.com/uZxmPN37ZA.zip
  2. Go to https://horizon.wordpress.com/settings/import (select a site if prompted)
  3. Click the Start Import button next to Medium
  4. Click to upload a file, select file, click Choose
  5. Click the Start Import button again after the archive file was uploaded
  6. Click the Start Import button again after I am notified the import found one author on my site
  7. Watch status bar progress (this is as far as I got), this step took over 10 min
  8. Get a message saying, “All done! Check out Posts or Pages to see your imported content.”
  9. Check out Posts and Pages to see how many things imported, there are 3 published posts (1 is private), 2 drafts, and 1 page
  10. Check to make sure the private post cannot be viewed logged out (worked as expected)
  11. View and compare the Medium and imported posts

The import appeared to get stuck at the “Finishing up the import” step. Not sure if it’s related, but after the import stalled, during the “Finishing up the import” step, I checked the console and saw this error (doesn’t look importer-related really):

TypeError: undefined is not an object (evaluating ‘this.notes[0].type’)
h — build.min.js:10:15017

Visual record:

Feedback/nitpicks:

  • Having to click “Start Import” three times in a row feels off
  • The “Finishing up the import” step seemed really long for the amount of content given, because of that it felt broken to me even though there was a progress bar
  • Noticed images are wrapped in figure and multiple divs including an empty div, can that be avoided? (see example below)
  • Imported images do not seem to have size attributes (screenshot), looks like medium uses style attributes in a separate div for size (screenshot) and it’s not picked up since style attributes are intentionally stripped—that’s unfortunate

HTML example for an image in medium:

<figure name="f342" id="f342" class="graf--figure graf--layoutOutsetLeft graf-after--figure">
<div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 525px;">
<div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*vive3GY3N6sAj80W9FTRig.jpeg" data-width="800" data-height="800" data-action="zoom" data-action-value="1*vive3GY3N6sAj80W9FTRig.jpeg" data-scroll="native"><img src="https://d262ilb51hltx0.cloudfront.net/freeze/max/60/1*vive3GY3N6sAj80W9FTRig.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="75"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://d262ilb51hltx0.cloudfront.net/max/1200/1*vive3GY3N6sAj80W9FTRig.jpeg" src="https://d262ilb51hltx0.cloudfront.net/max/1200/1*vive3GY3N6sAj80W9FTRig.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://d262ilb51hltx0.cloudfront.net/max/1200/1*vive3GY3N6sAj80W9FTRig.jpeg"></noscript></div>
</div>
</figure>

HTML for the same image after it is imported into WordPress.com:

<figure>
<div>
<div></div>
<div><img src="https://madefortesting654.files.wordpress.com/2016/03/768be-1vive3gy3n6saj80w9ftrig.jpeg" alt="" /></div>
</div>
</figure>

Test meta data was helpful 🙂

Screen Shot 2016-03-30 at Wed Mar 30 5.42.45 PM

#import, #macos, #medium, #safari