Skip to content

@wordpress/ui: Compat overlay slot — viewport-sized containing block #78441

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
ciampo merged 1 commit into from
May 20, 2026
+24 −12
Merged

@wordpress/ui: Compat overlay slot — viewport-sized containing block #78441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
### Bug Fixes

- Apply shared item popup typography to inline lists and empty states ([#78403](https://github.com/WordPress/gutenberg/pull/78403)).
- Stretch the compat overlay slot to viewport size so portaled popups stop collapsing to their min-content width — most visible on long-text tooltips, which wrapped to one word per line ([#78441](https://github.com/WordPress/gutenberg/pull/78441)).

## 0.13.0 (2026-05-14)

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/tooltip/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
* positioner (via the shared `.box-sizing` reset utility), so
* the 1px is absorbed and non-FC layout is unchanged.
*/
@media (forced-colors: active) {
@media ( forced-colors: active ) {
border: 1px solid CanvasText;
}
}
Expand Down
33 changes: 22 additions & 11 deletions packages/ui/src/utils/css/wp-compat-overlay-slot.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,35 @@
@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;

/*
* Compat overlay slot — body-level positioned container that hosts
* `@wordpress/ui` overlays so they reliably stack in mixed-library
* compositions. See `getWpCompatOverlaySlot()` for the runtime side.
*
* Authored unlayered (outside `@layer wp-ui-*`) so the slot's z-index and
* positioning win against any `@layer`-scoped rule.
* The `.slot` rule is authored unlayered (outside `@layer wp-ui-*`) so the
* slot's z-index and positioning win against any `@layer`-scoped rule.
*/

.slot {
/* `position: fixed` is load-bearing: `z-index` is ignored on `static`,
* and the slot must be a containing block at viewport `(0, 0)` so
* floating-ui's viewport-relative `top`/`left` resolve correctly. */
/* Viewport-sized so `position: absolute` overlay positioners inside
* the slot have a non-zero containing block — otherwise `width: auto`
* popups collapse to their min-content width. */
position: fixed;
top: 0;
/* Physical, not logical. `inset-inline-start: 0` would resolve to
* `right: 0` in RTL and offset every absolute child off-viewport. */
/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- See comment above. */
left: 0;
/* Sits in a reserved billion-scale band above the legacy z-index map in
inset: 0;
/* Reserved band above the legacy z-index map in
* `packages/base-styles/_z-index.scss`. */
z-index: 1000000003;
isolation: isolate;
/* The slot itself doesn't capture clicks; portaled overlays opt back in
* via the `.slot > *` rule below. */
pointer-events: none;
}

/*
* Re-enable interaction for portaled overlays. Placed in the lowest layer
* so any consumer can override with a higher-layer (or unlayered) rule.
*/
@layer wp-ui-utilities {
.slot > * {
pointer-events: auto;
}
}
Loading