From 819172cb3c1200654903eb56f9a694580aba4f39 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 8 Sep 2023 14:37:48 +1000 Subject: [PATCH 1/4] This commit bumps the rename modal z-index to be one higher than the dropdown popover component, which is set to 1000000 in the component stylesheet --- .../src/components/page-patterns/rename-menu-item.js | 2 +- packages/edit-site/src/components/template-actions/style.scss | 4 ++++ packages/edit-site/src/style.scss | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 packages/edit-site/src/components/template-actions/style.scss diff --git a/packages/edit-site/src/components/page-patterns/rename-menu-item.js b/packages/edit-site/src/components/page-patterns/rename-menu-item.js index 938023a62cefd3..bd7d33bb821fc1 100644 --- a/packages/edit-site/src/components/page-patterns/rename-menu-item.js +++ b/packages/edit-site/src/components/page-patterns/rename-menu-item.js @@ -79,7 +79,7 @@ export default function RenameMenuItem( { item, onClose } ) { setIsModalOpen( false ); onClose(); } } - overlayClassName="edit-site-list__rename_modal" + overlayClassName="edit-site-list__rename-modal" >
diff --git a/packages/edit-site/src/components/template-actions/style.scss b/packages/edit-site/src/components/template-actions/style.scss new file mode 100644 index 00000000000000..80fce0e440ac7c --- /dev/null +++ b/packages/edit-site/src/components/template-actions/style.scss @@ -0,0 +1,4 @@ +// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher. +.edit-site-list__rename-modal { + z-index: z-index(".components-popover") + 1; +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 12967a31fc43bb..371b94d6439915 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -44,6 +44,7 @@ @import "./components/editor-canvas-container/style.scss"; @import "./components/resizable-frame/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss"; +@import "./components/template-actions/style.scss"; body.js #wpadminbar { display: none; From ca5ecf144a94ab3d574cee611683e5ee526e7432 Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 8 Sep 2023 14:55:05 +1000 Subject: [PATCH 2/4] Update style.scss The +1 is unnecessary thanks to document tree order. --- packages/edit-site/src/components/template-actions/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/template-actions/style.scss b/packages/edit-site/src/components/template-actions/style.scss index 80fce0e440ac7c..3ec4f625bb2100 100644 --- a/packages/edit-site/src/components/template-actions/style.scss +++ b/packages/edit-site/src/components/template-actions/style.scss @@ -1,4 +1,4 @@ // The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher. .edit-site-list__rename-modal { - z-index: z-index(".components-popover") + 1; + z-index: z-index(".components-popover"); } From 4def5f3fa952fc6f1965000b7db53a3cde7d0f7b Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 8 Sep 2023 15:03:08 +1000 Subject: [PATCH 3/4] Add z-index entry --- packages/base-styles/_z-index.scss | 1 + packages/edit-site/src/components/template-actions/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 0739fc1eddd478..4f8bbab5a16095 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -126,6 +126,7 @@ $z-layers: ( ".block-editor-block-lock-modal": 1000001, ".block-editor-template-part__selection-modal": 1000001, ".block-editor-block-rename-modal": 1000001, + ".edit-site-list__rename-modal": 1000001, // Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts // because it uses emotion and not sass. We need it to render on top its parent popover. diff --git a/packages/edit-site/src/components/template-actions/style.scss b/packages/edit-site/src/components/template-actions/style.scss index 80fce0e440ac7c..f0d4d8fe345bec 100644 --- a/packages/edit-site/src/components/template-actions/style.scss +++ b/packages/edit-site/src/components/template-actions/style.scss @@ -1,4 +1,4 @@ // The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher. .edit-site-list__rename-modal { - z-index: z-index(".components-popover") + 1; + z-index: z-index(".edit-site-list__rename-modal"); } From 23a3ecda3e24d7771cf847e47f32be1e778fffd3 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 8 Sep 2023 16:00:04 +1000 Subject: [PATCH 4/4] Moving styles to existing stylesheet --- packages/edit-site/src/components/list/style.scss | 2 ++ packages/edit-site/src/components/template-actions/style.scss | 4 ---- packages/edit-site/src/style.scss | 1 - 3 files changed, 2 insertions(+), 5 deletions(-) delete mode 100644 packages/edit-site/src/components/template-actions/style.scss diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index 59d37ebf3d3139..0979b7ac7e3a6a 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -130,6 +130,8 @@ } .edit-site-list__rename-modal { + // The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher. + z-index: z-index(".edit-site-list__rename-modal"); .components-base-control { @include break-medium() { width: $grid-unit * 40; diff --git a/packages/edit-site/src/components/template-actions/style.scss b/packages/edit-site/src/components/template-actions/style.scss deleted file mode 100644 index f0d4d8fe345bec..00000000000000 --- a/packages/edit-site/src/components/template-actions/style.scss +++ /dev/null @@ -1,4 +0,0 @@ -// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher. -.edit-site-list__rename-modal { - z-index: z-index(".edit-site-list__rename-modal"); -} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 371b94d6439915..12967a31fc43bb 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -44,7 +44,6 @@ @import "./components/editor-canvas-container/style.scss"; @import "./components/resizable-frame/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss"; -@import "./components/template-actions/style.scss"; body.js #wpadminbar { display: none;