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>

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;
 		}
 

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"
 		/>
 	);
 };

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( () => {