diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index 2ed9ee0bcb284f..4aaf63ce3a72bf 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -180,8 +180,16 @@ function BlockPopoverInbetween( { const observer = new window.MutationObserver( forcePopoverRecompute ); observer.observe( previousElement, { attributes: true } ); + const zoomedOutObserver = new window.MutationObserver( + forcePopoverRecompute + ); + zoomedOutObserver.observe( previousElement.closest( 'html' ), { + attributes: true, + } ); + return () => { observer.disconnect(); + zoomedOutObserver.disconnect(); }; }, [ previousElement ] ); @@ -192,8 +200,16 @@ function BlockPopoverInbetween( { const observer = new window.MutationObserver( forcePopoverRecompute ); observer.observe( nextElement, { attributes: true } ); + const zoomedOutObserver = new window.MutationObserver( + forcePopoverRecompute + ); + zoomedOutObserver.observe( nextElement.closest( 'html' ), { + attributes: true, + } ); + return () => { observer.disconnect(); + zoomedOutObserver.disconnect(); }; }, [ nextElement ] ); diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 47022e336e4869..517bbd1b5a5408 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -69,8 +69,16 @@ function BlockPopover( ); observer.observe( selectedElement, { attributes: true } ); + const zoomedOutObserver = new window.MutationObserver( + forceRecomputePopoverDimensions + ); + zoomedOutObserver.observe( selectedElement.closest( 'html' ), { + attributes: true, + } ); + return () => { observer.disconnect(); + zoomedOutObserver.disconnect(); }; }, [ selectedElement ] );