Add animations for insertion point, dropzone, and other elements #33132
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
mtias
added
[Feature] Inserter
mtias
requested review from
ajitbohra,
chrisvanpatten and
ellatrix
as code owners
mtias
force-pushed
the
add/drag-and-inserter-motion-effects
branch
from
3423e49 to
89fceb2
Compare
|
Size Change: +3.94 kB (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
|
The videos look great! Another related interaction is dropping into an empty block list - like empty columns, or one of the worst cases I can find is dropping into the text part of Media and Text after the heading has been deleted. There are some technical issues to solve to get this working properly, but once that's done I wonder if the interaction should look like a normal insertion point, or closer to the 'Animating the dropzone component' example above. |
|
Yes, that'd be neat. I also have this issue open for treating media drops on empty containers more like drop-zones instead of the line: #29145. |
|
This looks amazing! Just a note for future visitors: |
6 tasks
It expands from a central point and handles exit animation.
mtias
force-pushed
the
add/drag-and-inserter-motion-effects
branch
from
89fceb2 to
3b106ce
Compare
jasmussen
reviewed
Oct 5, 2021
packages/block-editor/src/components/inserter-list-item/style.scss
Outdated
Show resolved
Hide resolved
jasmussen
reviewed
Oct 5, 2021
jasmussen
reviewed
Oct 5, 2021
jasmussen
reviewed
Oct 5, 2021
| @@ -68,17 +70,53 @@ export default function DropZoneComponent( { | |||
|
|
|||
| let children; | |||
|
|
|||
| const backdrop = { | |||
| hidden: { scaleY: 0, opacity: 0 }, | |||
There was a problem hiding this comment.
I love the framer syntax here. 👌
jasmussen
reviewed
Oct 5, 2021
packages/edit-post/src/components/header/fullscreen-mode-close/index.js
Outdated
Show resolved
Hide resolved
|
I pushed some small fixes in 7fbc7f9 to address most of my review points. |
|
As of the latest few commits, this works really well. I'm happy to give this a ✅ based on how it works in my testing. One thing that was surfaced in testing this, was a regression in trunk of the ability to separately set the background of the Cover block, but also add innerblocks (#29813). The solution there, an inwards animating border, might not be the ideal solution after all — simply reducing the opacity to indicate "background" might be sufficient:
I'll open a ticket to look at restoring the drag-to-innerblocks behavior as well. But because the issue is also in trunk, it shouldn't block this one. Nice work! |
|
I ticketed #35345 as a followup. |
youknowriad
reviewed
Oct 5, 2021
packages/block-editor/src/components/block-tools/insertion-point.js
Outdated
Show resolved
Hide resolved
| @@ -95,7 +139,7 @@ export default function DropZoneComponent( { | |||
|
|
|||
| return ( | |||
| <div ref={ ref } className={ classes }> | |||
| { children } | |||
| <AnimatePresence>{ children }</AnimatePresence> | |||
There was a problem hiding this comment.
Maybe this animate presence should move to line 109 and only be added when there's an actual animation?
|
This is looking good to me, I think once we figure out the first todo items above (reduce motion and RTL) we can ship this. |
|
@youknowriad I don't think rtl is now relevant given it's all axial. |
mtias
changed the title
mtias
force-pushed
the
add/drag-and-inserter-motion-effects
branch
from
b4ff475 to
5624e48
Compare
|
@youknowriad this is ready for review. |
|
Merging so we can see if there are any integration issues with some time before the next release. |
|
👌 |
This was referenced Dec 20, 2021
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 PR aims to add some motion effects to some parts of the editing experience to both improve the clarity and add some flair to interactions.
Animating the block insertion point
The sibling inserter has gone through a few design permutations but has lacked in clarity while also being too obtrusive. The motion effect handles a slight delay before bouncing the [+] inserter and then expands the insertion line. This makes the operation less prone to trigger just by hovering around (the animations are interruptible) while giving more weight to the target placement. This updates the design a bit so we have a stronger weight line. Video below:
animated-sibling-inserter.mov
Animating the dropzone component
The next piece of the interface that benefits from motion is the dropzone indicator. With this PR the dropzone area appears from the center and expands to the edges while the icon and text follow right after. It handles exit animation and works for all the different placements a dropzone is used. This makes the canvas feel more responsive to interactivity and alive.
animating-dropzones.mov
Block insertion point when dragging a block
The block insertion animation is also used for the drop target when dragging a block, but without the orchestrated delays — the line appears immediately and once shown it remains fixed. The more weight of the line is beneficial.
animated-drag-indicator.mov
Updated design of block inserter item
This also explores an update to the hover design of block inserter items and adds a tap behaviour that complements the drag interaction.
block-inserter-animation.mov
Site icon hover interaction
This one is less functional at the moment but with some further work it aims to help express the fundamental nav interaction of going back to the dashboard or opening the navigation drawer better.
Some to-dos: