Site Editor: Inline layout z-index values#77807
Merged
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: 0 B Total Size: 7.82 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 43ca8d2. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25328686865
|
ciampo
approved these changes
Apr 30, 2026
Contributor
There was a problem hiding this comment.
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
|
|
||
| .edit-site-layout__sidebar-region { | ||
| z-index: z-index(".edit-site-layout__sidebar"); | ||
| z-index: 1; |
Contributor
There was a problem hiding this comment.
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
Member
Author
There was a problem hiding this comment.
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).
Contributor
There was a problem hiding this comment.
We could at least mention the elements / selectors to which each z-index is related?
Up to you, not a strong opinion
Member
Author
There was a problem hiding this comment.
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.
| bottom: 0; | ||
| content: ""; | ||
| z-index: z-index(".edit-site-layout__canvas-container.is-resizing::after"); | ||
| z-index: 100; |
Contributor
There was a problem hiding this comment.
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
# Conflicts: # packages/base-styles/CHANGELOG.md # packages/base-styles/_z-index.scss
mirka
commented
May 4, 2026
| // When animating the frame size can exceed its container size. | ||
| overflow: visible; | ||
|
|
||
| &.is-resizing::after { |
Member
Author
There was a problem hiding this comment.
In additional testing, I noticed that this is dead code that should have been removed in #57119. Nothing adds this is-resizing class anymore.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -83 B (0%) Total Size: 7.91 MB 📦 View Changed
ℹ️ View Unchanged
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Inlines the Site Editor layout z-index values into their local stylesheet.
Why?
The shared z-index map is easier to maintain when it only contains values that need to be coordinated across broader contexts. These values are local to the Site Editor layout.
How?
Moves the existing numeric z-index values from
packages/base-styles/_z-index.scssintopackages/edit-site/src/components/layout/style.scss, preserving the current stacking order between the sidebar, canvas, mobile layout, and resizing overlay.Testing Instructions
npm start./wp-admin/site-editor.php.