Site Editor: unnatural animation when switching to edit mode

[t-hamano]

Description

When you select an editable item from the Data View, the Canvas appears, squashing the Data View into the Canvas and making animations look unnatural.

Step-by-step reproduction instructions

In the data view, click an editable template or pattern.

Screenshots, screen recording, code snippet

Below is a video demonstrating the issue.

https://github.com/WordPress/gutenberg/assets/54422211/6f455cec-7cc9-4709-836b-02e331cd5328

Here is a slowed-down version of the video to make the issue more visible.

https://github.com/WordPress/gutenberg/assets/54422211/38355b8a-6edc-4665-93a8-03a20ad3d6ce

In WordPress 6.5, the details page exists and this problem does not occur.

https://github.com/WordPress/gutenberg/assets/54422211/dd707ed1-df57-41f9-b2f3-f4605c0ad7b4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[stokesman]

Good issue. I've noticed this too. I suppose what might be a natural animation would be if the canvas could start with the placement and scale of the preview. For cases (like table view) where there is no preview it might at least start with the placement of the data view.

[annezazu]

@youknowriad could this be related to your PR? https://github.com/WordPress/gutenberg/pull/61579

Please provide the environment you all are using btw @t-hamano @stokesman :)

[stokesman]

I'm seeing it on trunk plugin installed on WP 6.5.2 / Chrome 124 / macOS.

could this be related to your PR? #61579

I'd taken a look at this and there is a difference that might be called worse but the animation was poor beforehand. Here’s what I see rolling back to before that PR. The difference is the data view vanishes instead of getting squashed. The canvas still starts from the same place.

https://github.com/WordPress/gutenberg/assets/9000376/b70f5fe9-371b-4339-b6c5-a06f00b00fa8

[youknowriad]

I don't think we have a good understand of what transition we want in this case. When the preview frame is not visible before the transition. I would love some design feedback/direction before moving into implementation... cc @jasmussen @jameskoster

[jameskoster]

Yes this needs some design / prototyping to get right.

My feeling is that the content frame (where the data view lives) is separate from the preview/editor frame, and each element lives on a different layer in terms of elevation.

This structure should inform the animation effect. In data views, when the preview frame isn't visible, we can consider it conceptually present, but visually off-screen. Clicking 'edit' brings it into view, above the data view:

I'm curious to hear how others think about this though, and there are other details to consider such as which 'plain' the Inspector lives on (given we want it to be accessible in both the editor and in data views).