diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index bb5f4e44ad9899..b3e7554b1fda11 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,6 +2,13 @@ ## Unreleased +### Breaking Changes + +- Remove the following entries from the `z-index()` helper ([#78315](https://github.com/WordPress/gutenberg/pull/78315)): + - `.dataviews-footer` + - `.dataviews-view-grid__card .dataviews-selection-checkbox` + - `.dataviews-view-table thead` + ## 8.0.0 (2026-05-14) ### Breaking Changes diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 98864bb6d394f8..ad2c022733b147 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -125,15 +125,6 @@ $z-layers: ( // Appear under the topbar. ".customize-widgets__block-toolbar": 7, - // Ensure checkbox + actions don't overlap table header - ".dataviews-view-table thead": 1, - - // Ensure selection checkbox stays above the preview field. - ".dataviews-view-grid__card .dataviews-selection-checkbox": 1, - - // Ensure footer stays above the preview field. - ".dataviews-footer": 2, - // Needs to be below media library (.media-model) that has a z-index of 160000. ".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown": 160000 - 10, ); diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index a0fe6b9e95eda3..7b03dc2c95abfa 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- DataViews: Lower the sticky footer z-index and isolate grid card stacking contexts. [#78315](https://github.com/WordPress/gutenberg/pull/78315) - DataViews: Refresh filter chip styling to align with `Button`. [#75204](https://github.com/WordPress/gutenberg/pull/75204) - DataForms: Increase the minimum width of the panel layout popover from 256px to 320px so option labels have more room. [#75204](https://github.com/WordPress/gutenberg/pull/75204) diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss index 4f5caeef034d0c..5cbead41d9bdce 100644 --- a/packages/dataviews/src/components/dataviews-footer/style.scss +++ b/packages/dataviews/src/components/dataviews-footer/style.scss @@ -1,4 +1,3 @@ -@use "@wordpress/base-styles/z-index" as *; @use "../../dataviews/style" as *; .dataviews-footer { @@ -14,7 +13,8 @@ transition: padding ease-out 0.1s; } - z-index: z-index(".dataviews-footer"); + // Ensure the footer stays above the scrolling content, independent of DOM order. + z-index: 1; .is-refreshing { @include dataviews-refreshing(); diff --git a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss index e657e89e1a7856..d0424ac096bcf3 100644 --- a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss @@ -1,4 +1,3 @@ -@use "@wordpress/base-styles/z-index" as *; @use "../utils/grid-items.scss" as *; @use "../../../dataviews/style" as *; @@ -63,6 +62,7 @@ height: 100%; justify-content: flex-start; position: relative; + isolation: isolate; .dataviews-view-grid__title-actions { padding: var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-padding-xs); @@ -195,7 +195,8 @@ position: absolute; top: -9999em; left: var(--wpds-dimension-padding-sm); - z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox"); + // Ensure selection checkbox stays above the preview field. + z-index: 1; opacity: 0; @media not (prefers-reduced-motion) { diff --git a/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss b/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss index e30a56207075f8..cd1a2bdb3ac2ec 100644 --- a/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss @@ -1,4 +1,3 @@ -@use "@wordpress/base-styles/z-index" as *; @use "../utils/grid-items.scss" as *; .dataviews-view-picker-grid { @@ -16,6 +15,7 @@ height: 100%; justify-content: flex-start; position: relative; + isolation: isolate; .dataviews-view-picker-grid__title-actions { padding: var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-padding-xs); @@ -154,7 +154,8 @@ position: absolute; top: -9999em; left: var(--wpds-dimension-padding-sm); - z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox"); + // Ensure selection checkbox stays above the preview field. + z-index: 1; @media (hover: none) { // Show checkboxes on devices that do not support hover. diff --git a/packages/dataviews/src/components/dataviews-layouts/table/style.scss b/packages/dataviews/src/components/dataviews-layouts/table/style.scss index a536e5556f9029..62a3fc0f6b322e 100644 --- a/packages/dataviews/src/components/dataviews-layouts/table/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/table/style.scss @@ -1,5 +1,4 @@ @use "@wordpress/base-styles/mixins" as *; -@use "@wordpress/base-styles/z-index" as *; @use "../../../dataviews/style" as *; .dataviews-view-table { @@ -129,7 +128,8 @@ thead { position: sticky; inset-block-start: 0; - z-index: z-index(".dataviews-view-table thead"); + // Ensure the header stays above the scrolling content. + z-index: 1; background-color: inherit; &.dataviews-view-table__thead--stuck {