-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Fix canvas issues by removing VisualEditor’s height #63724
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @wp-seopress. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: -16 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
db35302
to
d2ed265
Compare
I have tested scenario 1 and 2 on windows 11 in Chrome, Firefox, and Edge. ✅ Editing post and page content ✅ Editing original synced patterns from the block editor. There is a different bug on this screen but the PR neither solves it or makes it worse. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
I tested all possible scenarios to ensure there are no issues with canvas size/layout in all scenarios.
- To ensure this PR works as expected in the core, I changed IS_GUTENBERG_PLUGIN to false, since this config affects the outcome of the
useShouldIframe
hook. - #51374 fixed an issue where background gradient was repeating unintentionally. I tested with TT3's Sherbet style to ensure the issue didn't reoccur.
Below is a table of all the scenarios I came up with, along with the results of testing in trunk and in this PR:
Screen | Does the meta box exist? | Does a version 2 block exist? | Is the editor an iframe? | View | Test Result (trunk) | Test Result (This PR) |
---|---|---|---|---|---|---|
Post Editor | No | No | Yes | Desktop | ✅ | ✅ |
No | No | Yes | Mobile | ✅ | ✅ | |
Yes | No | No | Desktop | ❌ | ✅ | |
Yes | No | Yes | Mobile | ❌ | ✅ | |
No | Yes | No | Desktop | ✅ | ✅ | |
No | Yes | Yes | Mobile | ✅ | ✅ | |
Yes | Yes | No | Desktop | ❌ | ✅ | |
Yes | Yes | Yes | Mobile | ❌ | ✅ | |
Post Editor > Patterns | No | No | Yes | - | ✅ | ✅ |
Yes | No | No | - | |||
No | Yes | No | - | |||
Yes | Yes | No | - | |||
Site Editor > Template | - | - | Yes | - | ✅ | ✅ |
Site Editor > Patterns | - | - | Yes | - | ✅ | ✅ |
*Note: During testing, I found an issue with the pattern editor where the content would overlap the meta box.
I'm not sure when this issue started, but it might have to do with the fact that in WP6.6, the pattern editor in the post editor is always resizable.
Either way, I don't think it's a blocker for this PR.
@carolinan, Thanks for testing! Does that bug have an issue?
I haven’t verified it but suspect it may have came about in #61896. I wonder if it’s the same issue Carolina was referring to. Big ❤️ for the thorough testing Carolina and Aki 🙇 |
Github account added to my w.org profile |
This is the open issue about the metaboxes in the pattern editing flow #63143 |
@stokesman What do you think about backporting this PR to WP6.6.2 (if that's planned)? This issue first appeared in WP6.6, and I'm concerned that it's affecting a lot of users. |
I’d think it should be backported given that it is a regression in 6.6 and AFAIK that’s the only qualification. I’d like think the bug isn’t too frustrating because the metabox area can be collapsed to see the post content but that’s not justification to for it to get left that way any longer than necessary. |
Unlinked contributors: wp-seopress. Co-authored-by: t-hamano <[email protected]> Co-authored-by: carolinan <[email protected]>
* Fix canvas issues by removing VisualEditor’s height (#63724) Unlinked contributors: wp-seopress. Co-authored-by: t-hamano <[email protected]> Co-authored-by: carolinan <[email protected]> * Post Editor: Prevent popover from being hidden by metabox (#63939) * Post Editor: Prevent popover from being hidden by metabox * Use `.interface-interface-skeleton__content` instead of `.interface-interface-skeleton__body` Co-authored-by: t-hamano <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: Rishit30G <[email protected]> Co-authored-by: dhananjaykuber <[email protected]> * Global Styles: Fix block custom CSS pseudo element selectors (#63980) Unlinked contributors: harlet. Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: dballari <[email protected]> Co-authored-by: wongjn <[email protected]> * Avoid errors for post types without a 'menu_icon' (#64015) Unlinked contributors: karan4official. Co-authored-by: Mamaduka <[email protected]> Co-authored-by: t-hamano <[email protected]> * Data Views: Don't render action modal when there are no eligible items (#64250) Co-authored-by: Mamaduka <[email protected]> Co-authored-by: youknowriad <[email protected]> * Post editor: apply space below content using a pseudo-element instead of padding-bottom (#64639) Co-authored-by: talldan <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: PC888 <[email protected]> * Featured Image Block: Reduce CSS specificity (#64463) Co-authored-by: dsas <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]> * Inserter: use lighter grammar parse to check allowed status (#64902) Co-authored-by: ellatrix <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: jsnajdr <[email protected]> Co-authored-by: tyxla <[email protected]> * Prepare JSON schemas for Draft 7 update (#63582) Co-authored-by: ajlende <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: scruffian <[email protected]> * Fix missing ref support for textAlign and textColumns in theme.json schema (#63625) * Add missing ref support for textAlign and textColumns * Update the theme.json reference docs Co-authored-by: ajlende <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jeryj <[email protected]> * Don't allow duplicating template parts in non-block-based themes (#64379) Co-authored-by: t-hamano <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: MadtownLems <[email protected]> * Fix bumped specificity for layout styles in non-iframed editor (#64076) * Fix too specific layout styles in non-iframed editor * Ensure first/last child rules take precedence * Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing * Update tests * Update client side layout selectors to match theme json * Add backport changelog ---- Co-authored-by: talldan <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: andreiglingeanu <[email protected]> * Revert "Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458)" This reverts commit 53a370e. * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: andreiglingeanu <[email protected]> * Post Editor: fix click space after post content to append (#64992) * Fix minimally * Revise comment * Stop propagation and don’t prevent default * Insert default block if no blocks are present * re-build package lock to match format * Revert "Inserter: use lighter grammar parse to check allowed status (#64902)" This reverts commit 9b9bbe8. --------- Co-authored-by: Mitchell Austin <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: Rishit30G <[email protected]> Co-authored-by: dhananjaykuber <[email protected]> Co-authored-by: Aaron Robertshaw <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: dballari <[email protected]> Co-authored-by: wongjn <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: PC888 <[email protected]> Co-authored-by: Dean Sas <[email protected]> Co-authored-by: dsas <[email protected]> Co-authored-by: Ella <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: jsnajdr <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: Alex Lende <[email protected]> Co-authored-by: ajlende <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: MadtownLems <[email protected]>
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/trunk@58988 602fd350-edb4-49c9-b593-d223f7449a82
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: http://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: https://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58989 602fd350-edb4-49c9-b593-d223f7449a82
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/branches/6.6@58989 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58385 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Removing the backport label, as it was already done in WP 6.6.2. |
What?
A bug fix that’s also a general code quality improvement.
Why?
To fix #63708 — In the Post editor metaboxes overlay the canvas while using device previews. Also this should make working with
VisualEditor
easier because its styling is a little less opinionated.How?
height
rule inVisualEditor
’s styles.flex
rule instead and specified by the parent component’s styles.Testing Instructions
Test every canvas everywhere for everything! Here are a couple scenarios that must be covered. I may add more.
Fix for metaboxes overlaying the canvas in the Post editor
Verify no regression of the background clipping from #62952
Verify the theme background color is not clipped.
Testing Instructions for Keyboard
Screenshots or screencast