Mobile Press This

Per this week’s meeting, I’m looking at swipe/touch actions within Press This. Before I dive too deep into it, I wanted to confirm that the Press This bookmarklet doesn’t work on mobile. I wasn’t able to get it to save to my bookmarks in either Android/Chrome (latest/latest) or iOS 8 Safari.

Clicking the existing bookmark (from syncing with my desktop) on Android did nothing.

Did I overlook someway to add this or are the touch events for people who directly bookmark /wp-admin/press-this.php ?

Press This Meeting, 2014/09/30

https://make.wordpress.org/core/2014/09/30/press-this-meeting-20140930/

(I sure wish I could use our PT to create posts like this.)

Embed mockups

Started styling for embed UI

So far, just an oEmbed iFramed object and a video:

I need to research native WP video/audo/playlist UI before I mess with that. (we should probably use that for uploaded media if it’s nice on touch devices.

#desktop-mockups

Media galleries mockups

I decided to avoid trying to replicate how the gallery could look when published and focused on making interacting with it a breeze on any device (hopefully). This means I opted for the familiar same-sized square grid accompanied with a label and options.

How it could look on larger viewports:

Gallery

And on smaller viewports (vertical in this case):

smaller viewport

After selecting an image:

selected image

I’d love to hear your thoughts on these interactions. Thanks!

#desktop-mockups

6/4 meeting recap

1st public version!

  • core architecture of the plugin/tools as 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
  • is backward compatible with the current versino of the Press This bookmarklet as bundled in WP, but also bring its own, more powerful one with it
  • can blog any web page found online, blockquoting an excerpt, including a selection of in-page images to choose from said images are augmented with meta data to sort them in the order the site advertises to be best
  • overrides /wp-admin/press-this.php and its behavior, so that we’re 100% backward comaptible
  • overrides the bookmarklet JS code provided in /wp-admin/tools.php

3 modes
1) direct access: quick post of sort, more to come with media and formatting tools
2) modal: when accessed via new bookmarklet code: will show in an iframe within the visited page itself
3) popup: if the currently visited page is SSL but the target install is not, we open Press This in a popup instead. We also do that if the”legacy” bookmarklet code is used. It’s pretty awesome for Pressing from your sweet smartphone.

Next steps

  • formatting and media upload tools (+editor)
  • de-selecting a picture (if none wanted)
  • embeds
  • Direct access permalink location

Our take on a Press-This…

Our take on a Press-This rewrite as a plugin is now installable in WordPress

https://wordpress.org/plugins/press-this/

Please be aware that this is version 0.0.1a, implying it might eat your breakfast, and then break your site. We’re developing very rapidly, and things will be evolving quickly. Have fun testing, and don’t fret the current apparent lack of features. Cheers! :)

A sample of things to come

Old and busted: blogging a web page with a picture in WordPress, through the bundled Press This bookmarklet (7 steps, 9 if you include having to select some text for a meaningful description, and in-popup scrolling):

Upcoming new hotness: blogging the same page with a picture in WordPress, through our in-development Press This tool, in bookmarklet mode (2 steps):

:D