UI: Hook Popover into the wp compat overlay slot

[ciampo]

Follow-up to #77851.
Supports the controlled Popover use in #80208.

What?

Defaults @wordpress/ui Popover.Portal to the wp compat overlay slot when the host opts in.

Popover remains marked use-with-caution and is not added to the recommended-components allowlist.

Why?

A controlled UI Popover can appear inside an @wordpress/components Modal or Popover. Without the compat slot, its portal can stack below the host overlay.

This does not make arbitrary mixed overlay descendants compatible. Keeping Popover unrecommended preserves that caveat while allowing controlled uses to participate in the existing compatibility mechanism.

How?

• Uses the compat overlay slot as Popover's default portal container.
• Preserves an explicitly supplied portal container.
• Covers the opted-in, dormant, and explicit-container cases with unit tests.
• Extends the compat-slot playground with a UI Popover containing a nested UI Autocomplete.

Testing Instructions

1. Run npm run test:unit -- packages/ui/src/popover/test/index.test.tsx --runInBand.
2. Run node_modules/.bin/tsc --build packages/ui/tsconfig.json.
3. Run npm run storybook:dev.
4. Open Playground → Debug fixtures → WP Compat Overlay Slot.
5. In both stories, open the UI Popover, then open its nested Autocomplete.
6. Confirm both render above the host @wordpress/components overlay.

Testing Instructions for Keyboard

1. Open each host overlay with Enter or Space.
2. Tab to the UI Popover trigger and open it with Enter or Space.
3. Tab to the nested Autocomplete, type to filter, and use the arrow keys to navigate.
4. Press Escape to close the active overlay and confirm focus remains within the expected overlay flow.

Screenshots or screencast

Not applicable; this changes overlay placement without an intended visual change.

AI Tools

Authored with Codex assistance.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Size Change: +11 B (0%)

Total Size: 7.72 MB

📦 View Changed

Filename	Size	Change
build/modules/content-types/index.min.js	164 kB	+11 B (+0.01%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 49275b3.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29413767365
📝 Reported issues:

• [Flaky Test] Should navigate inner blocks with arrow keys #39607 in /test/e2e/specs/editor/various/writing-flow.spec.js

[mirka]

I noticed #80304 as a preexisting issue, but otherwise this PR works as expected 👍

[github-actions]

There was a conflict while trying to cherry-pick the commit to the wp/7.1 branch. Please resolve the conflict manually and create a PR to the wp/7.1 branch.

PRs to wp/7.1 are similar to PRs to trunk, but you should base your PR on the wp/7.1 branch instead of trunk.

# Checkout the wp/7.1 branch instead of trunk.
git checkout wp/7.1

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 2c193dc0e61863447685b337441753b7dd6100b3

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.1 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

[ciampo]

Manual backport to 7.1 beta done in #80322

[t-hamano]

Removing the Backport to Gutenberg RC label from this PR and add it to #80322 instead. This is because cherry-picking the manual backport PR created for wp/7.1 is less likely to cause conflicts than cherry-picking the PR that caused the conflict.