Popover: Render inside the overlay legacy slot#77756
Draft
ciampo wants to merge 1 commit intoadd/overlay-legacy-slot-infrastructurefrom
Draft
Popover: Render inside the overlay legacy slot#77756ciampo wants to merge 1 commit intoadd/overlay-legacy-slot-infrastructurefrom
ciampo wants to merge 1 commit intoadd/overlay-legacy-slot-infrastructurefrom
Conversation
Move the Popover fallback container, and Gutenberg's internal `Popover.Slot` declarations, into the overlay legacy slot introduced in the previous PR. - `getPopoverFallbackContainer()` now creates `.components-popover__fallback-container` as a child of `.wp-overlay-legacy` instead of the document body. - The `block-toolbar` and `__unstable-block-tools-after` slots in `block-editor/block-tools`, the `block-toolbar` slot in `editor/collapsible-block-toolbar`, the `block-toolbar` slot in `edit-widgets/header`, and the default `Popover.Slot` in `customize-widgets` are wrapped with `createPortal(<Popover.Slot …>, getOverlayLegacySlot())`. - Expose `getOverlayLegacySlot()` from `@wordpress/components` private APIs as `__experimentalGetOverlayLegacySlot` so editor packages can target the slot without hardcoded selectors. - The `.components-popover` z-index (1,000,000) is unchanged; it now stacks relative to the legacy slot's stacking context. Plugin-registered slots are unaffected. Plugin-registered `Popover.Slot` declarations are unaffected — only Gutenberg's internal slots are relocated.
github-actions
Bot
added
[Package] Components
|
Size Change: +248 B (0%) Total Size: 7.82 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
1 participant
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?
Stacked on top of #77755.
Move the
@wordpress/componentsPopover into the overlay legacy slot introduced in the previous PR. Two paths are migrated:Why?
This is the second step in the two-slot overlay architecture: every `@wordpress/components` overlay needs to land inside `.wp-overlay-legacy` so that, once `@wordpress/ui` leaf overlays start rendering inside `.wp-overlay-prime` in a later PR, mixed-library composition (e.g. a `@wordpress/ui` Tooltip rendered inside a `@wordpress/components` Popover) stacks correctly without per-instance plumbing.
The `.components-popover` z-index (1,000,000) is unchanged. It now stacks relative to the legacy slot's stacking context rather than the document body, preserving the existing Tooltip > Popover > Modal ordering.
Plugin-registered `Popover.Slot` declarations (any slot whose name doesn't appear in Gutenberg's own packages) are not relocated.
How?
`createPortal` only changes DOM bubbling, not the React tree, so SlotFill context propagation, `usePopoverScroll`'s wheel-forwarding, and ref-based focus checks (e.g. `useClearSelectedBlock`) all continue to work.
Testing Instructions
After this PR is loaded, the popover fallback container and Gutenberg's slot-routed popovers should be inside `<div class="wp-overlay-legacy">` rather than directly under ``.
Unit tests:
```sh
npm run test:unit -- packages/components/src/popover packages/customize-widgets packages/edit-widgets packages/editor/src/components/collapsible-block-toolbar packages/block-editor/src/components/block-tools
```
Testing Instructions for Keyboard
Keyboard interaction with popovers is unchanged. Open the post editor, select a block, press `Alt+F10` to focus the block toolbar, navigate inside it. Open the inserter with `/` and verify it can be navigated and dismissed with `Escape`.
Use of AI Tools
This PR was authored with assistance from AI tooling (Claude). All code, copy, and structural decisions were reviewed by a human contributor.