diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 4259ef4b8a208..d12c01506a052 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 080a4c5857806..2646898a066fb 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 7ff23cb49f498..4942e50322e06 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( () => {