Typewriter Experience doesn't work when Custom Fields are shown

[jsit]

Description

When the Custom Fields panel is shown, the Typewriter Experience / Typewriter Scrolling (#16460) doesn't work.

Step-by-step reproduction instructions

1. In Editor Preferences on the Edit page, enable "Custom fields"
2. Save pref and reload the page
3. See that cursor is able to reach the bottom of the editor window, and can't be scrolled past

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.5.2
• Gutenberg version...unsure? Whatever is bundled with WP 6.5.2

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

[jhimross]

@jsit I am not sure if there's an issue here. I tried replicating the issue by following the instructions you provided above.
I attempted to replicate the issue using WP 6.5.2, the Twenty Twenty-Four theme, and no other plugins installed.

I enabled the Custom Fields, and this is what I see. Watch: https://share.zight.com/JruE7ePK

No issues were experienced. The typewriter experience still works as expected and can be scrolled.

Could you please provide more details to replicate the issue, or if possible, provide a screenshot or screen recording?

[jsit]

@jhimross Hm, I don't know what we are doing differently. This screen recording was taken on a WP 6.5.3 install, with the Twenty Twenty-Four theme, and no active plugins:

https://www.dropbox.com/scl/fi/usy2nhrdube8109brmsxk/Screen-Recording-2024-05-10-at-12.51.53-PM.mov?rlkey=6d5cwhzdwd91gem1k6r6y4z1y&e=1&st=eoaois5o&dl=0

This is in Safari, but I see the same issue in Chrome.

[jhimross]

Tried replicating the issue again using WP 6.5.3, Twenty Twenty Four theme, and no active plugins. But I still can't replicate it using different browsers.

This is what's happening when using:
Chrome and Edge in Windows:- https://share.zight.com/2Nu8rnWm
Using Safari 17.3 :- https://share.zight.com/mXuWmwvX

[jsit]

What you are showing in the first video is what I’m describing. When you scroll down with no Custom Fields, there is a lot of space between the final block and the bottom of the input area; you can be in the final block and be typing in the “middle” of the window. You can’t do this if Custom Fields are shown.

[jsit]

@jhimross Do you need more details from me, or does what I'm saying make sense?

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[t-hamano]

When you scroll down with no Custom Fields, there is a lot of space between the final block and the bottom of the input area; you can be in the final block and be typing in the “middle” of the window. You can’t do this if Custom Fields are shown.

This is true. The underlying issue stems from the fact that the editor content is no longer an iframe when a meta box is present.

The following PRs are likely relevant to solve this issue:

• Collapse classic meta boxes under details element #64247
• Split content view with open metaboxes #64351

[stokesman]

I’ll close this as #64639 is merged and should resolve it. Please reopen if I'm mistaken.

[jsit]

@stokesman Amazing, thank you! Very exciting.