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

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

[joedolson]

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

[ankitkumarshah]

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.

[joedolson]

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.