Metaboxes are placed in incorrect position when switching device preview

[t-hamano]

Description

The metaboxes are stuck over the content when I change the device preview to mobile / tablet and then change it back to desktop preview again.

Step-by-step reproduction instructions

First, enabe Custom Fields metaboxes from 'options > Preferences > Panels > Custom Fields.

Once you are sure that the meta box is positioned at the bottom of the content, press the 'Preview' button, switch to 'Mobile or Tablet', and then switch again to 'Desktop' preview.

Screenshots, screen recording, code snippet

b0fb24e4135b7511f876bcc4c4ec2c21.mp4

Environment info

• WordPress version: 5.9 RC-3
• Gutenberg version: This happened both with and without the plugin.
• Theme: Twenty Twenty One, Twenty Twenty Two
• Browser: Google Chrome 97.0.4692.71, Microsoft Edge 97.0.1072.62
• OS: Windows 11

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

[ddryo]

I was able to reproduce it too.

[ddryo]

I can still reproduce it with 5.9-RC4.

[nendeb]

It is also reproduced in WP5.9 Custom Post Type.

[ddryo]

Once the custom field overlaps the content area, we have to refresh the screen to get rid of it.

This is very annoying because we have to refresh the screen when we are still in the middle of writing an article and don't want to save it.

[carolinan]

I can reproduce this in WordPress 5.9 with and without Gutenberg trunk.
It seems to be caused by a set height when you switch from either tablet or mobile preview to desktop:

This is the default CSS when you view the post in desktop without first selecting a different preview:
<div class="is-desktop-preview" style="width: 100%; margin: 0px; display: flex; flex-flow: column; background: white;">

And this is the CSS if you switch to deskop:
<div class="is-desktop-preview" style="width: 100%; margin: 0px auto; display: flex; flex-flow: column; background: white; height: 761px; border-radius: 0px; border: 0px none rgb(60, 67, 74); overflow-y: visible;">

If I remove this height in the browser inspector tools, the meta boxes are placed correctly.

I was not able to pin point where exactly the height is from:
I believe part of the style is generated from https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-post/src/components/visual-editor/index.js#L126

But there is a comment stating that We intentionally omit a 100% height here.
This made me uncertain because if we are omitting the height here, what is adding the 761px height in the inline CSS?

I looked through useResizeCanvas but it does not set this height.

Related: #33817

Pinging @jasmussen since you worked on the related issue in Safari.

[jasmussen]

Thanks for the ping. As I recall, the Safari issue was related to a browser bug or rule interpretation. But with the steps you share I can reproduce in Chrome as well, and so it seems the right solution is to remove some of those extra properties that are applied. I'm not entirely sure if you worked on it, @ellatrix, so feel free to ignore, but I have a feeling you have an idea.

[peterwilsoncc]

I've moved this to the 5.9.x project to match the ticket filed on trac.

[amboutwe]

I reproduced the issue in a new local install with no plugins and the Twenty Twenty-One (2021) theme. The behavior does not happen in WP 5.8.2, so it's a regression. It also happens with the new Twenty Twenty-Two theme.
​
​Screencasts using 2021 theme:
​WP 5.8.2 https://drive.google.com/file/d/1TKvN46Hn8BfU67x2iA6E6mumg9wBvf1w/view
WP 5.9 ​https://drive.google.com/file/d/1H3vNznRxFkSh5TsdVjuSLXf9kLYIbye_/view

[carolinan]

I can set the height to 100%, which seems to solve the problem, but I can't test on Safari 13. I'm new to mac and the installed Safari version is 15.3. There does not seem to be a safe way to downgrade?

[stefanfisk]

Adding this to my block editor styles (enqueue_block_editor_assets) seems to work around the issue:

// Workaround for https://github.com/WordPress/gutenberg/issues/38062
.is-desktop-preview {
    height: 100% !important;
}

[t-hamano]

I tested again on the latest branch after #38910 was merged, and all of the following themes work fine:

• Twenty Twenty Two
• Twenty Twenty One
• Twenty Twenty

So I am closing this issue.

@carolinan
Thank you for your work !

[quantumleap33]

After further testing on WP 5.9.3, I can confirm that the issue has NOT been resolved in any of the themes mentioned, and no plugins installed.

Step to reproduce:

1. Create a new page, write a title, and put a 5 paragraph Lorem Ipsum text (so it's quite long).
2. Switch to "Tablet" or "Mobile" view, then back to "Desktop".
3. Twenty Twenty-Two theme: The custom fields meta box covers the bottom part of the content.
   Twenty Twenty and Twenty Twenty-One theme: The metabox overlays the content in the middle of the visible pane.

[t-hamano]

Hi @quantumleap33,

This issue has been fixed in PR #38910.
It has been fixed in the Gutenberg trunk, but I think it hasn't been backported in WordPress 5.9.3.

I believe this PR should have been backported to 5.9.3, but my closing this issue might be the reason it was not backported.

@peterwilsoncc
@carolinan
If you have any advice on the best way to handle this, please advise.

[Mamaduka]

The PR wasn't labeled for backporting; it is why WordPress 5.9.3 didn't include it.

[peterwilsoncc]

@audrasjb Do you think there will be a 5.9.4 at this stage?

@Mamaduka If the answer comes back yes, are you able to apply the appropriate labels, etc?

[Mamaduka]

@peterwilsoncc tentatively added the label to the PR.

[darkonelson]

It happens to me too. Astra theme and UAG blocks after WP5.9 version.
And after 5.9.3 problem remains the same.

[carolinan]

@darkonelson Correct, the fix ix not in WordPress 5.9.3. It is in 6.0 beta.

[darkonelson]

Thank you Carolinan for your information.