Press This Revamp Merge Proposal

What is it?

Press This is a redesign of an existing feature with a focus on automation, speed, and mobile usability.

Download the plugin and check it out for yourself!

Features

One of the requirements of core is at least feature parity with the old version of Press This. Here’s a comparison chart of where the new Press This is.

Feature Old New
Drag & drop install on desktop Yes Yes
Editor, including: title, image/gallery addition Yes Yes
TinyMCE buttons (minus kitchen sink) Yes Mostly [1]
Ability to publish or save as draft Yes Yes
Post formats Yes Yes
Categories Yes IYes
Tags Yes Yes
Content Scraping Yes Improved [2]
Media Discovery Yes Improved [3]
Alert before closing/navigating away Yes Yes
Can add to bookmarks Yes Yes
Responsive, clean design, updated icons No Yes
Fast loading (speedy!) No Yes
Mobile installation No Yes

[1] A number of TinyMCE buttons are removed intentionally. Only necessary WYSIWYG buttons are shown now.
[2] Not only is it included, but it’s quite a bit smarter than the previous one.
[3] Now is actually quite exposed in the UI.

More generally

  • Trimmed down UI for extra-speedy reposting of your favorite left shark gif
  • Core architecture of the plugin/tools is an as-pure-JavaScript-app as possible
  • Currently AJAX-driven, but ready to be switched to using the WP-API endpoints as they become available in the future
  • Backward compatible with the current version of the Press This bookmarklet as bundled in WP, but also bring its own, more powerful one with it
  • Can blog content from any web page found online
    • highlighted text gets pulled in as a blockquote
      • if nothing is highlighted, it makes a good guess as to what should be quoted
    • in-page images get pulled in to choose from
      • Said images are augmented with meta data to sort them in the order the site advertises to be best
    • audio, video, and and twitter embeds are also listed in the suggested media to insert at your whim
  • Saving draft sends you into the full editor (and saves) so you can do your fancier WYSIWYG-y things
  • Publishing is awesome and quick
  • Image side-loading
  • Ultimate (the best ever probably) WYSIWYG toolbar that’s trimmed down to just B, I, Blockquote, Link/unlink, undo, redo (and lists on wider screens)
  • 2 modes
    • Direct access: Like quick post, but awesome and totally usable on a fancy phone
    • Bookmarklet
      • Similar to the older Press This in use. Save as bookmarklet > Press a site for quick reposting of things
      • If no content detected (new tab), you can use it like a quick post application

So which problems are we solving?

  • Outdated UI –> Updated
  • No responsive styles –> ultra responsive
  • Decent automation –> better automation (suggested media, blockquote, etc)
  • Pretty dang near impossible to add as a bookmark and use on a tablet/phone –> Added our own tool page (temporary) to add improved markup (still could use a bit of finessing)
  • Suggested media was hard to find –> Now is hard to miss
  • A bit rough and slow to use and compose with –> Pretty dang streamlined

What brought us to this solution and what other potential solutions did we explore?

When we were initially exploring designs and ideas, a few people suggested just improving Post New. The main reason we opted not to was speed. Post New comes with all of wp-admin and its files. It’s a bit of a beast. We wanted an extremely light, extremely fast (both in performance and in usability) way to post and keeping Press This was a good way to go. We can also pull the ideas and techniques we like back into Post New if successful and useful.

We experimented with SVG icons (one less http request, but ultimately removed as Dashicons are required for the editor). We planned to use the upcoming API. We have trimmed down stylesheets and JS (only the styles necessary for a PT view). There is no extra UI that could get in the way of going from 0 to published post. Press This also has the luxury of being able to fall back to the full editor (via Save Draft) for those that have plugins and other features the need to set before posting.

Usability testing (not user testing y’all)

We did a couple rounds of usability tests. One for a11y and another with some new users.

Both had tremendous difficulty in even adding the bookmarklet. @marcelomazza did a pretty solid job fixing up the add bookmarklet screen.

We ran into a number of a11y issues and addressed as many as we could. Could still use another round of a11y testing.

Once the new users figured out how to install it, they didn’t have many issues creating a post. I’d like to do more with ultra Space Jam pro users like yourselves.

 Mega thanks to everyone involved so far:

@stephdau @azaozz @marcelomazza @ryan @kraftbj @afercia @iseulde @melchoyce @folletto @georgestephanis @helen @drewapicture @danielbachhuber @dd32 (for epic Github > SVN sync)

And thanks to all the testers so far!

#4-2, #feature-plugins, #merge, #press-this, #proposal