Make WordPress Core

Opened 6 years ago

Last modified 15 hours ago

#47579 accepted defect (bug)

Customizer "Select logo" and "Select site icon" look like drop areas, but are butons.

Reported by: emaildano's profile emaildano Owned by: joedolson's profile joedolson
Milestone: 6.9 Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-design has-patch changes-requested
Focuses: ui, accessibility, javascript Cc:

Description

Hello! I've been advised this applies to Core / Design so I'm going to report my feedback here as well. This is an issue related to Gutenberg but it's not a part of the Block Editor. It's a Gutenberg feature but one that's in Core.

Original GitHub issue:
https://github.com/WordPress/gutenberg/issues/10426

Issue:
The featured image visually appears as drag and drop, however, it's just a button. Drag and drop does not work.

Motivation:
I personally find it confusing and when I raise the question to other WordPress users their feedback is the same. They assumed it was drag and drop but never tried it.

Suggestions:

Option 1.
Update the UI (technically a roll back) to appear as a button or link. This would match the UI with the user experience.

Option 2.
Add drag and drop support. Since this is a part of Gutenberg, the necessary JavaScript / API for this function should already be there.

Attachments (1)

feat img gutenberg classic.png (53.7 KB) - added by afercia 6 years ago.

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
6 years ago

  • Component changed from General to Post Thumbnails

#2 @afercia
6 years ago

Worth noting this applies also to other parts of the admin UI, for example: media widgets and the Customizer.

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


6 years ago

#4 @afercia
6 years ago

Worth also noting the Classic Editor (see screenshot above on the right) has a different design and it doesn't look like a drag and drop area. However, as said above, other places in the admin use the "dotted area" design.

#5 @afercia
6 years ago

  • Component changed from Post Thumbnails to Administration
  • Focuses administration removed
  • Keywords needs-design needs-patch added; needs-design-feedback removed
  • Milestone changed from Awaiting Review to Future Release

@emaildano thanks for your report and welcome to Trac.

This ticket was discussed during today's accessibility bug-scrub. From an accessibility perspective, those are buttons. They should look like buttons. Instead, right now they look like:

  1. a dotted area, potentially misleading as it looks like a drop area
  2. a link

The accessibility team agreed it would be nice to improve this UI pattern and make it consistent across the whole admin interface. A design proposal would be very welcomed.

#6 @emaildano
6 years ago

@afercia, do you have any info on whether or not that dotted line UI is the first step towards making it drag and drop, or was it just intended to be a link.

If drag and drop is planned, I'm curious who may be working on that and if anyone already is. It would be good to focus on wrapping up that feature and making it accessible to all users.

If there's no plan for that, it may be a good idea to roll back this UI to a simple link featured in the classic editor.

What do you think?

#7 @afercia
6 years ago

@emaildano if I remember correctly, the dotted line was only meant to indicate an image "placeholder". There are no plans to introduce a drag and drop UI, as I'm aware of. The design team could know more.

Worth noting a while ago the media widgets and the Customier had both this placeholder (which was clickable) and an additional "Add Image" button. The placeholder was just a clickable <div> element, thus not operable with a keyboard. Also, there were 2 controls that did the same thing. That was fixed in [44796] / #43151 by making the "placeholder" a real button.

Gutenberg followed this new, more accessible, pattern.

Last edited 6 years ago by SergeyBiryukov (previous) (diff)

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


4 weeks ago

#9 @joedolson
4 weeks ago

  • Milestone changed from Future Release to 6.9
  • Owner set to joedolson
  • Status changed from new to accepted
  • Summary changed from Featured image Drag and Drop UI / UX to Customizer "Select logo" and "Select site icon" look like drop areas, but are butons.
  • Type changed from enhancement to defect (bug)

At this point, I believe that the only remaining inconsistency is the buttons for site identity in the customizer: Site Icon and Site Logo both look like drop areas, but are just buttons.

The Block Editor now does use a drop area; and the media widgets are replaced with block interfaces.

To that effect, I'm changing the title of this issue to apply just to the customizer, and milestoning it; that should be pretty easily completed.

Also changing this to a bug, to reflect the current scope.

This ticket was mentioned in PR #8724 on WordPress/wordpress-develop by @ankitkumarshah.


4 weeks ago
#10

  • Keywords has-patch added; needs-patch removed

This PR updates the appearance of the Site Icon and media upload buttons to match their functionality. The previous styling made these elements look like drop areas, confusing when users attempted to drag and drop files onto them, as they only function as clickable buttons.

Trac ticket: #47579

#11 @ankitkumarshah
4 weeks ago

Hi @joedolson,
I have implemented a solution in PR https://github.com/WordPress/wordpress-develop/pull/8724 Could you please review and test it at your convenience.

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


16 hours ago

#13 @joedolson
15 hours ago

  • Keywords changes-requested added

Thanks, @ankitkumarshah! I requested some changes in the PR. I'd like to see more of a compromise design change where we use the standard button styles (like you have), but retain the full-width and padding in the current design.

Note: See TracTickets for help on using tickets.