From 388dd815225f6b880b180c75686ce4ec08bb4139 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 18 Oct 2024 19:10:53 +1100
Subject: [PATCH] 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>
---
 packages/editor/src/components/header/index.js          | 2 +-
 packages/editor/src/components/zoom-out-toggle/index.js | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 631643f26d4d5f..d3c82a65a5bc6f 100644
--- 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
index 2cfb2e2da3bc44..e07cb6ac92c833 100644
--- 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' ) }