Administration: Update site icon and media control button styling #8724
Conversation
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
joedolson
left a comment
There was a problem hiding this comment.
These changes look good. Have you checked whether the button-add-site-icon class is still in use? If that was the only use of that class, then we should be able to remove the related CSS.
((We can't remove button-add-media, as that's widely used by plugins and themes.)
I'd also like to see more of a compromise design: use the upload button styles, but keep the full width layout and padding.
|
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:
These changes are otherwise good! |
joedolson
left a comment
There was a problem hiding this comment.
Requested changes are noted in a comment; they're less changes to the existing code and more additions that would be helpful.
|
Hi @joedolson, I have done the requested changes. Please review it at your convenience: Upload Site Logo:
After upload:
Header Upload:
After Upload:
|
joedolson
left a comment
There was a problem hiding this comment.
By removing the class upload-button, this breaks the hook for the JS to trigger the selection events. So, for example, if you select a logo, the 'Change Logo' button no longer works.
I think what you need to do instead of removing the class is add a class to hook styling to when the selection is populated. E.g., add a class to the parent container like 'has-selection', then change the button style based on that parent class being present.
|
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! CustomizeScreen.Recording.2025-07-29.at.12.32.32.PM.movGeneral SettingsScreen.Recording.2025-07-29.at.12.34.33.PM.mov |
This makes the large buttons the same size as the inputs neighboring them, which better matches the current design on mobile.
joedolson
left a comment
There was a problem hiding this comment.
I made a minor change to improve the look on mobile, but otherwise I think this is good to go.
Changed the button size for General settings to |
|
Customizer Settings:
Settings Icon:
|
|
Merged in changeset: 60645 |
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
Before
After