Skip to content

Customize Widgets: Keep the block selected when using @wordpress/ui overlays #84628

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 3 commits into from
Oct 13, 2026
Merged

Customize Widgets: Keep the block selected when using @wordpress/ui overlays #84628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c304d5
Customize Widgets: Keep the block selected when using @wordpress/ui o…
manzoorwanijk Oct 13, 2026
d1aa4b2
Customize Widgets: Enable the @wordpress/ui compat overlay slot
manzoorwanijk Oct 13, 2026
ed6daa2
Add PR link to the changelog entry
manzoorwanijk Oct 13, 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
4 changes: 4 additions & 0 deletions packages/customize-widgets/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@

- Raise the minimum required Node.js version to `>=22.13.0`, for stable `require(esm)` support ([#84313](https://github.com/WordPress/gutenberg/pull/84313)).

### Bug Fixes

- Keep the block selected when choosing an option in a `@wordpress/ui` overlay, such as the Legacy Widget type select ([#84628](https://github.com/WordPress/gutenberg/pull/84628)).

## 5.57.0 (2026-10-07)

### Bug Fixes
Expand Down
3 changes: 3 additions & 0 deletions packages/customize-widgets/src/components/customize-widgets/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from '@wordpress/element';
import { SlotFillProvider, Popover } from '@wordpress/components';
import { ThemeProvider } from '@wordpress/theme';
import { useEnableWpCompatOverlaySlot } from '@wordpress/ui';
import ErrorBoundary from '../error-boundary';
import SidebarBlockEditor from '../sidebar-block-editor';
import FocusControl from '../focus-control';
Expand All @@ -26,6 +27,8 @@ export default function CustomizeWidgets( {
const popoverRef = useRef();
const adminPrimary = useMemo( () => getAdminThemeColors().primary, [] );

// `useClearSelectedBlock` relies on the slot marker to spot overlays.
useEnableWpCompatOverlaySlot();
useClearSelectedBlock( activeSidebarControl, popoverRef );

useEffect( () => {
Expand Down
3 changes: 2 additions & 1 deletion packages/customize-widgets/src/components/customize-widgets/use-clear-selected-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
* the preview iframe.
* This hook will clear the selected block when focusing outside the editor,
* with a few exceptions:
* 1. Focusing on popovers.
* 1. Focusing on popovers, including `@wordpress/ui` overlays.
* 2. Focusing on the inspector.
* 3. Focusing on any modals/dialogs.
* These cases are normally triggered by user interactions from the editor,
Expand Down Expand Up @@ -40,6 +40,7 @@ export default function useClearSelectedBlock( sidebarControl, popoverRef ) {
// 3. It should also not exist in the container, the popover, nor the dialog.
! container.contains( element ) &&
! popoverRef.current.contains( element ) &&
! element.closest( '[data-wp-compat-overlay-slot]' ) &&
! element.closest( '[role="dialog"]' ) &&
// 4. The inspector should not be opened.
! inspector.expanded()
Expand Down
Loading