Opened 9 years ago
Closed 7 years ago
#36175 closed enhancement (maybelater)
Simplify the Customizer Image Control action buttons
Reported by: | celloexpressions | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 4.1 |
Component: | Customize | Keywords: | has-patch needs-testing needs-refresh ui-feedback close |
Focuses: | ui, accessibility | Cc: |
Description
Per https://core.trac.wordpress.org/ticket/35942#comment:10 and https://wordpress.slack.com/archives/core/p1457036419003559, we'd like to look at reducing the visual clutter that stems from having two large action buttons (remove, change image) for each image control. When there are multiple sequential image controls, this can become particularly overwhelming.
@melchoyce suggested removing both buttons (add image button could be kept when there isn't one set, or the no image placeholder could be made into a button), and then implementing an "X" icon for the remove behavior. These controls currently support click-to-edit/change; we could either clarify that behavior by adding overlaid text on hover and focus for mouse & keyboard users, or by adding a pencil icon similar to editing images in the editor. Because these icons will need to be always-visible, I think click-to-edit and a remove X would be adequate.
We should also consider setting a max-height for portrait images to avoid them taking up way too much vertical space.
I suggest changing this for WP_Customize_Media_Control
when mime_type
is image
. For the other media types, and for more specialized controls such as header image or site icon, the image preview is more complex and doesn't easily lend itself to the proposed solution here. We can revisit those later.
Milestoning for 4.5 since this is largely introduced by the addition of custom icons, with two media controls in the same core section now. We also need to ensure that this doesn't introduce any accessibility regressions.
Attachments (2)
Change History (23)
#2
@
9 years ago
I can patch if a design is mocked up, but probably don't have time to do both beyond the written discussions so far.
This ticket was mentioned in Slack in #core by chriscct7. View the logs.
9 years ago
#8
@
9 years ago
- Owner changed from melchoyce to celloexpressions
I'm planning on making a patch soon based on the proposals discussed in the Slack discussion linked above (click to change, X button over the image to delete).
@
9 years ago
Proof of concept UI, showing media controls with different types as well as an image control. Needs UI refinement.
#9
@
9 years ago
- Keywords has-patch needs-testing added; needs-patch needs-screenshots removed
- Milestone changed from Future Release to 4.6
- Owner changed from celloexpressions to melchoyce
- Type changed from defect (bug) to enhancement
Actually, back to you for UI review.
36175.diff is a fully functional proof of concept and I think it works pretty well. The primary thing that I think should be improved is the style of the remove button, and we should also verify that this approach is acceptable (probably not keyboard accessible, now that I think about it), and what the best approach is there (making the img
focusable or having a separate visually-hidden button).
#10
@
9 years ago
Consistency is important, thinking for example at how the Post Featured Image works, click-to-edit the image makes sense. Please notice in the Featured Image we've recently added a description targeted with aria-describedby
.
A remove X button element would be great, it can use an icon and aria-label
and be positioned over the image with a properly sized clickable area.
This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.
9 years ago
This ticket was mentioned in Slack in #design by hugobaeta. View the logs.
9 years ago
#13
@
8 years ago
- Keywords needs-refresh ui-feedback added
Needs a refresh for [37426].
Also still need to decide how this should work in terms of accessibility. If we have to add a description in text explaining to click-to-edit, we might as well preserve a separate button. Maybe we should only change the remove button? Or, is the UI clear enough that the change button can be removed?
#14
@
8 years ago
This is getting close to being punted, unless the design and usability side can be evaluated in the next week or two.
This ticket was mentioned in Slack in #core by chriscct7. View the logs.
8 years ago
#16
@
8 years ago
- Milestone changed from 4.6 to Future Release
Per comment:14 punting. This can be re-added if comment:14's items are addressed soon
Assigning since closely related to #35942.