Update z-index hierarchy (#65626)

Co-authored-by: renatho <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: allilevine <[email protected]> Co-authored-by: youknowriad <[email protected]>
WordPress · Oct 11, 2024 · 7e52f6e · 7e52f6e
1 parent 20a3808
commit 7e52f6e
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -32,12 +32,10 @@ $z-layers: (
 	".interface-interface-skeleton__header": 30,
 	".interface-interface-skeleton__content": 20,
 	".edit-widgets-header": 30,
-	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block.
 	".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
-	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
-	".block-library-cover__padding-visualizer": 2, // BoxControl visualizer needs to be +1 higher than .wp-block-cover.has-background-dim::before
-	".wp-block-cover__image-background": 0, // Image background inside cover block.
-	".wp-block-cover__video-background": 0, // Video background inside cover block.
+	".wp-block-cover.has-background-dim::before": 0, // Overlay area inside block cover need to be higher than the video background.
+	".wp-block-cover__image-background": -1, // Image background inside cover block.
+	".wp-block-cover__video-background": -1, // Video background inside cover block.
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
 	// Fixed position appender:

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -42,7 +42,6 @@
 	// Shown while media is being uploaded
 	.components-spinner {
 		position: absolute;
-		z-index: z-index(".wp-block-cover__inner-container");
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%); // Account for spinner dimensions

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -95,8 +95,8 @@
 	}
 
 	.wp-block-cover__inner-container {
+		position: relative;
 		width: 100%;
-		z-index: z-index(".wp-block-cover__inner-container");
 		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */