diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index d2eae5960345fa..d81ca28e34f54e 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/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 diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e47e1cc51b45fb..f86c262121d1da 100644 --- a/packages/base-styles/_z-index.scss +++ b/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, diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index cea97380b1c368..b8711efb4e7a75 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/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; } } diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index a016d345ee3819..80ada5abc661ad 100644 --- a/packages/block-library/src/cover/style.scss +++ b/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,15 +347,18 @@ 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/ @@ -364,11 +366,13 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not( &.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.