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.

Hi @joedolson, Thank you for the feedback. I have made the necessary changes and updated the PR please review it at your convenience.

### Screenshot:

Some additional changes that I think would help make things more consistent:

1) When an image is selected, e.g. for the background image, you end up with a small 'Remove' button and a large 'Change Image' button. I think it would be good if those were the same size, either both large or both small. I suggest small; I think that the Change Image button is different from the UPload Image button.

2) The Add Header image interface still uses the dashed outline design, but with a separate upload button. I think it would be good to make those all the same: eliminate the dashed placeholder space and use a large upload button.

These changes are otherwise good!

Hi @joedolson, I have done the requested changes. Please review it at your convenience:
### Upload Site Logo:

### After upload:

### Header Upload:

### After Upload:

[logicrays]

You're right — the current UI is misleading, as it visually suggests drag-and-drop functionality which isn't supported. This inconsistency can confuse users, as reflected in your and others' experiences.

Option 1 (UI rollback) is a quick fix to align design with actual behavior, but Option 2 (adding drag-and-drop support) offers better usability and aligns with modern UX expectations.

Since the functionality ties into Gutenberg and relevant APIs likely exist, Option 2 would be ideal if technically feasible. Happy to assist further if needed.

Hi @joedolson, Thank you for the feedback. I have updated the PR and fixed the issue. Also, I have attached a detailed testing video below. Please review it at your convenience. Thank you!

## Customize
​https://github.com/user-attachments/assets/8163721f-711f-4546-a3f3-e8b82ff62b70

## General Settings
​https://github.com/user-attachments/assets/59c71088-b3b4-4429-ad04-31889c9e6751

[sachinrajcp123]

Fix Customizer “Select logo” and “Select site icon” controls to have proper button styling instead of misleading drop-area appearance.

Changed the button size for General settings to button-hero for a closer match to existing styles.

Customizer Settings:

Before	After

Settings Icon:

Before	After

[joedolson]

In 60645:

Accessibility: Make buttons to add site images look like buttons.

The buttons to add site icons, logos, header images, and background images were designed with a dashed border. This led to confusion with users thinking they were drop regions for image uploads, rather than buttons to trigger an upload.

Change design of upload buttons to clarify expected user interaction.

Props emaildano, afercia, joedolson, ankitkumarshah, logicrays, shailu25.
Fixes #47579.

[joedolson]

@sachinrajcp123 You may notice that I didn't list you in the props for this ticket. This is because the patch you posted was added long after the prior PR, and didn't relate to the work in progress in any way, not did you provide any reasoning why you chose a completely different path than the work in progress.

For future patches, it's best to engage with other work in progress. If you have a reason to go a different direction, that's fine, but be sure to add some information to indicate why you think a different option is needed. Thank you!

Merged in changeset: 60645