From c7722262e65a3f4d0f1a2d1ad29eccb2069509e4 Mon Sep 17 00:00:00 2001
From: Yogesh Bhutkar <yogesh.bhutkar@rtcamp.com>
Date: Tue, 19 Nov 2024 15:33:23 +0530
Subject: [PATCH] Zoom Out: Disable zooming out when Distraction Free mode is
 activated (#67028)

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
---
 .../editor/src/components/header/style.scss   |  3 +-
 .../src/components/zoom-out-toggle/index.js   | 39 ++++++++++++-------
 packages/editor/src/store/actions.js          |  3 ++
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index 4259ef4b8a2084..d12c01506a052c 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -256,7 +256,8 @@
 
 		& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,
 		& > .editor-header__settings > .editor-preview-dropdown,
-		& > .editor-header__settings > .interface-pinned-items {
+		& > .editor-header__settings > .interface-pinned-items,
+		& > .editor-header__settings > .editor-zoom-out-toggle {
 			display: none;
 		}
 
diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
index 080a4c58578069..2646898a066fb9 100644
--- a/packages/editor/src/components/zoom-out-toggle/index.js
+++ b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -20,13 +20,19 @@ import { isAppleOS } from '@wordpress/keycodes';
 import { unlock } from '../../lock-unlock';
 
 const ZoomOutToggle = ( { disabled } ) => {
-	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
-		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
-		showIconLabels: select( preferencesStore ).get(
-			'core',
-			'showIconLabels'
-		),
-	} ) );
+	const { isZoomOut, showIconLabels, isDistractionFree } = useSelect(
+		( select ) => ( {
+			isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+			showIconLabels: select( preferencesStore ).get(
+				'core',
+				'showIconLabels'
+			),
+			isDistractionFree: select( preferencesStore ).get(
+				'core',
+				'distractionFree'
+			),
+		} )
+	);
 
 	const { resetZoomLevel, setZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
@@ -52,13 +58,19 @@ const ZoomOutToggle = ( { disabled } ) => {
 		};
 	}, [ registerShortcut, unregisterShortcut ] );
 
-	useShortcut( 'core/editor/zoom', () => {
-		if ( isZoomOut ) {
-			resetZoomLevel();
-		} else {
-			setZoomLevel( 'auto-scaled' );
+	useShortcut(
+		'core/editor/zoom',
+		() => {
+			if ( isZoomOut ) {
+				resetZoomLevel();
+			} else {
+				setZoomLevel( 'auto-scaled' );
+			}
+		},
+		{
+			isDisabled: isDistractionFree,
 		}
-	} );
+	);
 
 	const handleZoomOut = () => {
 		if ( isZoomOut ) {
@@ -78,6 +90,7 @@ const ZoomOutToggle = ( { disabled } ) => {
 			isPressed={ isZoomOut }
 			size="compact"
 			showTooltip={ ! showIconLabels }
+			className="editor-zoom-out-toggle"
 		/>
 	);
 };
diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
index 7ff23cb49f4983..4942e50322e06e 100644
--- a/packages/editor/src/store/actions.js
+++ b/packages/editor/src/store/actions.js
@@ -834,6 +834,9 @@ export const toggleDistractionFree =
 					.set( 'core', 'fixedToolbar', true );
 				dispatch.setIsInserterOpened( false );
 				dispatch.setIsListViewOpened( false );
+				unlock(
+					registry.dispatch( blockEditorStore )
+				).resetZoomLevel();
 			} );
 		}
 		registry.batch( () => {