From 0bc014c97b1f452dbf0d261bc698a14a167a89c0 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 6 Dec 2023 16:52:14 +1200
Subject: [PATCH] Use contextual toolbar in the zoom-out mode (#56808)

---
 .../block-tools/selected-block-tools.js           | 15 ++++++++-------
 .../utils/use-should-contextual-toolbar-show.js   |  3 ++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/selected-block-tools.js b/packages/block-editor/src/components/block-tools/selected-block-tools.js
index dfbd3e9ba3ca3..ba8d6a3502746 100644
--- a/packages/block-editor/src/components/block-tools/selected-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/selected-block-tools.js
@@ -100,7 +100,7 @@ export default function SelectedBlockTools( {
 				resize={ false }
 				{ ...popoverProps }
 			>
-				{ shouldShowContextualToolbar && (
+				{ shouldShowContextualToolbar ? (
 					<BlockContextualToolbar
 						// If the toolbar is being shown because of being forced
 						// it should focus the toolbar right after the mount.
@@ -112,12 +112,13 @@ export default function SelectedBlockTools( {
 							initialToolbarItemIndexRef.current = index;
 						} }
 					/>
-				) }
-				{ shouldShowBreadcrumb && (
-					<BlockSelectionButton
-						clientId={ clientId }
-						rootClientId={ rootClientId }
-					/>
+				) : (
+					shouldShowBreadcrumb && (
+						<BlockSelectionButton
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+						/>
+					)
 				) }
 			</BlockPopover>
 		);
diff --git a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js b/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js
index 1aae7b99cbf14..5446bfdc63838 100644
--- a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js
+++ b/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js
@@ -38,6 +38,7 @@ export function useShouldContextualToolbarShow() {
 			} = unlock( select( blockEditorStore ) );
 
 			const isEditMode = __unstableGetEditorMode() === 'edit';
+			const isZoomOutMode = __unstableGetEditorMode() === 'zoom-out';
 			const hasFixedToolbar = getSettings().hasFixedToolbar;
 			const isDistractionFree = getSettings().isDistractionFree;
 			const selectedBlockId =
@@ -49,7 +50,7 @@ export function useShouldContextualToolbarShow() {
 			);
 
 			const _shouldShowContextualToolbar =
-				isEditMode &&
+				( isEditMode || isZoomOutMode ) &&
 				! hasFixedToolbar &&
 				( ! isDistractionFree || isNavigationMode() ) &&
 				isLargeViewport &&