Zoom Out: Disable zoom out toggle button when Style Book is open (#66228

) Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: madhusudhand <madhudollu@git.wordpress.org> Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
WordPress · Oct 18, 2024 · 388dd81 · 388dd81
1 parent d330f30
commit 388dd81
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
@@ -149,7 +149,7 @@ function Header( {
 				) }
 
 				{ canBeZoomedOut && isEditorIframed && isWideViewport && (
-					<ZoomOutToggle />
+					<ZoomOutToggle disabled={ forceDisableBlockTools } />
 				) }
 
 				<PreviewDropdown

diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -14,7 +14,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 import { unlock } from '../../lock-unlock';
 
-const ZoomOutToggle = () => {
+const ZoomOutToggle = ( { disabled } ) => {
 	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
 		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
 		showIconLabels: select( preferencesStore ).get(
@@ -37,6 +37,8 @@ const ZoomOutToggle = () => {
 
 	return (
 		<Button
+			accessibleWhenDisabled
+			disabled={ disabled }
 			onClick={ handleZoomOut }
 			icon={ zoomOutIcon }
 			label={ __( 'Zoom Out' ) }