adds new mutation observers on the html element that is scaled by the…

… iframe, which is the element that will have its attributes change if the workspave is shrunk
WordPress · Oct 9, 2024 · 68650fb · 68650fb
1 parent 6be7f8f
commit 68650fb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git 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
@@ -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 ] );