WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#28673 closed task (blessed) (fixed)

Redesign and improve the Install Plugins page

Reported by: tellyworth Owned by: helen
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-patch
Focuses: ui, administration Cc:
PR Number:

Description (last modified by SergeyBiryukov)

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.

Attachments (14)

28673-quick-take.diff (6.0 KB) - added by tellyworth 5 years ago.
A quick try at a functional redesign, with categories and featured/popular list
Screen Shot 2014-06-29 at 8.35.22 pm.png (66.5 KB) - added by tellyworth 5 years ago.
Screenshot with the first patch applied
28673-quick-take.2.diff (8.1 KB) - added by michalzuber 5 years ago.
Added white background in Dashboard and Upload. Moved inline style into CSS file.
28673-quick-take.3.diff (8.7 KB) - added by michalzuber 5 years ago.
Created wp-admin/css/plugins.css to start separating plugins specific styling
plugin-install.png (321.5 KB) - added by paulwilde 5 years ago.
28673.diff (79.0 KB) - added by paulwilde 5 years ago.
28673.2.diff (81.2 KB) - added by paulwilde 5 years ago.
Clean patch which applies on latest trunk
28673.3.diff (54.2 KB) - added by michalzuber 5 years ago.
Fixed 28673.2.diff for patching by others
plugin-categories.png (232.5 KB) - added by paulwilde 5 years ago.
28673-locale.diff (429 bytes) - added by tellyworth 5 years ago.
Tiny patch to help with the server side: send the locale in API calls.
28673.4.diff (4.5 KB) - added by helen 5 years ago.
28673-featured-grouping.diff (2.4 KB) - added by tellyworth 5 years ago.
Grouping of Featured results
28673-featured-grouping-2.diff (3.1 KB) - added by tellyworth 5 years ago.
Featured grouping with translation support; also padding for headers
28673.5.diff (823 bytes) - added by helen 5 years ago.

Download all attachments as: .zip

Change History (40)

#1 @SergeyBiryukov
5 years ago

  • Description modified (diff)
  • Focuses ui administration added

Related: #27440

@tellyworth
5 years ago

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

#2 @tellyworth
5 years ago

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
5 years ago

Screenshot with the first patch applied

#3 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.0

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

@michalzuber
5 years ago

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

@michalzuber
5 years ago

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

This ticket was mentioned in IRC in #wordpress-dev by johnbillion. View the logs.


5 years ago

#6 follow-up: @michalzuber
5 years ago

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

http://i.imgur.com/0fNcOxp.png

Last edited 5 years ago by michalzuber (previous) (diff)

#7 in reply to: ↑ 6 @helen
5 years ago

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/

#8 @nacin
5 years ago

  • Type changed from enhancement to task (blessed)

This ticket was mentioned in IRC in #wordpress-dev by michalzuber. View the logs.


5 years ago

#10 @paulwilde
5 years ago

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

#11 @paulwilde
5 years ago

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
5 years ago

@paulwilde
5 years ago

Clean patch which applies on latest trunk

#12 @paulwilde
5 years ago

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.

#13 @michalzuber
5 years ago

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 :)

#14 follow-ups: @melchoyce
5 years ago

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
5 years ago

Fixed 28673.2.diff for patching by others

#15 in reply to: ↑ 14 @michalzuber
5 years ago

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.

#16 in reply to: ↑ 14 @paulwilde
5 years ago

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.

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

@tellyworth
5 years ago

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

This ticket was mentioned in IRC in #wordpress-dev by tellyworth. View the logs.


5 years ago

@helen
5 years ago

#19 @helen
5 years ago

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
5 years ago

Grouping of Featured results

@tellyworth
5 years ago

Featured grouping with translation support; also padding for headers

#20 @helen
5 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 29225:

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

#21 @ocean90
5 years ago

In 29348:

Plugin install: Add missing closing HTML tags.

props jwenerd.
fixes #29090. see #28673.

#22 @ocean90
5 years ago

In 29350:

Add some braces to [29225].

see #28673.

#23 @nacin
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

[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
5 years ago

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

#25 @helen
5 years ago

  • Keywords has-patch added

28673.5.diff de-underscores and makes it private.

#26 @nacin
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29666:

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

props helen.
fixes #28673.

Note: See TracTickets for help on using tickets.