Skip to content

Site Editor: Inline layout z-index values #77807

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 4, 2026
+7 −21
Merged

Site Editor: Inline layout z-index values #77807

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
589e819
Inline edit site layout z-index values
mirka Apr 29, 2026
26a0dbe
Add changelog
mirka Apr 29, 2026
f5dfeed
Merge branch 'trunk' into inline-edit-site-layout-z-indexes
mirka May 4, 2026
43ca8d2
Remove dead CSS
mirka May 4, 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
5 changes: 4 additions & 1 deletion packages/base-styles/CHANGELOG.md
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@ciampo ciampo Apr 30, 2026

Choose a reason for hiding this comment

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

Looks like a new package release happened after opening this PR — we'll need to rebase/merge trunk and create a new CHANGELOG entry in the Unreleased section

Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

### Breaking Changes

- Remove the following entries from the `z-index()` helper ([#77619](https://github.com/WordPress/gutenberg/pull/77619), [#77620](https://github.com/WordPress/gutenberg/pull/77620), [#77621](https://github.com/WordPress/gutenberg/pull/77621), [#77714](https://github.com/WordPress/gutenberg/pull/77714), [#77715](https://github.com/WordPress/gutenberg/pull/77715), [#77717](https://github.com/WordPress/gutenberg/pull/77717), [#77774](https://github.com/WordPress/gutenberg/pull/77774)):
- Remove the following entries from the `z-index()` helper ([#77619](https://github.com/WordPress/gutenberg/pull/77619), [#77620](https://github.com/WordPress/gutenberg/pull/77620), [#77621](https://github.com/WordPress/gutenberg/pull/77621), [#77714](https://github.com/WordPress/gutenberg/pull/77714), [#77715](https://github.com/WordPress/gutenberg/pull/77715), [#77717](https://github.com/WordPress/gutenberg/pull/77717), [#77774](https://github.com/WordPress/gutenberg/pull/77774), [#77807](https://github.com/WordPress/gutenberg/pull/77807)):
- `.block-editor-block-contextual-toolbar`
- `.block-editor-block-list__block {core/image aligned wide or fullwide}`
- `.block-editor-block-list__block::before`
Expand All @@ -30,6 +30,9 @@
- `.components-resizable-box__corner-handle`
- `.dataviews-action-modal__quick-edit`
- `.edit-site-editor__toggle-save-panel`
- `.edit-site-layout__canvas-container`
- `.edit-site-layout__canvas-container.is-resizing::after`
- `.edit-site-layout__sidebar`
- `.edit-site-template-panel__replace-template-modal`
- `.edit-widgets-header`
- `.edit-widgets-sidebar {greater than small}`
Expand Down
5 changes: 1 addition & 4 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,11 +146,8 @@ $z-layers: (
// Appear under the topbar.
".customize-widgets__block-toolbar": 7,

// Site editor layout
// Site editor
".edit-site-templates__dataviews-list-pagination": 2,
".edit-site-layout__canvas-container": 2,
".edit-site-layout__sidebar": 1,
".edit-site-layout__canvas-container.is-resizing::after": 100,
// Title needs to appear above other UI the section content.
".edit-site-sidebar-navigation-screen__title-icon": 1,

Expand Down
8 changes: 4 additions & 4 deletions packages/edit-site/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

.edit-site-layout__sidebar-region {
z-index: z-index(".edit-site-layout__sidebar");
z-index: 1;
Copy link
Copy Markdown
Contributor

@ciampo ciampo Apr 30, 2026

Choose a reason for hiding this comment

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

With the refactor, it becomes harder to understand the context behind these values, which may cause future unwated breakage.

IMO we should either add CSS comments around the file, eg

Suggested change
z-index: 1;
// Sits behind `.edit-site-layout__canvas-container` so the canvas stays on top
// when the sidebar is `position: fixed` in `is-full-canvas` mode.
z-index: 1;

Or group those z-index assignments next to each other, or even move them to local sass variables at the top of the file, with a little explanation

Copy link
Copy Markdown
Member Author

@mirka mirka Apr 30, 2026

Choose a reason for hiding this comment

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

To be honest I'm finding it hard to do so when the intent behind the values have never been written down anywhere 😅 Are our comments going to capture some of the original intent, but not the whole intent? We're adding a layer of possible inaccuracy by adding assumptive comments…

There have also been a handful of places where I'm actually not sure what the z-index is even for (i.e. removing it doesn't seem to cause immediate problems).

Copy link
Copy Markdown
Contributor

@ciampo ciampo Apr 30, 2026

Choose a reason for hiding this comment

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

We could at least mention the elements / selectors to which each z-index is related?

Up to you, not a strong opinion

Copy link
Copy Markdown
Member Author

@mirka mirka May 4, 2026

Choose a reason for hiding this comment

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

I tried my best but I could not figure out why any of these z-indexes are needed 💀 Disabling them doesn't trigger any obvious changes.

width: 100vw;
flex-shrink: 0;

Expand Down Expand Up @@ -60,7 +60,7 @@
.edit-site-layout__mobile {
position: relative;
width: 100%;
z-index: z-index(".edit-site-layout__canvas-container");
z-index: 2;
display: flex;
flex-direction: column;

Expand All @@ -84,7 +84,7 @@
.edit-site-layout__canvas-container {
position: relative;
flex-grow: 1;
z-index: z-index(".edit-site-layout__canvas-container");
z-index: 2;
// When animating the frame size can exceed its container size.
overflow: visible;

Expand All @@ -97,7 +97,7 @@
right: 0;
bottom: 0;
content: "";
z-index: z-index(".edit-site-layout__canvas-container.is-resizing::after");
z-index: 100;
Copy link
Copy Markdown
Contributor

@ciampo ciampo Apr 30, 2026

Choose a reason for hiding this comment

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

Noting that this could probably be just any positive number, but I understand that we may keep it at 100 for the sake of the refactor

}
}

Expand Down
Loading