Today in the Nightly: Site Icons, Text editor in Press This

Here are a few cool things that recently landed in trunk. They are available right now in the nightly build. Install the nightly, and try them out.

Site Icons

We’ve wanted site icons in core for a long time. #16434 was opened four years ago and will be resolved as fixed for 4.3.

 

Our crop controls are not easy to use on my iPhone 6+. The images overflow the right side of the screen. Horizontally and vertically scrolling an image bigger than the screen while working a rubber band select that resets when the image is tapped is not pleasant.

Provide feedback on #16434 or on this post.

See these visual records for more screenshots and flow storyboards.

Text editor in Press This

Press This now has a Text editor for editing HTML, just like the standard editor in post-new.php.

32706.1-wide

Provide feedback on #32706, in #core-pressthis, or on this post.

 Padding for image settings

The Image Crop and Thumbnail Settings boxes received a little bottom padding.

And so that we are always aware of what our mobile experience looks like, here are those settings boxes on an iPhone 6+.

When you see a sidebar obscuring content on a phone, you can be pretty sure you’re witnessing lingering desktop bias. These screens were designed for desktops where you have room to use  sidebars. You can’t make a screen responsive and call it ready for a phone. The image flow effort is working on this.

Provide feedback on #31845 or on this post.

Manage in the Customizer

Appearance > Menus received a “Manage in the Customizer” button to match Appearance > Widgets.

Screen Shot 2015-06-30 at 3.16.57 PM

Next, fix up mobile.

image

Provide feedback on #32808 or on this post.

 

Previously: Today in the Nightly: Inline link toolbar and Press This split button

#4-3, #customize, #editor, #image-editor, #menus, #press-this, #site-icons, #today-in-the-nightly

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

Press This User Testing 2 10 I ran…

Press This User Testing 2/10

I ran three folks through User Testing the Press This Plugin as it stood on 2/9/2015 – the big takeaways as I see them:

  • The bookmarklet installation isn’t as easy as it could be: at least two of the testers struggled to get it into place correctly, instead dragging the icon to their address bar. They also both took a bit to recognize the draggable icon as something they could interact with, though the hover state helped here.
  • Once the bookmarklet was in place, each tester was able to use it without trouble, though there was a little confusion re: the image grid v. the camera icon.

Their answers to the prompted questions:

What did you like about the Press This bookmarklet?
I can use it on every website I am with just one click.
Did you miss any content creation tools, like post format, tags, or categories?
I find it satisfing.
At any time during this test, did you not feel safe, smart, or powerful? Can you tell us about that?
Yes, at the time when I could not find Press this in WordPress. I would preffer if there were some more clear indicators for it.
How likely would you be to use a tool like Press This, on scale of 1 – 10? Why would you rate it the way that you did?
Probably 9, because it is cleverly made and I like it, but I would give 10 after some time of using when I am more confident about it.

What did you like about the Press This bookmarklet?
It makes it easier to repost articals on my own website.
Did you miss any content creation tools, like post format, tags, or categories?
No I did not.
At any time during this test, did you not feel safe, smart, or powerful? Can you tell us about that?
I felt safe the whole way, but did not feel smart or powerful the whole time. I got confused when I needed to “install” the bookmarklet shortcut I would call it. I thought that I would need to download and install an app so that made me confused when I just needed to save it.
How likely would you be to use a tool like Press This, on scale of 1 – 10? Why would you rate it the way that you did?
I would say an 8. Because it seems easy to use, the instructions on how to use it is just a bit confusing.

What did you like about the Press This bookmarklet?
I really like the idea behind this to just freely create our own pages on our own and after I figured out how to use the bookmarklet, it could be quite easy to use.
Did you miss any content creation tools, like post format, tags, or categories?
I think the costumization part of the site was pretty well made and it has a lot of possibilities to create the site as I like it, so I don’t really miss anything else.
At any time during this test, did you not feel safe, smart, or powerful? Can you tell us about that?
At the beginning this bookmarklet idea was a bit frightening, because I thought that this would effect my browser too and for the correct use, it would put something on my computer but as soon as I found out the mechanism of this bookmarklet, there wasn’t any other problem with safety. Actually I didn’t feel really smart during this test, because the process for using this bookmarklet was a little bit confusing and I didn’t encountered a usage like this before for a bookmarklet, so it was pretty hard for me to figure out the mechanism. There wasn’t any problem with the powerful part, because it is really simple just to copy an article and use it as I like it, so that felt very good.
How likely would you be to use a tool like Press This, on scale of 1 – 10? Why would you rate it the way that you did?
I would give it an 8, because when I would like to create my own articles and press about the everyday happenings, then this could be very helpful to just copy the part I want in a very simple way and then I can customize it anyway I like with a very well made site. The reason it is not a 10 is because I think it is a bit hard to get the hang of this program and find the way to make it work, like find the proper parts on the webpage, but after some practise I think this shouldn’t be a problem.

You can watch all three videos here:
https://drive.google.com/folderview?id=0BwIP25_eL_Jca1BpRjZnSFU3QlE&usp=sharing

#press-this

Press This update 2/10

The merge window is supposed to open tomorrow for feature plugins. That means it’s crunch time. Here’s where the new Press This is.

Feature Parity

one of the requirements of core is general 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 In Progress
Tags Yes In Progress
Content Scraping Yes Improved [2]
Media Discovery Yes Improved [3]
Alert before closing/navigating away Yes Todo
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.

Before Core Merge

Prior to merge, there’s a bunch that still needs to be done. With that in mind, @DrewAPicture has given us an extra week to accomplish this. Even still, we have a list of things that need to be done prior to devchat tomorrow, with the rest of the list done in a week.

Before Tomorrow’s Devchat (February 11)

Before Next Wednesday’s Devchat (February 18)

  • Categories functional and live
  • Install flow functional and live
  • Side navigation JS improvements (functional)
  • Flows posted to make/flow comparing the old and new design (@ryan)
  • Another round of accessibility testing (when UI is finished)
  • All accessibility concerns addressed
  • Categories functional and live
  • JS inline docs
  • HTML validation
  • Security audit
  • Usability testing reviewed and any issues addressed
  • Verify localization (including rtl) is functional
  • Browser testing on all browsers (support parity with old Press This plus mobile)
  • Unit tests?

If we’re able to accomplish all of the above, we should be ready for merge on February 18.

Daily Chats

In this final rundown, let’s meet daily in #feature-pressthis at 17:00 UTC to make sure we’re on track for merge. Anyone interested in helping, please join us.

All development is done on Github: https://github.com/MichaelArestad/Press-This/

Plugin on the plugin repo: https://wordpress.org/plugins/press-this/

#press-this

Press This meeting notes 2/5

Huge discussion today! Lots of work to get done in the next week!

Discussed

  • Install process
    • Boomarklet and direct link install methods (currently impossible on tools)
    • May end up creating page to test this
  • Other methods of getting to PT (url tricks)
  • Mobile flows
  • Quick post flow versus repost flows
  • Post formats
  • User testing
    • Questions that need answering
      • Is this an improvement over the current PT?
      • Will a user miss post format, tags, or categories if not present?
      • Will they feel compelled to use them if present?
      • Is taking a photo on mobile required?
      • Can a user find and add an image from a scraped site?
        • How quickly?
      • How quickly can a user add an image?
        • multiple images?
      • Is this efficient to use on mobile?

To do

Update

We’ve refined a few of the features. We decided to let the user choose an image or video to add rather than guessing. It also freed up a little space. 🙂 More bugs have been squashed. We’ve updated to the correct WP logo among other things.

A few people have asked about functionality gained versus functionality lost in the current plugin, so let’s start there.

Gained

  • improved media scraping
  • oEmbed
  • responsive design

Lost

  • post formats
  • categories
  • tags
  • most of the WYSIWYG buttons (by design)
  • code editor (by design)

The big question facing us is whether we should add Post Formats, Categories, and Tags for the initial merge at the risk of missing the 4.2 deadline. Now, it is still possible to set those by clicking/tapping the “Save Draft” button on the bottom, which saves the draft and redirects you into the full WP editor and all the meta boxes.

 

#press-this

Press This 1/29 Notes

Discussed

  • TinyMCE status
    • will be added in the next day or so by @azaozz
  • Media embeds
  • UX for adding PT to home screen
  • Extensions (pushed to a future release)
  • PT fallback icon (if site doesn’t have an icon)
  • Usability testing
    • on current PT and other similar extensions/bookmarklets
  • Nightly updates to the repo (DONE! props to @dd32)

To do

We now have nightly updates to the repo. If you’re feeling particularly brave and want to test our nightlies, install away! https://wordpress.org/plugins/press-this/

#4-2, #press-this

Press This update Once again it’s been awhile…

Press This update

Once again, it’s been awhile, but let’s get everyone unfamiliar with this project as it’s about to go full steam ahead again.

What is it?

Press This is a redesign with a focus on automation and speed.

Current iteration (changing pretty rapidly shortly):

Progress

We have an alpha available for testing. We’re hoping to get this updating daily.

Features

  • 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
  • Is 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 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 compatible
  • Overrides the bookmarklet JS code provided in /wp-admin/tools.php
  • Quick featured image switching
  • Saving draft and publishing
  • Image side-loading
  • SVG icons 8) (no extra file requests for font files)
  • 3 2 modes
    • Direct access: quick post of sort, more to come with media and formatting tools
    • ModalPrevious versions used a modal instead of popup, but couldn’t be nice and secure. :/
    • Popup: current default behavior.

Plans

  • Add ultraminimal WYSIWYG
  • Add fancy new media modal
  • Add post settings (tags, categories, etc)
  • Add SVG icon fallbacks
  • Improve installation flow
  • Improve media/embed handling
  • Add daily updates to alpha plugin
  • WP API?
  • Initial plans were to make it useable as a web app and various extensions
  • Site switching

Old stuff

Old updates and initial planning: corepressthis.wordpress.com

Where/when we meet

Join the #feature-pressthis channel Thursdays at 17:00 UTC

Where development is happening

We are currently developing on Github here. Feedback and pull requests welcome!

Merge deadline status

TBD. We’re going to redefine our scope/features asap for 4.2.

#press-this

Press This Meeting, 2014/09/30

https://irclogs.wordpress.org/chanlog.php?channel=wordpress-ui&day=2014-09-30&sort=asc#m200968

Attendees:

Decisions:

  • Press This will use WP API. Part of the Press This mission will be furthering WP API.
  • PT will use wp_editor() and leverage wpviews and wplinks.
  • Media, preview, and links were recognized as especially important. Media should be visual and embedded in the editor. No short codes or placeholders or out-of-band representations. Thus, wp_editor().
  • A settings page is needed but low priority right now.

Action:

Links:

http://corepressthis.wordpress.com/
https://github.com/MichaelArestad/Press-This
https://make.wordpress.org/core/2014/09/10/910-agenda/#comment-18747

#feature-plugins, #meeting, #press-this

Noel is reworking Press This to make liv …

Noel is reworking Press This to make liveblogging easier and to get rid of the tabs in favor of a more streamlined approach.

#press-this, #ui

A bunch of changes to Press This from No …

A bunch of changes to Press This from Noel. It should be faster when starting up and when side-loading images.

#press-this