In between block inserter: add exit animation

[ciampo]

The in-between block inserter currently appears in the block editor canvas with an enter animation:

https://github.com/user-attachments/assets/2a2afcb3-080c-4990-adb4-1ece34190621

We should add an exit animation too, for an increased sense of UI polish.

Click to show animation specs

``` IN ANIMATION: (0.58, 0.00, 0.06, 1.00) Total duration: 430ms STROKE (SCALE) Length: 40% → 100% Width: 2px → 8px Duration: 400ms STROKE (OPACITY) - Opacity: 0 → 1 Duration: 50ms Delay: 65ms -- 'PLUS' BUTTON (SCALE) - Scale: 0.6 → 1 Duration: 400ms Delay: 30ms 'PLUS' BUTTON (OPACITY) - Opacity: 0 → 1 Duration: 50ms Delay: 130ms --- OUT ANIMATION: (0.96, 0.00, 0.32, 1.00) Total duration: 330ms STROKE (SCALE) Length: 100% → 40% Width: 8px → 2px Duration: 280ms Delay: 50ms STROKE (OPACITY) - Opacity: 1 → 0 Duration: 50ms Delay: 220ms -- 'PLUS' BUTTON (SCALE) - Scale: 1 → 0.4 Duration: 280ms 'PLUS' BUTTON (OPACITY) - Opacity: 1 → 0 Duration: 50ms Delay: 180ms ```

[ciampo]

I had a timeboxed attempt at this, and this doesn't look like a simple task. Here are some initial observations:

• The in-between inserter is rendered conditionally based on the isBlockInsertionPointVisible selector from the core/block-editor data store. Since the whole component is unmounted when not visible, its code stops running and therefore it can't handle an exit animation.
• Another thing that I observed is that the getBlockInsertionPoint selector defaults to the last block (as also written in the docs), meaning that we'd need to ignore this information while animating out, otherwise, the in-between inserter would disappear from its current location, and animate in the new insertion point.

With the above observations in mind, I thought of a potential approach:

• stop conditionally rendering, and instead let the top-level React component handle the in-between inserter visibility in the canvas;
• instead of re-using the same instance of the in-between observer, we could render a new instance every time the in-between inserter needs to be shown. This would also allow us to "freeze" the inserter position to the initial value, ignoring future updates (like the fallback to the last block's index). Each instance would take care of visually showing/hiding the in-between inserter with an animation;
• we'd need to add a top-level orchestration layer, which would react to the updates from the datastore by creating new instances of the in-between observer when needed, letting those instances know when it's time to animate out, and removing them from the react tree once the animation has ended.
• This architecture would support exit animations and would also allows having an in-between inserter animating in, while the previous one is still animating out.

[ciampo]

I had a timeboxed attempt at this, and this doesn't look like a simple task. Here are some initial observations:

• The in-between inserter is rendered conditionally based on the isBlockInsertionPointVisible selector from the core/block-editor data store. Since the whole component is unmounted when not visible, its code stops running and therefore it can't handle an exit animation.
• Another thing that I observed is that the getBlockInsertionPoint selector defaults to the last block (as also written in the docs), meaning that we'd need to ignore this information while animating out, otherwise, the in-between inserter would disappear from its current location, and animate in the new insertion point.

With the above observations in mind, I thought of a potential approach:

• stop conditionally rendering, and instead let the top-level React component handle the in-between inserter visibility in the canvas;
• instead of re-using the same instance of the in-between observer, we could render a new instance every time the in-between inserter needs to be shown. This would also allow us to "freeze" the inserter position to the initial value, ignoring future updates (like the fallback to the last block's index). Each instance would take care of visually showing/hiding the in-between inserter with an animation;
• we'd need to add a top-level orchestration layer, which would react to the updates from the datastore by creating new instances of the in-between observer when needed, letting those instances know when it's time to animate out, and removing them from the react tree once the animation has ended.
• This architecture would support exit animations and would also allows having an in-between inserter animating in, while the previous one is still animating out.

cc @WordPress/gutenberg-components @mtias