Zoom Out: Disable zooming out when Distraction Free mode is activated

packages/editor/src/components/header/index.js

@@ -64,6 +64,7 @@ function Header( {
 		showIconLabels,
 		hasFixedToolbar,
 		hasBlockSelection,
+		isDistractionFree,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -80,6 +81,7 @@ function Header( {
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
+			isDistractionFree: getPreference( 'core', 'distractionFree' ),
 		};
 	}, [] );
 
@@ -167,7 +169,7 @@ function Header( {
 					forceIsAutosaveable={ forceIsDirty }
 				/>
 
-				{ canBeZoomedOut && isWideViewport && (
+				{ canBeZoomedOut && isWideViewport && ! isDistractionFree && (
 					<ZoomOutToggle disabled={ forceDisableBlockTools } />
 				) }
 

packages/editor/src/components/more-menu/index.js

@@ -16,6 +16,7 @@ import {
 	store as preferencesStore,
 } from '@wordpress/preferences';
 import { store as interfaceStore, ActionItem } from '@wordpress/interface';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -25,21 +26,32 @@ import ModeSwitcher from '../mode-switcher';
 import ToolsMoreMenuGroup from './tools-more-menu-group';
 import ViewMoreMenuGroup from './view-more-menu-group';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function MoreMenu() {
 	const { openModal } = useDispatch( interfaceStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const { toggleDistractionFree } = useDispatch( editorStore );
-	const showIconLabels = useSelect(
-		( select ) =>
-			select( preferencesStore ).get( 'core', 'showIconLabels' ),
-		[]
-	);
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const { isZoomOut, showIconLabels } = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+
+		return {
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+		};
+	}, [] );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
 	};
 
+	const handleZoomOut = () => {
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		}
+	};
+
 	return (
 		<>
 			<DropdownMenu
@@ -80,11 +92,12 @@ export default function MoreMenu() {
 								label={ __( 'Distraction free' ) }
 								info={ __( 'Write with calmness' ) }
 								handleToggling={ false }
-								onToggle={ () =>
+								onToggle={ () => {
 									toggleDistractionFree( {
 										createNotice: false,
-									} )
-								}
+									} );
+									handleZoomOut();
+								} }
 								messageActivated={ __(
 									'Distraction free mode activated.'
 								) }