Add Site Logo & Icon screen to Design panel#76116
Conversation
Move site logo and icon management to a top-level Design panel route instead of a sub-screen inside Global Styles. Uses DataForm with MediaEdit for a clean, declarative approach (~80 lines vs ~400 lines in the previous manual MediaReplaceFlow implementation). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Size Change: +3.78 kB (+0.06%) Total Size: 6.88 MB
ℹ️ View Unchanged
|
|
I think feedback from @jasmussen is still applicable - ##76050 (comment). Especially the part regarding naming. |
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Didn't want to assume with this different placement but I agree! I'm not sure what the appetite is for making it broader into "Site Identity" and adding in site title and site tagline. I'm game to add them here though if we want to go in that direction. |
|
We don't have to add new controls in this PR, but standartizing identity panel here would be nice. @mtias, what do you think? |
|
Nice! I'm still a fan. I still think the contents of the second panel could benefit from some rephrasings, and I personally still think we should call it just "Identity", so it fits neatly in context of other single-word menu items (Navigation, Templates, Patterns, Styles). But even if we don't go with "Identity", it should be sentence case with capital proper nouns. Which means "Site identity", or "Site Logo & icon" (the latter which is clumsy). |
This is something it can grow into, but I would still start simple, one small patch and then go from there. To update the suggestions for the contents of the panel, with the other feedback left on the previous thread: Whether compact or not, it seems like it should be either both are big, or both are compact, to be egalitarian to their respective value. The argument for big is: there's room, and no reason not to use the space. |
packages/edit-site/src/components/sidebar-site-logo-and-icon/index.js
Outdated
Show resolved
Hide resolved
|
I love this, but it's also a bit of a slippery slope to me. With this addition we are starting to move things from previous "Settings -> General" into a new non extendable top level menu item within the site editor. The concept of "Site Identity" that has been mentioned here a few times already feels like it's keeping the door a little more open for further sub settings. But I think ideally this warrants a larger big picture plan for how we want to handle all kinds of site settings in the future. |
|
I prefer this a lot more to the version that had it on Styles (which is wrong, since the icon/logo do not vary with theme.json variations). |
|
@fabiankaegy I could see something like:
The idea being that all settings are consolidated in a single location, kind of like the Settings app on iOS. That said, introducing a drilldown solely for Site Identity would be a bit excessive at this stage. I do think we ought to consider naming this new view "Site Identity" though, and including controls for the site title and tagline. |
- Rename "Site Logo & Icon" to "Identity" in page title and sidebar nav
- Add descriptive subtitle to the Identity page
- Update field descriptions per design feedback
- Add placeholder text ("Choose logo" / "Choose icon")
- Remove unnecessary enableSorting and filterBy props
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Thanks for all the feedback. This is fun and exciting to work on 😄. To keep this PR shippable and small, I've done the following:
I purposefully have not added in site title or tagline but we can consider that in the future based on feedback. Rather than a video, here's a quick screenshot:
My final questions are:
|
I wonder if we can also keep only the first sentence in the top description? The rest of it duplicates the help messages below the upload buttons. |
We could potentially go a step further and remove the description entirely. A UI only containing two form fields with well crafted labels and help text arguably shouldn't need a description. |
I also find it confusing that |
|
Flaky tests detected in a76d816. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22756502509
|
packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
Outdated
Show resolved
Hide resolved
packages/edit-site/src/components/sidebar-navigation-screen-site-logo-and-icon/index.js
Outdated
Show resolved
Hide resolved
- Rename files, components, and route from `site-logo-and-icon` to `identity` to match the section name. - Revert out-of-scope changes to site-logo block's edit.js. - Remove Identity section description. - Ensure site logo is listed before site icon in save panel. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Thank you all again for the feedback and @ntsekouras for helping simplify the code. I just pushed another update:
Here's where we are now, visually:
Anything else or shall we land this thing? 🚀 |
|
Looks good to me. It mostly needs a code check. |
ntsekouras
left a comment
There was a problem hiding this comment.
Code wise this looks good to me, thanks!
e2e failures seem intermittent and not related, but I'll investigate if they fail again.
|
Thank you all for the help here. I merged and will create a follow up issue (and likely PR) to consider adding site title and tagline next. |
|
Late to the party, but this looks great! One thing I noticed , I see a bit of a disconnect in how we're handling media selection here vs other places. This uses a dotted border with an X button that says "Remove," while other media selectors (like background) use a different layout with "Reset" and the reset icon (same way as we do it with colors). Might be worth unifying the design language for these fields at some point, unless I'm missing something about why they should be different? |




What?
Move site logo and icon management to a top-level Design panel route instead of a sub-screen inside Global Styles. Uses DataForm with MediaEdit for a clean, declarative approach.
Note that both field definitions currently reference
MediaEditdirectly as theEditcomponent. If a shared wrapper with custom props (e.g.isExpanded) is needed later, it can be extracted into a stable component reference — flagging for awareness.Why?
This addresses #66241 and is follow-up PR to #76050 where feedback from Matías indicated this belongs at the Design panel level—changing styling (like variations) doesn't impact the logo/icon, so grouping it under Styles was misleading from an IA perspective.
Open questions
Calling on you @WordPress/gutenberg-design
What should we display in this section of the design panel? The preview feels nice to me and I think it would be odd if these two smaller settings took up a larger section.
We could make this take up the entire screen and I'm happy to explore that.
Do we agree on the compact version of the MediaEdit component?
I personally found the expanded version both looked too big/took up too much real estate and didn't have an aspect ratio I'd expect so I switched to the compact version. Here's a comparison of the two:
Should we call it Site logo & icon?
When placed in the broader Design menu, this feels a bit out of place but I'm not sure what else might make sense. In talking to AI about ideas, Site Identity came up but that feels too broad and I'd expect to be able to edit Site Title and tagline here too.
What order should it be in?
I am curious to get some IA thoughts here.
What should we put in the save flow?
Curious for feedback specifically on how best to communicate these changes when folks use the multi-entity save flow.
Testing Instructions
Video walkthrough
design.site.icon.and.logo.mp4