Animate the site icon element between view and edit in the site editor #48886
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
|
Size Change: +187 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 69f8836. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4688982097
|
mtias
force-pushed
the
add/site-icon-animation-in-frame
branch
from
21d71dd to
97b1f62
Compare
richtabor
reviewed
Mar 8, 2023
| @@ -41,7 +41,7 @@ function SiteIcon( { className } ) { | |||
| ) : ( | |||
| <Icon | |||
| className="edit-site-site-icon__icon" | |||
| size="32px" | |||
| size="48px" | |||
There was a problem hiding this comment.
Feels a bit large when its the WordPress icon.
As-is:
CleanShot.2023-03-08.at.09.34.49.mp4
But if we use 40px, and 0.65 for scale we have this:
CleanShot.2023-03-08.at.09.40.28.mp4
There was a problem hiding this comment.
Although (with the suggestion above) the site icon is perhaps a bit big.
CleanShot.2023-03-08.at.09.43.12.mp4
|
Idea: An alternative to the zoom in on hover, would be to zoom out instead — insinuating the result of the click. CleanShot.2023-03-08.at.09.50.43.mp4 |
|
This is cool, I like it. Testing with a site logo:
The focus style is rectangular, I think that may be fixed by a rebase (see #48918). This isn't present in the post editor, maybe that's fine?
There's a detail in the full-size version, here's a nearest neighbor upscaled version to showcase it:
Note the missing bottom border. The toolbar is 60px tall, the W back button is 61px to overlap the 1px border below. This is so that border can be painted using transparency to better fit in various theme contexts. A simple fix, probably, is to only allow the fullsize site logo to be 60px tall. |
mtias
requested review from
spacedmonkey,
kevin940726,
ajitbohra,
gziolo,
ntwb,
nerrad,
ryanwelcher,
ellatrix,
tellthemachines,
juanmaguitar and
fabiankaegy
as code owners
mtias
force-pushed
the
add/site-icon-animation-in-frame
branch
from
cb914cd to
f8aac39
Compare
mtias
force-pushed
the
add/site-icon-animation-in-frame
branch
from
0d1e893 to
1b04605
Compare
|
Made some tweaks to orchestrate some of the fades better. |
|
Note: there's a bug to address where items in the toolbar are not clickable because the site title element lingers on top. |
|
The animation that occurs when it shinks + the sidebar comes into view is really nice, but it's still a bit unexpected that the site icon would grow and not be soft-cropped to its fill area: CleanShot.2023-03-30.at.19.07.09.mp4I still keep coming back to the original shrink, then shrink more vibe (what was there a while ago in a sense), as it hints at what's to come (the sidebar), instead of animation for the sake of animation. Noting that the animation for the Block Editor site icon look really nice: CleanShot.2023-03-30.at.19.14.29.mp4 |
|
On another note, how strongly do you feel these two areas should be visible different (one with the dark surround, the other full image)? It seems like they are different to help indicate that one is the Site Editor and the other is the Block Editor, though it's not very clear one or the other (other than perhaps a learned effort). |
|
Taking this for a spin: I like this a lot. I hear Rich's concern that it scales up further on hover, but it bugs me less, perhaps because my mountain picture is harder to glean details from. I suspect the image you use here is going to make a big difference in how this is perceived too. Not in a problematic way, necessarily, just that different. Here's with no logo, for example:
I'm happy enough to land this. My main feedback would be to crop the 60x60 square so that when you hover over it in edit view, it doesn't grow wider. At the moment it does. |
|
One thing I like about this branch, and why I think it's worth landing, is that switching from this branch to test another, I immedialy realized how much more complex this silhouette is:
The rounded icon inside a dark square, next to a busy toolbar. If it's just the full image, it's more of a stamp, rather than a shape. |
|
Pushed a tweak to improve the cropping. @richtabor I think wherever we land we should reconcile the two editors. I also like the slight zoom-out on the post editor one, though I think it works better because it's on mouseout there, so the slight bounce makes sense. |
|
The tweak looks good to me. ✨ |
Grow to fill the square container when going into "edit" mode and shrink back when going into "view" mode.
- Resolve problem where title element would shift on initial render. - Improve orchestration so there's no visible overlap of elements.
mtias
force-pushed
the
add/site-icon-animation-in-frame
branch
from
fe62190 to
7849538
Compare
aristath
reviewed
Apr 26, 2023
bph
added
[Block] Site Logo
t-hamano
reviewed
May 5, 2023
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.
Polish the animation details around the site icon and title between canvas
viewandedit. It makes the icon grow to fill the square container when going into "edit" mode and shrink back when going into "view" mode. It also sets some better fallback handling when the icon is loading.