WordPress.org

Make WordPress Core

#35429 closed enhancement (fixed)

Allow new plugins to be uploaded without having to go to a new page first.

Reported by: Ipstenu Owned by: afercia
Milestone: 4.6 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-patch has-screenshots
Focuses: ui, accessibility, javascript Cc:

Description

Currently if you want to upload a theme that isn't in the WordPress.org repository, you can click on the 'Upload Theme' button and a form appears saying "If you have a theme in a .zip format, you may install it by uploading it here." This allows you to upload a theme without having to go to a new page first.

On the other hand, for plugins if you press "Upload Plugin" you're taken to a new page at /wp-admin/plugin-install.php?tab=upload

For parity (and to speed things up when you're uploading a plugin) I've ported over some of the JS from themes to allow the same interface.

Attachments (10)

35429.diff (6.7 KB) - added by Ipstenu 19 months ago.
example-image.png (57.7 KB) - added by Ipstenu 19 months ago.
What the GUI looks like
35429.2.diff (7.4 KB) - added by afercia 19 months ago.
35429.3.diff (8.3 KB) - added by afercia 19 months ago.
35429.4.diff (8.3 KB) - added by ericlewis 19 months ago.
35429.5.diff (7.9 KB) - added by ericlewis 19 months ago.
35429.6.diff (9.8 KB) - added by michaelarestad 18 months ago.
35429.7.diff (9.7 KB) - added by afercia 16 months ago.
35429.8.diff (1.5 KB) - added by afercia 15 months ago.
Let the Browse Plugins link behave like a link in the tab=upload page.
35429.9.diff (2.0 KB) - added by afercia 14 months ago.

Download all attachments as: .zip

Change History (58)

@Ipstenu
19 months ago

@Ipstenu
19 months ago

What the GUI looks like

#1 @swissspidy
19 months ago

  • Keywords has-patch has-screenshots added

#2 @michaelarestad
19 months ago

I like this. I like this alot. Will take for a spin tonight and maybe tweak a little.

#3 @michaelarestad
19 months ago

Just took it for a spin. Can we use some JS to display the upload form (however it ends up looking) when the Upload plugin button is hit? Then, if they don't have JS enabled, it will still be a link to the old view (separate page).

I'm wondering if this shouldn't be a modal to upload it. We can probably reuse some of the modal styles (and maybe even the php parts as well?).

#4 @Ipstenu
19 months ago

Probably. My JS is weak and I just copied over what we have for themes.

If you go to /wp-admin/theme-install.php?tab=upload (a hidden screen) you still have the same interface as on the other page.

This ticket was mentioned in Slack in #core by ipstenu. View the logs.


19 months ago

#6 @adamsilverstein
19 months ago

+1 to the idea! we have discussed something like this for the shiny-updates plugin project as well.

#7 @afercia
19 months ago

Tring to add some no-js compatibility, the /wp-admin/theme-install.php?tab=upload screen should still be available to users when JS is off. Also trying to add some a11y. Couple of questions, would greatly appreciate your feedback:

1
since now the uploader should be printed out in all the "tabs" screens, is using the following hook still needed?

add_action( 'install_plugins_upload',                 'install_plugins_upload' );

As far as I see, this was used to print out the uploader form just in the "upload" tab but now we need it in all the tabs.

2
when the upload failes (I've uploaded an image to trigger it :)), an error message get displayed together with a "Return to Plugins page" link that points to "plugins.php", maybe the link should let users go back to "plugin-install.php" instead?

@afercia
19 months ago

#8 @afercia
19 months ago

First try with the new approach. Can probably be refined :) will open a new ticket for the a11y part for the themes button too.

#9 @Ipstenu
19 months ago

  1. Aha! Yes that can go. I was trying to figure out what caused this oddity... Go to /wp-admin/plugin-install.php?tab=upload and press the 'Upload' button. You get two forms. But removing that should fix it. Thank you!
  1. Yes a return to plugins-install.php would be better... or maybe both links? Themes just throws an error with no link.

    "The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature"

#10 @paulwilde
19 months ago

I had a patch written from almost 2 years ago that did this, among other things (CSS cleanup mainly), but it was written in Backbone and also routed the URL to include ?upload when the uploader was active, similar to the theme browser. See 28753.3.diff.

@afercia
19 months ago

#11 @afercia
19 months ago

  • Focuses accessibility javascript added
  • Milestone Awaiting Review deleted

Second pass, trying to keep things simpler and a bit cleaner. Decided to keep just one link and use role="button" and aria-expanded when JS is on. On the "upload tab" screen, the link should always behave like a link. Some testing would be nice :) any feedback welcome.

@paulwilde sorry, I see the old ticket just now. Many things have changed in the Theme screens, do you think there are bits from the old patch that could still be used?

#12 @Ipstenu
19 months ago

Ahhh nicer. I like this. Tested on Multisite and single and it looks nice. Thanks for fixing the ?tab=upload page too!

This ticket was mentioned in Slack in #core by afercia. View the logs.


19 months ago

This ticket was mentioned in Slack in #core by ipstenu. View the logs.


19 months ago

#15 @ericlewis
19 months ago

  • Milestone set to 4.5

This ticket was mentioned in Slack in #design by michaelarestad. View the logs.


19 months ago

This ticket was mentioned in Slack in #design by afercia. View the logs.


19 months ago

#18 @afercia
19 months ago

Note: this ticket is a blocker for #35457.

@ericlewis
19 months ago

@ericlewis
19 months ago

#19 follow-up: @ericlewis
19 months ago

In attachment:35429.5.diff,

  • Move JS from updates.js to plugin-install.js
  • Modify the help text in install_dashboard() to refer to the button being "at the top of this page" rather than "in the upper left"
  • Added some docs in various places

Follow-up thoughts:

  • Is it useful to leave the add_action() commented out in admin-filters.php?
  • It feels like we're overloading the responsibility of the page-title-action link/button. Can we split that into two?

#20 in reply to: ↑ 19 @afercia
19 months ago

Replying to ericlewis:

  • Is it useful to leave the add_action() commented out in admin-filters.php?

Looking for some history, seems they were commented out in [27499] and then moved to admin-filters.php in [32653] so maybe there's no valid reason to keep them.

This ticket was mentioned in Slack in #design by afercia. View the logs.


19 months ago

#22 @afercia
19 months ago

  • Owner set to michaelarestad
  • Status changed from new to assigned

#23 @michaelarestad
19 months ago

I would like to make some CSS name changes, but I fear it might be too reaching for this ticket. Once this is in, I'll make a separate ticket to tweak the styles on both Themes and Plugins.

This ticket was mentioned in Slack in #core by afercia. View the logs.


19 months ago

#25 follow-up: @michaelarestad
18 months ago

My latest version, 35429.6.diff, tweaked the class names a bit to be less specific to plugins or themes. I also modified themes (maybe a bit overreaching for this ticket) to reuse the same toggle styles.

  • Instead of .upload-browse-button, it is now .upload-view-toggle
  • Instead of .show-upload-plugin, it is now .show-upload-view
  • JS for both themes and plugins is now almost identical.

Thoughts:

  • Might be worth sharing the JS for the toggle. There's no difference.
  • I share @ericlewis's question: "Is it useful to leave the add_action() commented out in admin-filters.php?" I can remove it if y'all think it's not needed.

#26 @afercia
18 months ago

Totally in favor of meaningful CSS class names and avoiding code repetition. By the way, these two buttons shouldn't be exactly the same :) for a simple reason. In the Plugins screen there's also a no-JavaScript fallback, i.e. the button is a real link that works also when JavaScript is off.

In the Themes screen there's no fallback when JavaScript is off, that button is not a real link so <a href="#" should really be a <button type="button" (so, no button role added via JS). In this case there wouldn't be the need to prevent the button default action since there's no default action to prevent.

While, theoretically, a <button> element would be better for semantics and accessibility, I'd be in favor of keeping the link (as long as it uses a role=button), sharing the JS, and move it in common.js. Then, in future iterations, this could also be abstracted a bit in order to work with any toggle/panel.

About the JS part, in jQuery it is possible to write stuff in a sort of "chain" so basically once you have an element you can write something like this:

uploadBrowseButton.attr( ... ).on( ... );

which then for convenience and code readability can be indented this way:

uploadBrowseButton
	.attr(
		...
	)
	.on(
		...
	);

Not sure why this was changed in two separate blocks in the previous patches, it is also possible I'm definitely missing something :)

This ticket was mentioned in Slack in #core by jorbin. View the logs.


18 months ago

#28 @jorbin
18 months ago

  • Milestone changed from 4.5 to Future Release

This ticket was mentioned in Slack in #core by michaelarestad. View the logs.


18 months ago

This ticket was mentioned in Slack in #core by afercia. View the logs.


18 months ago

#31 @afercia
16 months ago

  • Milestone changed from Future Release to 4.6

This ticket was mentioned in Slack in #core by afercia. View the logs.


16 months ago

#33 in reply to: ↑ 25 @afercia
16 months ago

Replying to michaelarestad:

  • JS for both themes and plugins is now almost identical.

Thoughts:

  • Might be worth sharing the JS for the toggle. There's no difference.

Totally agree, I'd propose to open a new ticket to consider introducing a small, generic, togglePanel utility. Just thinking it's probably better to don't mix too many things in this ticket.

I'd like to bring this in now that we're at the beginning of the 4.6 release cycle so there's time to see if something breaks. I'd just change a small thing, also to simplify a bit: thinking at the "toggle button", well it's just a... toggle and probably there's no need to change its text in "browse" when the uploader is open because the plugins list is already there on the screen. Clicking "browse" doesn't do anything special about "browsing plugins", you can already browse them. It just closes the panel :) The button should change in "Browse Plugins" just when JavaScript is off. Screenshot:

https://cldup.com/k7MMHZ9Io5.png

A similar change should be done also for the "Upload Theme" button, see #35457

With JS off it is a real link that brings you back to the Plugins list screen (doesn't apply to themes):

https://cldup.com/Ewh1I57XqT.png

@afercia
16 months ago

#34 @afercia
16 months ago

Refreshed patch. Going to commit and fix what is needed for consistency in the Themes screen in #35457. Please test and do feel free to reopen this ticket for any improvements.

#35 @afercia
16 months ago

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

In 37221:

Plugin Install: show the upload form in place rather than sending users to the devoted upload plugin page.

Props Ipstenu, ericlewis, michaelarestad.

Fixes #35429.

#36 @afercia
16 months ago

Note: please notice this removes also the themes.router.navigate() stuff that was used in the Themes screen when clicking on the Upload button. I'm going to reintroduce it in #35457 even if I doubt it is actually used anywhere.

#37 @afercia
16 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening because the "toggle" behavior was modeled on the Add Theme screen which is wrong since WordPress 4.4 :) see #35457. When the uploader is open, all the plugins list and other stuff below should be hidden.

#38 @afercia
16 months ago

  • Owner changed from michaelarestad to afercia
  • Status changed from reopened to assigned

This ticket was mentioned in Slack in #design by afercia. View the logs.


16 months ago

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


15 months ago

#41 @chriscct7
15 months ago

Is this going to cause problems with plugins that add stuff to the upload vs the main page? For example Airplane Mode by Norcross blocks the main page when active, to only allow access to the upload page. Under this patch, it seems (untested) that the plugin would not inadvertently block the manual file upload page as well.

#42 follow-up: @ocean90
15 months ago

@afercia Can we use #35457 to fix both screens?

#43 in reply to: ↑ 42 @afercia
15 months ago

  • Keywords close added

Replying to ocean90:

@afercia Can we use #35457 to fix both screens?

Sure. Still needs a decision though, *not* hiding stuff below the uploader would be better for accessibility so the button could be just a "toggle".

#44 @afercia
15 months ago

As per discussion going to fix this in #35457. The plugin list won't be hidden any longer when the uploader is open. Notice the ?tab=upload page still exists for no-js support and for users (e.g. from bookmarks or history) and plugins (?) that may access it directly. Needs a small JS tweak since the link default action should not be prevented in the ?tab=upload page and the link should behave like... a link, while in the other plugin installer pages it should behave like a button.

@afercia
15 months ago

Let the Browse Plugins link behave like a link in the tab=upload page.

#45 @afercia
15 months ago

New patch 35429.8.diff to make the tab=upload page work nicely when accessed directly.

#46 @afercia
15 months ago

  • Keywords close removed

@afercia
14 months ago

#47 @afercia
14 months ago

Refreshed patch with small JS improvements.

#48 @afercia
14 months ago

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

In 37681:

Plugin Install: fix edge-case where the tab=upload page can be accessed directly.

The ?tab=upload page still exists for no-js support and for users who may
access it directly (e.g. from bookmarks or history) or plugins doing the same.
In this page, the "Browse plugins" link should always behave like a link.

Fixes #35429.

Note: See TracTickets for help on using tickets.