rebase and refactor to trunk

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

@@ -20,6 +20,7 @@ import {
 	useMergeRefs,
 	useRefEffect,
 	useDisabled,
+	usePrevious,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -371,6 +372,29 @@ function Iframe( {
 	// mode. They're only needed to capture focus in edit mode.
 	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
 
+	const previousScale = usePrevious( scale );
+
+	// Scroll based on the new scale
+	useEffect( () => {
+		if ( ! iframeDocument || isZoomedOut ) {
+			return;
+		}
+
+		const maxWidth = 750;
+		const previousScaleNumber =
+			previousScale === 'default'
+				? Math.min( containerWidth, maxWidth ) /
+				  prevContainerWidthRef.current
+				: previousScale;
+
+		const { documentElement } = iframeDocument;
+		const { scrollTop, scrollLeft } = documentElement;
+		const delta = 1 + scale - previousScaleNumber;
+
+		documentElement.scrollTop = delta * scrollTop;
+		documentElement.scrollLeft = delta * scrollLeft;
+	}, [ scale, previousScale, iframeDocument, isZoomedOut, containerWidth ] );
+
 	const iframe = (
 		<>
 			{ shouldRenderFocusCaptureElements && before }