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

Here are a few cool things that recently landed in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. They are available right now in the nightly build. Install the nightly, and try them out.

Site Icons

We’ve wanted site icons in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., 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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 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 CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.

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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 sinkKitchen Sink When using the WYSIWYG (What You See Is What You Get) editor in WordPress, you can expand the capabilities to allow more options. This expanded area is called the "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 WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. 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 UIUI User interface.

More generally

  • Trimmed down UI for extra-speedy reposting of your favorite left shark gif
  • Core architecture of the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party/tools is an as-pure-JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.-app as possible
  • Currently AJAX-driven, but ready to be switched to using the WP-APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. 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 blogblog (versus network, site) 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 metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. 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-adminadmin (and super 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 httpHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. request, but ultimately removed as Dashicons are required for the editor). We planned to use the upcoming API. We have trimmed down stylesheets and JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. (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 a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) 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 GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ > SVNSVN Subversion, the popular version control system (VCS) by the Apache project, used by WordPress to manage changes to its codebase. 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 PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 sinkKitchen Sink When using the WYSIWYG (What You See Is What You Get) editor in WordPress, you can expand the capabilities to allow more options. This expanded area is called the "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 WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. 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 UIUI User interface.

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)

  • Post formats
  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher inline docsinline docs (phpdoc, docblock, xref)
  • Tags functional and live (@Michael-Arestad)
  • Categories designed (@Michael-Arestad)
  • Install flow designed
  • Plan of action for any design cleanup
  • Initial accessibility concerns addressed

Before Next Wednesday’s Devchat (February 18)

  • Categories functional and live
  • Install flow functional and live
  • Side navigation JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. improvements (functional)
  • Flows posted to make/flow comparing the old and new design (@ryan)
  • Another round of accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) testing (when UI is finished)
  • All accessibility concerns addressed
  • Categories functional and live
  • JS inline docs
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 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 GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/https://github.com/MichaelArestad/Press-This/

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, so let’s start there.

Gained

  • improved media scraping
  • oEmbed
  • responsive design

Lost

  • post formats
  • categories
  • tags
  • most of the WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. 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 metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes.

 

#press-this

Press This 1/29 Notes

Discussed

  • TinyMCE status
    • will be added in the next day or so by @azaozz
  • Media embeds
  • UXUX User experience 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

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. architecture of the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party/tools is an as-pure-JavascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. app as possible
  • Currently AJAX driven, but ready to be switched to using the WP-APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. 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 blogblog (versus network, site) any web page found online, blockquoting an excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., including a selection of in-page images to choose from. Said images are augmented with metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data to sort them in the order the site advertises to be best
  • Overrides /wp-adminadmin (and super admin)/press-this.php and its behavior, so that we’re 100% backward compatible
  • Overrides the bookmarklet JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. code provided in /wp-admin/tools.php
  • Quick featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. 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 WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page.
  • 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 GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ 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 APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. 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