Site editor: Add hover animation to site editor canvas #48575
Merged
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
|
This is just draft at the moment as there is an issue with the framer motion I tried using |
|
Size Change: +958 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
|
Thanks for the effort! Here's a GIF that does not do the animation justice, because it is low framerate:
Nevertheless, a couple of comments:
Nice work! |
|
I seem to recall @mtias commenting on the slower animation somewhere, it would be good to clarify. With a more subtle transition I think it could potentially work quite nicely. It would be interesting to try scaling, but I think the visuals might get a bit awkward as the frame moves closer to the sidebar. Is there a risk it might overlap on certain screen sizes? That might be a bit strange. If we wanted to try something simpler, then only adjusting the spacing to the top, right, and bottom could work? animation.mp4 |
|
One other note: I'm seeing a sliver of the dark material in the full screen edit view:
|
|
Thanks for the feedback @jameskoster & @jasmussen. I did initially try a scale but it seems a bit jittery to me, but I have switched it back to that to see what you think, maybe it is just my eyes 😄 Jitter seems most obvious on text when you mouse out and it scales down. I also reduced the speed from 0.5 to 0.2. Let me know if scaling gives you the jitters also and I will look at the other option of top and right.
Yeh, this is because framer motion leaves behind inline styles when you use the |
|
There's definitely some jitteryness in Chrome when it's scaling back down, although it's somewhat minimal. It seems to be related to font rendering. When I try it in Safari it's clear and smooth, so the font rendering is better there. :) One thing that struck me -- we retain the arrow pointer when hovering. I would expect it to switch to the hand if something is clickable, since that's the browser convention. |
|
The scaling seems to work quite nicely: scale.mp4
Agreed. |
|
I think riad explored using the pointer cursor, but it wasn't trivial. Agree if it's possible. Animation looks good in that last video. |
|
It is showing the pointer cursor now. It was a bit tricky as it has to be applied to the nested iframe body to work. @youknowriad you may want to check if you can see any issues with this approach. The UX issue I can see with having the pointer is that it could be confusing to the user as they may mouse over a link on the canvas and click and wonder why they were not taken to that link? |
|
Flaky tests detected in c4bffd7. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4319356683
|
|
Yeah, I had some trouble implementing this in the past as well because of the iframe. That solution seems simple enough. |
youknowriad
reviewed
Mar 2, 2023
| @@ -277,6 +277,20 @@ export default function Layout() { | |||
| { canvasResizer } | |||
| { !! canvasSize.width && ( | |||
| <motion.div | |||
| whileHover={ | |||
| canvasMode === 'view' | |||
There was a problem hiding this comment.
I think this condition is not complete as I see the hover effect even in the "browse all templates" page. We should probably use the same condition as the one enabling the click in canvas. Probably needs an isEditorPage && canvasMode === 'view'
|
The pointer cursor is working well for me now, seems to be consistent across views. I did notice the scale effect on the "manage all templates" view as Riad mentioned. |
|
Thanks @youknowriad |
youknowriad
approved these changes
Mar 3, 2023
|
🚀 |
youknowriad
added
[Type] Enhancement
|
Nice work Glen! 👏 |
ntsekouras
pushed a commit
that referenced
this pull request
Mar 7, 2023
|
I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: 3760efb |
ntsekouras
removed
the
Backport to WP 6.7 Beta/RC
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.
What?
Adds a hover animation to the editor canvas when in browse/view mode
Why?
Fixes: #47656
How?
User framer motions
whileHoverprop with a smallscale. Also adds the hand pointer when the editor is in view mode.Testing Instructions
Open the site editor
Check that mouse over the editor canvas causes it to scale up slightly
Check that on mouse out it scales down again
Check that the hand pointer only shows when mousing over the canvas in view mode and not when the editor is opened
Screenshots or screencast
hover2.mp4