fix(block-popover): defer popover recompute to next animation frame to prevent toolbar position shift

Author: shrivastavanolo

packages/block-editor/src/components/block-popover/index.js

@@ -10,6 +10,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import {
 	forwardRef,
+	useCallback,
 	useMemo,
 	useReducer,
 	useLayoutEffect,
@@ -52,6 +53,10 @@ function BlockPopover(
 		0
 	);
 
+	const debouncedRecompute = useCallback( () => {
+		window.requestAnimationFrame( () => forceRecomputePopoverDimensions() );
+	}, [ forceRecomputePopoverDimensions ] );
+
 	// When blocks are moved up/down, they are animated to their new position by
 	// updating the `transform` property manually (i.e. without using CSS
 	// transitions or animations). The animation, which can also scroll the block
@@ -64,15 +69,13 @@ function BlockPopover(
 			return;
 		}
 
-		const observer = new window.MutationObserver(
-			forceRecomputePopoverDimensions
-		);
+		const observer = new window.MutationObserver( debouncedRecompute );
 		observer.observe( selectedElement, { attributes: true } );
 
 		return () => {
 			observer.disconnect();
 		};
-	}, [ selectedElement ] );
+	}, [ selectedElement, debouncedRecompute ] );
 
 	const popoverAnchor = useMemo( () => {
 		if (