Block Editor: Device switching does not animate when editor is not iframed

[t-hamano]

Description

For example, if you enable custom fields in the preferences panel, the editor canvas will no longer be an iframe. On the other hand, if the device preview is tablet or mobile, the editor canvas will be rendered as an iframe. When switching from a device to a tablet or mobile preview, the expected animations are not applied.

From what I've researched, I think this issue is related to the introduction of the BlockCanvas component in #54149. In this component, the iframe editor canvas itself stretches and contracts via animation when the device type changes. However, if only the desktop preview view is not an iframe, the animation will be cut off.

Previously, there was a parent element of the editor canvas, and that element was animated. Therefore, I think that whether or not the editor canvas inside was iframed, the animation was not affected.

In the screencast below, you can see the inline style of the parent element of the editor canvas dynamically changing.

b469ad87d20186c49abd5e191ffcf235.mp4

Step-by-step reproduction instructions

• Enable the custom fields from the Preferences panel.
• Change the device type from the preview button.

Screenshots, screen recording, code snippet

d6e7a1dd8a6440b9a351da2488286756.mp4

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