WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 3 months ago

#47579 new enhancement

Featured image Drag and Drop UI / UX

Reported by: emaildano Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-design needs-patch
Focuses: ui, accessibility, javascript Cc:
PR Number:

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 3 months ago.

Download all attachments as: .zip

Change History (8)

#1 @SergeyBiryukov
4 months ago

  • Component changed from General to Post Thumbnails

#2 @afercia
3 months 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.


3 months ago

#4 @afercia
3 months 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
3 months 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
3 months 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
3 months 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 3 months ago by SergeyBiryukov (previous) (diff)
Note: See TracTickets for help on using tickets.