Use contextual toolbar in the zoom-out mode (#56808)

WordPress · Dec 6, 2023 · 0bc014c · 0bc014c
1 parent ddb378f
commit 0bc014c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -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 &&