Press This in-person meeting summary 10/28/2014

• We’re going to integrate the media modal
  ** We will make smart decisions on how much to show and what pane to show on the modal (if a site is pressed, default to a “tab” showing the images from the site)
• We’re going to make it easier to add to bookmarks from a phone
• Looking into custom keyboard characters to make those using markdown to use it with less effort
• We’re going to add two tinyMCE buttons to the mobile layout: Link and Quote.
• We’re going to look into browser extensions for mobile.

I’m sure I’m missing a few things. Feel free to add on.

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:

And on smaller viewports (vertical in this case):

After selecting an 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

5/21 meeting recap

Overall, a pretty quick meeting. We’re getting closer.

Install user flow

I really want to look how the bookmarklet, extension, and app are installed this week.

User color scheme

We should look at pulling the user’s admin color scheme.

A/V embeds

Mockups/design needs to be addressed.

Desktop Modal

• Added minimal WYSIWYG
• Added modal toggle button (needs a bit more iteration)
• One image selected for featured/first image with left/right buttons to cycle through other images

#desktop-mockups

5/14 meeting recap

Modal

We’ve decided to load Press This in as a modal instead of a new window.

Pressed images

Looking at showing a single image that you could cycle through or remove. (like Facebook, but nicer)
Adding the ability to add more images to the camera button.

Dragon drop

I’m going to do a couple mockups showing what dragging or adding images from the website to the editor might look like.

Copy pasta

We agreed that adding copy from a page via copy/paste should add it as a blockquote.

Markdown

There’s a bit of a discussion on this. Composing post just for this.

WYSIWYG

I’ll do some mockups with a barebones WYSIWYG (B, I, quote, list)

Embeddables

I’m going to do some mockups as to how embeddables will look. This includes audio, video, and oembed.
For reference: https://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F

Press This Desktop

I’ve taken into account ideas from @folletto and @stephdau in these latest set of mockups.

Post after pressing an website

* The images are arranged and sized by priority using meta-data.
* The interface colors and buttons are pulled from WordPress defaults.

Post with images selected

* After selecting images, they are inserted where the cursor was last or at the top.

Image dragging

If feasible, it would be nice to have drag and drop usage as well to add and move media around. I think it would be a nice fairly discoverable way to easily move images around on both desktop and mobile.

The paragraphs shift to show where the image will go.

Image Added

On release (if dragged) or insert, the image is dropped in full-width.

Empty post

An empty post to show the placeholders

A pressed quote

* This is still using markup.
* Strong and emphasis are shown.

#desktop-mockups

So far so good

Our first meeting will be Wednesday (tomorrow) at 16:00 UTC in #wordpress-ui.

For those jumping in, here’s a pretty good summary of what we’ve been up to so far:

• @melchoyce has already interviewed six people.
• @folletto mocked up how Press This could look on desktop.
• @folletto added a summary of possible architecture choices for the multi-blog component
• I put together some initial mobile mockups of Press This as a web app and bookmarklet.
• Additional feedback.
• Github repo created

For Reference:

• @ryan pointed out the brevity of the Press This Codex Page.

To do:

• Make a darn cool plugin
• MOAR INTERVIEWS!
• Some research on what we can and can’t do with phones/tablets
• Figure out a good place for users to find/install Press This
• See if we can be ultra clever and add site-switching functionality
• More mockups probably
• And whatever else I’m forgetting