Make WordPress Core

Opened 16 months ago

Last modified 9 days ago

#50523 accepted defect (bug)

Redesign the admin Image Editor

Reported by: afercia Owned by: joedolson
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Media Keywords: needs-design
Focuses: ui, accessibility Cc:


Splitting this out from #47136.

In #47136 the visual order and DOM order of the elements in the admin Image Editor was fixed. The discussion on the ticket highlighted the need for a major redesign of the Image Editor, which is pretty old and has room for improvements.

Quoting from ticket:47136#comment:16

this indicates the need to consider a redesign from ground up of the media interface. I know many already feel this. If we can from the start consider a11y and the best possible interactions, then we aren't forcing something or hitting the limits of an existing design

Quoting from ticket:47136#comment:35

Some initial redesign ideas were explored by @nrqsnchz see starting from https://core.trac.wordpress.org/ticket/47116#comment:11

As a first step, all the explorations made on #47116 should be moved to this ticket, including screenshots :) New design from the Design team is very welcome.

Attachments (2)

moving_buttons_to_sidebar_3.diff (6.1 KB) - added by joedolson 2 weeks ago.
Design patch from @nrqsnchz migrated from #47116
50523.diff (4.9 KB) - added by joedolson 2 weeks ago.
Refresh patch from @nrqsnchz

Download all attachments as: .zip

Change History (10)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.

3 months ago

#2 @joedolson
3 months ago

  • Milestone changed from Awaiting Review to 5.9
  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.

2 weeks ago

#4 @joedolson
2 weeks ago

Migrating https://core.trac.wordpress.org/ticket/47116#comment:11 by @nrqsnchz

The more I think about it, the more I don't think that having those options in the place where they currently are is ideal (if we want to also have labels).

It takes way too much space on small viewports and when the user zooms their browser. That last morkcup you shared @sabernhardt is a good example of what I mean.

I've been thinking about the possibility of having these buttons on the sidebar. We seem to have some related items in there already (Scale Image and Image Crop). So what if we grouped all of these together? (we can keep Undo and Redo in the same place)


The stuff that is currently in Scale Image and Image Crop can be revealed contextually. So, for example, if I click on Crop, the aspect ratio and selection settings can appear below it:


#5 @joedolson
2 weeks ago

Migrating https://core.trac.wordpress.org/ticket/47116#comment:25 by @karmatosed


Wow, this ticket moved on a bit, thanks for all the work everyone. Whilst I am not going to counter the work done here, I would like to offer some design feedback. I want to do this to not block but have us consider in beta a few points.

First, the position in the sidebar I feel is problematic from a cognitive and action point of view. It's removing a direct interaction from where it happens. I understand why now because the buttons are just too vast, however just putting them in the sidebar I don't feel solves this as removes from where they made sense to be. The placing in the sidebar is what for me takes this from bug to enhancement, so I agree with @mikeschroder on that. I understand labels put it in a bug, but this ticket does both.

I have concerns over moving and what plugins hook into this. For example, if a plugin adds icons/buttons here do we end up having lots in the sidebar? That could be seriously problematic on smaller screen heights and in general cause a lot of problems.

For me, the moving to the sidebar is done without exploring where the best possible location should be. I would love to see exploration as to that. I wonder if they are even buttons anymore like this? Why can't we have buttons that have tooltips/explanations for example? What about exploring hiding interactions in a toolbar of sorts even a drop-down? If text is desirable, I am sure another option can be found.

My advice at this point would be to not move to the sidebar in this as that takes it to an enhancement. If a better option is found for placing during beta 1, we could evaluate then, but for now my feeling is the sidebar doesn't do that. I am not commenting on text being by icon, but placement.

I will note, we are all pushing against the limits of the current interface so I recognise wins are hard in this confined space. That said, I think we shouldn't move buttons and actions without considering their impact in such a fixed design. What for example in a small sidebar happens to that text in translations, with plugins hooking in? It's for these and interaction reasons I am recommending we don't move them this release.

2 weeks ago

Design patch from @nrqsnchz migrated from #47116

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.

2 weeks ago

2 weeks ago

Refresh patch from @nrqsnchz

#7 @joedolson
2 weeks ago

On reviewing this proposal, I agree with @karmatosed that moving the controls to the sidebar creates problems. Having the buttons to control your editing actions at such a distance from the editing target is a problem. The cancel/save buttons would also need to move, for control proximity.

I do very much like the proposal that the scale & crop controls open their respective panels, however.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.

9 days ago

Note: See TracTickets for help on using tickets.