Site Editor: Clarify that the site icon is a back button using an animation #63986
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
[Type] Enhancement
|
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. |
|
Size Change: +3.76 kB (+0.21%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 3fd252b. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10109616292
|
|
Two ideas:
CleanShot.2024-07-26.at.09.09.30.mp4 |
|
It's a little finicky, especially if the site icon is not 1:1 ratio. CleanShot.2024-07-26.at.09.03.20.mp4 |
|
I'm still not 100% sure that the The An alternative to try could be a |
I had the same thought. I tried a WordPress icon, but that didn't quite feel right. Other maybes I tried quickly were some sort of "open to that view" icon, like this:
|
|
It could work, but to me the action is a little more profound than opening a panel, like that icon suggests. I'm inclined to think that the label will inform the icon. Is "Open navigation" the right label? |
|
Maybe we need to draw a "home" icon: 
But let's get something in so that it doesn't linger in limbo for too long |
|
Can we get some consensus for a v1 here, happy to go with any direction. |
|
If we're leaving the label as it is ("Open navigation") then I'd lean towards using the But even the It would be good to fix the issues around non-square icons before merging though: 
|
|
There's a small issue with the W animation. It's quite hard to see. Everything is smooth except the W color which seems to change from white to gray instantly.
|
I like this idea too. |
How do set no-square icons as site icons. The site icon upload button forces me to crop the images to be square? |
|
I simplified the animation for the "w" icon. @jameskoster The issue of the instance change was caused by the I think this is shippable but I would personally argue that we should aim to simplify the animation further. Avoid clip path animation for instance, maybe we can avoid animating the icon itself and just make sure a back icon appears on top of it or something like that. |
If you use a non-square site logo and check "Use as site icon" in the Site Logo block options. Agree the animation can be tweaked separately. |
I wonder if this should be possible or if we should force the ratio somehow there as it's forced when you pick and site icon from the settings page. |
Probably not. |
|
@jameskoster Fixed the aspect ratio of non square site icons. |
jameskoster
approved these changes
Jul 31, 2024
|
Let's follow up quickly on trying a different icon: 
|
|
Followed up here: #64161 |
dereksmart
reviewed
Aug 2, 2024
| /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ | ||
| view-transition-name: toggle; | ||
| /* stylelint-enable */ | ||
| position: fixed; |
There was a problem hiding this comment.
Something about this commit caused the icon to sit low in distraction free. Commenting here because removing the fixed position resolves it in my testing
Screen.Recording.2024-08-02.at.12.00.00.PM.mov
|
Looking into this after some vacation, I'm not sure this change helps in any way to clarify how to go back to navigation and exit the editor. A few observations:
It's worth reminding there's already an issue to discuss the overall usage of the WP logo / Site Icon in the editor. The inconsistent behavior between post editor and site editor doesn't help. It's not clear how to exit the site editor. I'd think more radical design changes are necessary to clarify the UI and improve the user experience and I'd encourage to explore alternative solutions in the context of #57813 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is extracted and reworked based on #58924
What?
The idea here is to add a hover animation to the site icon in the editor to clarify its role as a back button.
Notes
siteicon.mov
So while this is not perfect, it seems like a nice improvement over trunk.