Featured image Drag and Drop UI / UX

[emaildano]

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.

[afercia]

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

[afercia]

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.

[afercia]

@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.

[emaildano]

@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?

[afercia]

@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.