From 04e70309467d844b30fe6e76315ea3d505cd578e Mon Sep 17 00:00:00 2001 From: Rishit Gupta <74411873+Rishit30G@users.noreply.github.com> Date: Mon, 22 Jul 2024 09:50:50 -0400 Subject: [PATCH 1/3] Fix z-index issue --- packages/editor/src/components/visual-editor/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss index b7fbf882a897ba..180707f1247114 100644 --- a/packages/editor/src/components/visual-editor/style.scss +++ b/packages/editor/src/components/visual-editor/style.scss @@ -5,6 +5,7 @@ background-color: $gray-300; // Make this a stacking context to contain the z-index of children elements. isolation: isolate; + z-index: 5; // Centralize the editor horizontally (flex-direction is column). align-items: center; From cc9a0fa582b0c5e980d8e5fd5088904f4887c0cc Mon Sep 17 00:00:00 2001 From: Rishit Gupta <74411873+Rishit30G@users.noreply.github.com> Date: Tue, 23 Jul 2024 11:06:02 -0400 Subject: [PATCH 2/3] Update z-index in style.css --- packages/edit-post/src/components/layout/style.scss | 4 ++++ packages/editor/src/components/visual-editor/style.scss | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index b59009e80f0fd3..387ca2fd26209e 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -8,6 +8,10 @@ clear: both; } +.edit-post-layout.has-metaboxes .edit-post-visual-editor { + z-index: 99; +} + // Adjust the position of the notices .components-editor-notices__snackbar { position: fixed; diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss index 180707f1247114..b7fbf882a897ba 100644 --- a/packages/editor/src/components/visual-editor/style.scss +++ b/packages/editor/src/components/visual-editor/style.scss @@ -5,7 +5,6 @@ background-color: $gray-300; // Make this a stacking context to contain the z-index of children elements. isolation: isolate; - z-index: 5; // Centralize the editor horizontally (flex-direction is column). align-items: center; From 8505d8310170df0881858304251c88b942583ef3 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 23 Jul 2024 13:42:29 -0700 Subject: [PATCH 3/3] Use the z-index map --- packages/base-styles/_z-index.scss | 1 + packages/edit-post/src/components/layout/style.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index b8a9088cfd72cc..7befb5ba272c4b 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -21,6 +21,7 @@ $z-layers: ( ".interface-complementary-area .components-panel__header": 1, // higher sticky element ".components-modal__header": 10, + ".edit-post-layout.has-metaboxes .edit-post-visual-editor": 1, // The popovers contained in visual editor go in front of the metabox container. ".edit-post-meta-boxes-area.is-loading::before": 1, ".edit-post-meta-boxes-area .spinner": 5, ".components-popover__close": 5, diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 387ca2fd26209e..d5e2aaa4b1e6f5 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -9,7 +9,7 @@ } .edit-post-layout.has-metaboxes .edit-post-visual-editor { - z-index: 99; + z-index: z-index(".edit-post-layout.has-metaboxes .edit-post-visual-editor"); } // Adjust the position of the notices