diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 5382949684abd..229b625dc3c94 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -75,6 +75,28 @@ function BlockPopover( }; }, [ selectedElement ] ); + // When cover target is enabled, the popover dimensions need to be recomputed + // when the window is resized. This is to ensure that the calculated dimensions + // of the popover are correct when the block editor is resized. + useLayoutEffect( () => { + if ( ! __unstableCoverTarget || ! selectedElement ) { + return; + } + + const defaultView = selectedElement?.ownerDocument.defaultView; + defaultView.addEventListener( + 'resize', + forceRecomputePopoverDimensions + ); + + return () => { + defaultView.removeEventListener( + 'resize', + forceRecomputePopoverDimensions + ); + }; + }, [ __unstableCoverTarget, selectedElement ] ); + const style = useMemo( () => { if ( // popoverDimensionsRecomputeCounter is by definition always equal or greater