Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Post Editor: Editor canvas squashed by metabox in mobile/tablet view #63708

Closed
2 tasks done
t-hamano opened this issue Jul 18, 2024 · 6 comments · Fixed by #63724
Closed
2 tasks done

Post Editor: Editor canvas squashed by metabox in mobile/tablet view #63708

t-hamano opened this issue Jul 18, 2024 · 6 comments · Fixed by #63724
Assignees
Labels
[Feature] Meta Boxes A draggable box shown on the post editing screen [Package] Edit Post /packages/edit-post [Type] Bug An existing feature does not function as intended

Comments

@t-hamano
Copy link
Contributor

Description

Regression introduced by #63222

Per #63222, the selectors was changed as follows to fix background height and padding when the editor canvas is not an iframe:

// From
.edit-post-layout.has-metaboxes .edit-post-visual-editor {
	flex: 1 0 auto;
	height: auto;
}

// To
.edit-post-visual-editor:not(.is-iframed) {
	flex: 1 0 auto;
	height: auto;
}

This approach works for the desktop view, but in mobile/tablet views the editor canvas is always an iframe, so this style no longer applies and the canvas gets squashed when the meta box is present.

Step-by-step reproduction instructions

  • Install the Yoast SEO plugin. This plugin injects a meta box with lots of content into the post editor.
  • Switch to tablet/mobile view.

Screenshots, screen recording, code snippet

8bb4ee822aac625df7be18a6d55b248c.mp4

Environment info

  • WordPress Verson: 6.6
  • Gutenberg version: 18.8.0 (Can be reproduced even after disabling)

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
Copy link
Contributor

Upon ruminating on this and its related issues, I want to propose the problem stems from the default height: 100% on VisualEditor. For that to even work it depends on the parent and VisualEditor’s styles are better off not assuming anything about its parent. I’ve tried an approach based on that in #63724 and linked it as a fix.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 19, 2024
@wp-seopress
Copy link

wp-seopress commented Jul 22, 2024

By removing this CSS it works:

.editor-visual-editor.is-iframed {
    overflow: hidden;
}

It wasn't there with WP 6.5.

@stokesman
Copy link
Contributor

@wp-seopress, you’re right that selector wasn’t there in WP 6.5 but the overflow: hidden rule was applied to the same element by another selector. It prevents an extraneous scrollbar from appearing when the block toolbar overflows the bottom of the content area. Thanks for the suggestion though. I think we’ve got a solid fix in now.

@wp-seopress
Copy link

🫡

@wp-seopress
Copy link

This bug is back with WP 6.7.

@t-hamano
Copy link
Contributor Author

@wp-seopress This issue is tracked as #66629.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Meta Boxes A draggable box shown on the post editing screen [Package] Edit Post /packages/edit-post [Type] Bug An existing feature does not function as intended
Projects
Status: ✅ Done 6.6.2
Development

Successfully merging a pull request may close this issue.

3 participants