From fc2ce933560cc112c3c529418586b51a93a2512f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 28 Apr 2026 02:56:24 +0900 Subject: [PATCH 1/3] Cover block: Inline z-index values --- packages/base-styles/_z-index.scss | 7 ------- packages/block-library/src/cover/editor.scss | 3 +-- packages/block-library/src/cover/style.scss | 11 +++++------ 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 04ca59eebd25ac..587905df812db2 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..4f8fbfd1f21685 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,7 @@ .components-placeholder { &.is-large { justify-content: flex-start; - z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large"); + z-index: 1; } } diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index a016d345ee3819..94fe79eca279d3 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,15 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not( ) ) { .wp-block-cover__video-background { - z-index: z-index(".wp-block-cover__video-background"); + z-index: 0; } .wp-block-cover__embed-background { - z-index: z-index(".wp-block-cover__video-background"); + z-index: 0; } .wp-block-cover__image-background { - z-index: z-index(".wp-block-cover__image-background"); + z-index: 0; } // The first selector is required for old Cover markup/ @@ -364,11 +363,11 @@ 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"); + z-index: 1; } .wp-block-cover__inner-container { - z-index: z-index(".wp-block-cover__inner-container"); + 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. From 6ce89e0dc40e39a073c6b14bb90928bfe1926985 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 29 Apr 2026 01:01:20 +0900 Subject: [PATCH 2/3] Add changelog --- packages/base-styles/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 5fe33d6091e2e8..d0f813272f409b 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -4,6 +4,7 @@ ### Breaking Changes +- Remove `.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`, and `.wp-block-cover__video-background` from the `z-index()` helper ([#77753](https://github.com/WordPress/gutenberg/pull/77753)). - Remove `.components-circular-option-picker__option-wrapper::before`, `.components-circular-option-picker__option.is-pressed`, `.components-circular-option-picker__option.is-pressed + svg`, `.components-circular-option-picker__swatches`, and `> *:not(.components-circular-option-picker__swatches)` from the `z-index()` helper ([#77715](https://github.com/WordPress/gutenberg/pull/77715)). - Remove `.components-resizable-box__handle`, `.components-resizable-box__side-handle`, and `.components-resizable-box__corner-handle` from the `z-index()` helper ([#77620](https://github.com/WordPress/gutenberg/pull/77620)). - Remove `.components-form-toggle__input` from the `z-index()` helper ([#77619](https://github.com/WordPress/gutenberg/pull/77619)). From d102a81ec82e4bdda38a906693e15920a5a5dabd Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 30 Apr 2026 22:14:39 +0900 Subject: [PATCH 3/3] Add more code comments Co-authored-by: Marco Ciampini --- packages/block-library/src/cover/editor.scss | 1 + packages/block-library/src/cover/style.scss | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 4f8fbfd1f21685..b8711efb4e7a75 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -12,6 +12,7 @@ .components-placeholder { &.is-large { justify-content: flex-start; + // 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 94fe79eca279d3..80ada5abc661ad 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -347,14 +347,17 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not( ) ) { .wp-block-cover__video-background { + // Background media sits at the base of the stack. z-index: 0; } .wp-block-cover__embed-background { + // Shares the same base layer as the video background. z-index: 0; } .wp-block-cover__image-background { + // Background media sits at the base of the stack. z-index: 0; } @@ -363,10 +366,12 @@ 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 { + // Sit above the video/image/embed background media. z-index: 1; } .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