Simplify the Customizer Image Control action buttons
|Reported by:||celloexpressions||Owned by:|
|Component:||Customize||Keywords:||has-patch needs-testing needs-refresh ui-feedback|
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.
Change History (20)
- 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