Redesign and improve the Install Plugins page

[tellyworth]

As mentioned on ​make.wp core, the plugin install page needs a redesign.

A bunch of ideas have come up during discussions, including plugin categories, popular/featured lists on the front page, banners and images, filtering, and so on. The main thing that's clear is that some experimentation is needed, so this ticket is the place.

[SergeyBiryukov]

Related: #27440

[tellyworth]

A quick try at a functional redesign, with categories and featured/popular list

[tellyworth]

The first patch here is just intended as a starting point. It's minimally functional but obviously just a skeleton design intended to represent some general ideas. Forgive the inline styles, I expect that this will see plenty of change so I've gone with quick-and-dirty.

This has some API-side support, in that there is a new hot_categories API call, and search by category. "Categories" don't really exist yet, they're just tags, but assuming the concept is sound I'll add proper support for those on the API side, to be populated from plugin readmes in a similar way as tags are currently.

[tellyworth]

Screenshot with the first patch applied

[michalzuber]

Added white background in Dashboard and Upload. Moved inline style into CSS file.

[michalzuber]

Created wp-admin/css/plugins.css to start separating plugins specific styling

[michalzuber]

melchoyce do you have such a nice mockup as for #28785 ? Any suggestions from the above IRC chat for the Install Plugin page? Any inspiration from ​https://play.google.com/store or from Apple's App Store

[helen]

Related: #23393

Replying to michalzuber:

melchoyce do you have such a nice mockup as for #28785 ? Any suggestions from the above IRC chat for the Install Plugin page? Any inspiration from ​https://play.google.com/store or from Apple's App Store

We did an entire call for screenshots on this: ​http://make.wordpress.org/ui/2014/06/20/screenshots-web-store-experiences/

[paulwilde]

I have a patch on #28753 which uses the same styling as the theme upload for the "Upload" tab.

[paulwilde]

My above mockup is maybe a nice direction to take this screen.

The search would be available regardless of which tab you are on, likewise with uploading a plugin. Clicking on the "Tag Filter" will toggle a drawer (similar to "Feature Filter" on theme-install.php) with all the available tags to filter from. With these options globally available on the screen there's no longer a use for a landing page and you could just default to Featured, Popular or Newest.

I already have a patch in #28753 with some Backbone boilerplate which handles toggling the Upload Plugin view as well as a patch (#28794) which seperates the filter bar from themes.css and into its own file to make it more reusable in wp-admin.

Converting this all to Backbone is probably very out-of-scope for 4.0 (especially since B1 is just around the corner), but in the grand scheme of things it would be a win-win situation.

If the Backbone code which handles theme-install.php was to be seperated so that the reusable parts (searching, filtering, bulk update/delete, updating collection count, toggling upload, toggling drawers, etc) were seperated into a base controller which plugin.js and theme.js extends that would clean up a lot of repeated code and open up the possibility for the media library to them extend that base controller and gain a lot of functionality as a freebie. A reusable install method to handle installing themes/plugins/media inline without having to go back and forth between pages could then easily be added. Basically start making parts of WordPress an actual JS application. Further down the line edit.php could then extend this functionality.

[paulwilde]

Clean patch which applies on latest trunk

[paulwilde]

Let's try and gain some more momentum on this..

My above patch updates plugin-install.php to use Backbone based on the code used on the theme-install.php screen. It would be great if the duplicated code were eventually merged together into a seperate file which theme.js and plugin.js could then extend to share functionality and then any added enhancements will enhance both screens retrospectivity. It would be a lot easier to implement inline theme/plugin uploading and installations rather than booting you out to another screen. That's maybe something I can look at for 4.1 though.

Some notes about the patch:

• Includes #28753 and #28794 as these were prerequisites to having consistency with the Theme screen.
• Removes the unused "Version" screen option and adds one called "Extra Details" to toggle the plugin card footer. (See #28803).
• Adds a shadow to the cards and changes the border color be consistent with the rest of the admin UI.

TODO:

• I still need to add code to toggle the Favorites and Tag drawers (like how it works with the Feature Filter on Themes), and then add the code to handle filtering by tag or showing someones favorites.
• If you change the screen options and then switch tabs and the changes are not respected. I saw wonderboymusic made some changes (which I based my implemented on) in [29077], [29078] and [29079] for the media grid. Maybe this could be further enhanced to work better for these particuar screens.
• When you scroll down fast and extra content is still loading there's no indication that it is actually loading any extra content. This is also with the Themes screen.
• This screen and the theme screen could be enhanced by having the filter bar stick to the top when you scroll down and then go back into place when you switch tabs or scroll back to the top. Basically how the Revisions screen has it.
• I'd like to ditch the use of Thickbox for the plugin info modal and use Backbone to handle that view.

[michalzuber]

Why did you moved plugin-install.js to plugin.js?
The patch creates a trunk directory. I think it would be good for the others to omit trunk/ in the patch :), for example by cd trunk; svn diff > ticket.patch
In the JS console I get Uncaught Error: Backbone.history has already been started on wp-admin/plugin-install.php page ​http://i.imgur.com/IeT9fVq.png
But I like the design, very nice improvements paulwilde :)

[melchoyce]

I can't seem to get to patch to apply, but your screenshot is looking good.

Related: ​http://make.wordpress.org/core/2014/06/17/improving-the-plugins-page-follow-up/

Was thinking that instead of a list of tags, we could do category groupings.

[michalzuber]

Fixed 28673.2.diff for patching by others

[michalzuber]

Replying to melchoyce:

I can't seem to get to patch to apply, but your screenshot is looking good.

I uploaded https://core.trac.wordpress.org/attachment/ticket/28673/28673.3.diff, need to be in src/ directory.

[paulwilde]

Replying to melchoyce:

Was thinking that instead of a list of tags, we could do category groupings.

Agreed about categories instead of tags. I've put together a UI for the categories based on your wireframes, but would need actual API support to become an actual working thing.

[tellyworth]

Tiny patch to help with the server side: send the locale in API calls.

[helen]

In 29218:

Install Plugins screen:

• Utilize the (currently-named) filter bar from the Add Themes screen.
• Move the upload link to the h2, also like the Add Themes screen.

see #28673.

[tellyworth]

Grouping of Featured results

[tellyworth]

Featured grouping with translation support; also padding for headers

[helen]

In 29225:

Plugin install: display cards in groups if the API returns them with the appropriate information. props tellyworth. fixes #28673.

[ocean90]

In 29348:

Plugin install: Add missing closing HTML tags.

props jwenerd.
fixes #29090. see #28673.

[ocean90]

In 29350:

Add some braces to [29225].

see #28673.

[nacin]

[29225] introduces a public function _order_callback. Unlike WP filter callbacks, this particular sort callback doesn't need to be a public method. It can be marked as private or protected and doesn't need to start with an underscore.

[helen]

28673.5.diff​ de-underscores and makes it private.

[nacin]

In 29666:

Plugin install: The sort callback doesn't need to be public.

props helen.
fixes #28673.