Skip to content

DataViews: Inline z-index values #78315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mirka merged 4 commits into from
May 15, 2026
Merged

DataViews: Inline z-index values #78315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
13cab50
DataViews: Inline z-index values
mirka May 14, 2026
4804c58
Clean up further
mirka May 14, 2026
55d7031
Add changelog
mirka May 14, 2026
80627bb
Merge branch 'trunk' into dataviews-inline-z-index-values
mirka May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/base-styles/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 0 additions & 9 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand Down
1 change: 1 addition & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
4 changes: 2 additions & 2 deletions packages/dataviews/src/components/dataviews-footer/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use "@wordpress/base-styles/z-index" as *;
@use "../../dataviews/style" as *;

.dataviews-footer {
Expand All @@ -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;
Copy link
Copy Markdown
Member Author

@mirka mirka May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This perhaps doesn't even need a z-index because it will be the highest just due to DOM order. But the Footer subcomponent can also be used modularly by consumers, which means maybe they will place it somewhere other than the footer position.

So we keep the z-index, but downgrade it from 2 to 1, due to the grid card stacking context now being isolated (so the footer doesn't have to compete with the z-index 1 of the grid card checkboxes).


.is-refreshing {
@include dataviews-refreshing();
Expand Down
5 changes: 3 additions & 2 deletions packages/dataviews/src/components/dataviews-layouts/grid/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use "@wordpress/base-styles/z-index" as *;
@use "../utils/grid-items.scss" as *;
@use "../../../dataviews/style" as *;

Expand Down Expand Up @@ -63,6 +62,7 @@
height: 100%;
justify-content: flex-start;
position: relative;
isolation: isolate;
Copy link
Copy Markdown
Member Author

@mirka mirka May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we can/should isolate the grid card, because it's internal z-indexes should never have to win over anything outside of the card.


.dataviews-view-grid__title-actions {
padding: var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-padding-xs);
Expand Down Expand Up @@ -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) {
Expand Down
5 changes: 3 additions & 2 deletions packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use "@wordpress/base-styles/z-index" as *;
@use "../utils/grid-items.scss" as *;

.dataviews-view-picker-grid {
Expand All @@ -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);
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions packages/dataviews/src/components/dataviews-layouts/table/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/z-index" as *;
@use "../../../dataviews/style" as *;

.dataviews-view-table {
Expand Down Expand Up @@ -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 {
Expand Down
Loading