Make WordPress Core

Opened 9 years ago

Closed 7 years ago

#36175 closed enhancement (maybelater)

Simplify the Customizer Image Control action buttons

Reported by: celloexpressions's profile 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)

36175.proof-of-concept.PNG (152.9 KB) - added by celloexpressions 9 years ago.
Proof of concept UI, showing media controls with different types as well as an image control. Needs UI refinement.
36175.diff (4.5 KB) - added by celloexpressions 9 years ago.
Fully-functional proof of concept, needs UI refinement.

Download all attachments as: .zip

Change History (23)

#1 @westonruter
9 years ago

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

Assigning since closely related to #35942.

#2 @celloexpressions
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.

#3 @melchoyce
9 years ago

Thinking we should punt this.

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


9 years ago

#5 @chriscct7
9 years ago

  • Milestone changed from 4.5 to Future Release

punting per slack discussion

#6 @chriscct7
9 years ago

  • Version trunk deleted

#7 @celloexpressions
9 years ago

  • Version set to 4.1

#8 @celloexpressions
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).

@celloexpressions
9 years ago

Proof of concept UI, showing media controls with different types as well as an image control. Needs UI refinement.

@celloexpressions
9 years ago

Fully-functional proof of concept, needs UI refinement.

#9 @celloexpressions
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 @afercia
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 @celloexpressions
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 @celloexpressions
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 @chriscct7
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

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


8 years ago

#18 @celloexpressions
8 years ago

  • Owner melchoyce deleted

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


8 years ago

#20 @celloexpressions
7 years ago

  • Keywords close added

I'm leaning toward not making any changes here beyond the styling adjustments in 4.8, to preserve consistency across control types and keep better accessibility. @melchoyce if you agree, please close.

#21 @melchoyce
7 years ago

  • Milestone Future Release deleted
  • Resolution set to maybelater
  • Status changed from assigned to closed
Note: See TracTickets for help on using tickets.