Factor scrollbar gutter into styling

WordPress · Oct 2, 2024 · 2b67bda · 2b67bda
1 parent 3cd5c19
commit 2b67bda
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -33,6 +33,7 @@
 	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
 	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
+	$scrollbar-gutter: var(--wp-block-editor-iframe-zoom-out-scrollbar-gutter);
 
 	transform: scale(#{$scale});
 
@@ -48,7 +49,7 @@
 	$total-frame-height: calc(2 * #{$frame-size});
 	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
 	margin-bottom: calc(-1 * #{$total-height});
-	margin-inline: calc(-1 * #{$frame-size} / #{$scale});
+	margin-inline: calc(-1 * #{$frame-size} / #{$scale}) calc(-1 * #{$frame-size} / #{$scale} - #{$scrollbar-gutter});
 
 	body {
 		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -240,6 +240,16 @@ function Iframe( {
 	}, [] );
 
 	const isZoomedOut = scale !== 1;
+	const scrollbarGutter = useMemo( () => {
+		// contentHeight changes have to invalidate the memo since scrollbar
+		// presence is dependent on overflow. Referencing it here silences the
+		// exhaustive deps lint warning about it being unnecessary.
+		void contentHeight;
+		const initialWidth = prevContainerWidthRef.current;
+		return !! iframeDocument
+			? initialWidth - iframeDocument.documentElement.clientWidth
+			: 0;
+	}, [ iframeDocument, contentHeight ] );
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
@@ -343,6 +353,10 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-prev-container-width',
 			`${ prevContainerWidthRef.current }px`
 		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scrollbar-gutter',
+			`${ scrollbarGutter }px`
+		);
 
 		return () => {
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
@@ -365,6 +379,9 @@ function Iframe( {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-prev-container-width'
 			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scrollbar-gutter'
+			);
 		};
 	}, [
 		scale,