-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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: Prevent popover from being hidden by metabox #63939
Conversation
Size Change: +6 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
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 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. |
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.
Thanks for putting this together! I tested and found everything as it should be. This approach seems closer to how things used to be while not regressing anything.
I'm not sure it matters too much but I might have opted to make the stacking context the interface skeleton’s __content
element because now I've considered it has overflow: auto
applied and so clips its children. That’s to say, with the PR as is, its children can intermingle with the z-indexes outside yet they can’t appear outside its rect. To me that makes it seem a slightly more suitable place for the stacking context.
The other thought I had was that now that `EditorInterface` exists in the editor package and is used in both the Site and Post editors its styles could apply the rule and avoid the the bit of duplication here.
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 47f277bea3..5fdaceaa00 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -3,11 +3,6 @@
clear: both;
}
-.edit-post-layout .interface-interface-skeleton__body {
- // Make this a stacking context to contain the z-index of children elements.
- isolation: isolate;
-}
-
// Adjust the position of the notices
.components-editor-notices__snackbar {
position: fixed;
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 28360b6864..b157057062 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -3,11 +3,6 @@
transition: opacity 0.1s ease-out;
@include reduce-motion("transition");
- .interface-interface-skeleton__body {
- // Make this a stacking context to contain the z-index of children elements.
- isolation: isolate;
- }
-
&.is-loading {
opacity: 0;
}
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
index 77f621acc9..d9b91b820f 100644
--- a/packages/editor/src/components/editor-interface/style.scss
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -2,6 +2,11 @@
height: $header-height + $border-width;
}
+.interface-interface-skeleton__body {
+ // Make this a stacking context to contain the z-index of children elements.
+ isolation: isolate;
+}
+
.editor-visual-editor {
flex: 1 0 auto;
}
I suppose you might have already considered any points I mentioned and trust your judgement on whether to change anything. LGTM.
071a5bd
to
89eb0bb
Compare
@stokesman Thanks for the review! As you feared, it seems the As the E2E test failure indicates, the header buttons in the pre-publish panel are located below the global header: I think this has to do with the pre-publish sidebar being a child of the Therefore, I used the I also added the |
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.
I gave it another test and it all worked as intended. I missed that a test failed last time 😅. Now it looks 🚢 shape.
Added label for WP minor release backport. Seems like a good candidate. |
* 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 <wildworks@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
* Fix canvas issues by removing VisualEditor’s height (#63724) Unlinked contributors: wp-seopress. Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> * 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 <wildworks@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> * Global Styles: Fix block custom CSS pseudo element selectors (#63980) Unlinked contributors: harlet. Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> * Avoid errors for post types without a 'menu_icon' (#64015) Unlinked contributors: karan4official. Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> * Data Views: Don't render action modal when there are no eligible items (#64250) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> * Post editor: apply space below content using a pseudo-element instead of padding-bottom (#64639) Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: PC888 <kracked888@git.wordpress.org> * Featured Image Block: Reduce CSS specificity (#64463) Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> * Inserter: use lighter grammar parse to check allowed status (#64902) Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> * Prepare JSON schemas for Draft 7 update (#63582) Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> * 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 <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> * Don't allow duplicating template parts in non-block-based themes (#64379) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org> * 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 <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> * 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 <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * 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 <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * 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 <mr.fye@oneandthesame.net> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: PC888 <kracked888@git.wordpress.org> Co-authored-by: Dean Sas <dean@deansas.org> Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
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 label as it was already backported and included in WP 6.6.2 |
Fixes #62998
Alternative to #63809 and #63834
What?
This PR fixes an issue where popovers rendered from editor content is hidden behind meta boxes if the metabox is enabled.
Why?
#62681 fixed the block toolbar hiding the header shadow by applying isolation: isolate; to the editor area and making the editor area a stacking context, but this meant that if the editor rendered any popovers, they would be hidden under the metabox.
How?
This PR changes the elements that are considered as stacking contexts as follows:
Post Editor:
Site Editor:
This ensures that the editor area and the media box belong to the same context, and the popover will not be obscured by either area.
Testing Instructions
First, add the following code to
gutenberg.php
. This code adds a button to the meta box. When you click the button, it will display absolutely positioned content that intentionally jumps out of the meta box area.Screenshots or screencast
1cbf41dd024bb7656fec9d84caa4d5a5.mp4
Note
When you merge this PR, don't forget to add the following people as co-authors, who helped resolve this issue:
@Rishit30G @dhananjaykuber