Cover block: Inline z-index values

packages/base-styles/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Remove the following entries from the `z-index()` helper ([#77753](https://github.com/WordPress/gutenberg/pull/77753)):
+    -   `.wp-block-cover.is-placeholder .components-placeholder.is-large`
+    -   `.wp-block-cover__inner-container`
+    -   `.wp-block-cover.has-background-dim::before`
+    -   `.wp-block-cover__image-background`
+    -   `.wp-block-cover__video-background`
+
 ## 7.0.0 (2026-04-29)
 
 ### Breaking Changes

packages/base-styles/_z-index.scss

@@ -21,13 +21,6 @@ $z-layers: (
 	".interface-interface-skeleton__header": 30,
 	".interface-interface-skeleton__content": 20,
 
-	".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
-	// These z-index are now used only for a deprecated version of the cover block.
-	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block.
-	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
-	".wp-block-cover__image-background": 0, // Image background inside cover block.
-	".wp-block-cover__video-background": 0, // Video background inside cover block.
-
 	// Fixed position appender:
 	".block-editor-block-list__block .block-list-appender": 2,
 

packages/block-library/src/cover/editor.scss

@@ -1,5 +1,4 @@
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .wp-block-cover {
 	// Override default cover styles
@@ -13,7 +12,8 @@
 		.components-placeholder {
 			&.is-large {
 				justify-content: flex-start;
-				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+				// Lift the resizer UI above the surrounding placeholder content.
+				z-index: 1;
 			}
 		}
 

packages/block-library/src/cover/style.scss

@@ -1,6 +1,5 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .wp-block-cover-image,
 .wp-block-cover {
@@ -348,27 +347,32 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(
 )
 ) {
 	.wp-block-cover__video-background {
-		z-index: z-index(".wp-block-cover__video-background");
+		// Background media sits at the base of the stack.
+		z-index: 0;
 	}
 
 	.wp-block-cover__embed-background {
-		z-index: z-index(".wp-block-cover__video-background");
+		// Shares the same base layer as the video background.
+		z-index: 0;
 	}
 
 	.wp-block-cover__image-background {
-		z-index: z-index(".wp-block-cover__image-background");
+		// Background media sits at the base of the stack.
+		z-index: 0;
 	}
 
 	// The first selector is required for old Cover markup/
 	// Keep .wp-block-cover__gradient-background for v8 deprecation.
 	&.has-background-dim:not(.has-background-gradient)::before,
 	.wp-block-cover__background,
 	.wp-block-cover__gradient-background {
-		z-index: z-index(".wp-block-cover.has-background-dim::before");
+		// Sit above the video/image/embed background media.
+		z-index: 1;
 	}
 
 	.wp-block-cover__inner-container {
-		z-index: z-index(".wp-block-cover__inner-container");
+		// Lift the inner blocks above the background media and overlay.
+		z-index: 1;
 
 		// Reset the z-index to auto when the body has a modal open. So when the
 		// modal is inside the cover, it doesn't create a stacking context.