Make WordPress Core

Opened 7 years ago

Last modified 3 years ago

#31715 new enhancement

Small UI redesign proposal for media uploader

Reported by: jorgetoledo Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.1.1
Component: Media Keywords:
Focuses: ui Cc:


Right now, when adding images to a post, you get an 'Insert Media' dialog (or 'media grid') where you can drag and drop files to upload. Perfect, so far.

However, if you want to manually select some files via file chooser, you have to click another tab, and then click again on a button to launch the file chooser. If you use it a lot, that extra click can become a bit annoying.

My proposal would be to remove that extra 'Upload Files' tab and just add a simple 'Select Files' button on top of the Media Grid dialog.

See attached mockup.

That would be self-explanatory and quicker to use, and we could get rid of the tabs.

Attachments (1)

wp_file_upload_suggestion.png (496.1 KB) - added by jorgetoledo 7 years ago.
Current state and mockup for media uploader

Download all attachments as: .zip

Change History (6)

7 years ago

Current state and mockup for media uploader

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

7 years ago

This ticket was mentioned in Slack in #feature-imageflow by eldelacajita. View the logs.

7 years ago

#3 @jorgetoledo
7 years ago

Someone at #design made me think about smaller screens. So the whole "tip" text and the new button wouldn't fit on the same row on mobile screen, and they would have to jump to a new row.

That wouldn't be a problem since we would be getting rid of the tabs on top, thus saving vertical space.

#4 @jorgetoledo
7 years ago

And I was also told about what Image Flow team is doing:

I like the solution of having one of the tiles be the "add more" button. But that shouldn't take you to a new screen, but just trigger the file chooser. If you wanted to drag&drop a file isntead, you could still do it on the default image grid, right?

#5 @joedolson
7 years ago

  • Focuses accessibility removed
Note: See TracTickets for help on using tickets.