diff --git a/packages/block-editor/src/components/block-toolbar/shuffle.js b/packages/block-editor/src/components/block-toolbar/shuffle.js
index e7e40619f6a499..be30d868551d5b 100644
--- a/packages/block-editor/src/components/block-toolbar/shuffle.js
+++ b/packages/block-editor/src/components/block-toolbar/shuffle.js
@@ -85,6 +85,7 @@ export default function Shuffle( { clientId, as = Container } ) {
 		<ComponentToUse
 			label={ __( 'Shuffle' ) }
 			icon={ shuffle }
+			className="block-editor-block-toolbar-shuffle"
 			onClick={ () => {
 				const nextPattern = getNextPattern();
 				nextPattern.blocks[ 0 ].attributes = {
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index 805e41c580f950..036aef4f135d3c 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -6,8 +6,8 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { dragHandle, trash } from '@wordpress/icons';
-import { Button, Flex, FlexItem, ToolbarButton } from '@wordpress/components';
+import { dragHandle } from '@wordpress/icons';
+import { Button, Flex, FlexItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef, useEffect } from '@wordpress/element';
 import {
@@ -38,8 +38,6 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockMover from '../block-mover';
-import Shuffle from '../block-toolbar/shuffle';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -63,7 +61,6 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 				__unstableGetEditorMode,
 				getNextBlockClientId,
 				getPreviousBlockClientId,
-				canRemoveBlock,
 				canMoveBlock,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
@@ -74,26 +71,6 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 			const orientation =
 				getBlockListSettings( rootClientId )?.orientation;
 			const match = getActiveBlockVariation( name, attributes );
-			const isBlockTemplatePart =
-				blockType?.name === 'core/template-part';
-
-			let isNextBlockTemplatePart = false;
-			const nextClientId = getNextBlockClientId();
-			if ( nextClientId ) {
-				const { name: nextName } = getBlock( nextClientId );
-				const nextBlockType = getBlockType( nextName );
-				isNextBlockTemplatePart =
-					nextBlockType?.name === 'core/template-part';
-			}
-
-			let isPrevBlockTemplatePart = false;
-			const prevClientId = getPreviousBlockClientId();
-			if ( prevClientId ) {
-				const { name: prevName } = getBlock( prevClientId );
-				const prevBlockType = getBlockType( prevName );
-				isPrevBlockTemplatePart =
-					prevBlockType?.name === 'core/template-part';
-			}
 
 			return {
 				blockMovingMode: hasBlockMovingClientId(),
@@ -105,26 +82,14 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 					index + 1,
 					orientation
 				),
-				isBlockTemplatePart,
-				isNextBlockTemplatePart,
-				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId ),
-				canMove: canMoveBlock( clientId ),
+				canMove: canMoveBlock( clientId, rootClientId ),
+				getNextBlockClientId,
+				getPreviousBlockClientId,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const {
-		label,
-		icon,
-		blockMovingMode,
-		editorMode,
-		isBlockTemplatePart,
-		isNextBlockTemplatePart,
-		isPrevBlockTemplatePart,
-		canRemove,
-		canMove,
-	} = selected;
+	const { label, icon, blockMovingMode, editorMode, canMove } = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 
 	// Focus the breadcrumb in navigation mode.
@@ -276,9 +241,7 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 	);
 
 	const dragHandleLabel = __( 'Drag' );
-	const showBlockDraggable =
-		( canMove && editorMode === 'navigation' ) ||
-		( editorMode === 'zoom-out' && canMove && ! isBlockTemplatePart );
+	const showBlockDraggable = canMove && editorMode === 'navigation';
 
 	return (
 		<div className={ classNames }>
@@ -307,36 +270,6 @@ function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 						</BlockDraggable>
 					</FlexItem>
 				) }
-				{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
-					<FlexItem>
-						<BlockMover
-							clientIds={ [ clientId ] }
-							hideDragHandle
-							isBlockMoverUpButtonDisabled={
-								isPrevBlockTemplatePart
-							}
-							isBlockMoverDownButtonDisabled={
-								isNextBlockTemplatePart
-							}
-						/>
-					</FlexItem>
-				) }
-				{ canMove && canRemove && editorMode === 'zoom-out' && (
-					<Shuffle clientId={ clientId } as={ Button } />
-				) }
-				{ canRemove &&
-					editorMode === 'zoom-out' &&
-					! isBlockTemplatePart && (
-						<FlexItem>
-							<ToolbarButton
-								icon={ trash }
-								label="Delete"
-								onClick={ () => {
-									removeBlock( clientId );
-								} }
-							/>
-						</FlexItem>
-					) }
 				{ editorMode === 'navigation' && (
 					<FlexItem>
 						<Button
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 5e5f9190a0ebda..c07adb34e584f3 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -20,6 +20,7 @@ import {
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
 import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
+import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
@@ -79,6 +80,7 @@ export default function BlockTools( {
 		showEmptyBlockSideInserter,
 		showBreadcrumb,
 		showBlockToolbarPopover,
+		showZoomOutToolbar,
 	} = useShowBlockTools();
 
 	const {
@@ -229,6 +231,13 @@ export default function BlockTools( {
 					/>
 				) }
 
+				{ showZoomOutToolbar && (
+					<ZoomOutPopover
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+					/>
+				) }
+
 				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
 				{ ! isZoomOutMode && ! hasFixedToolbar && (
 					<Popover.Slot
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 84087b262786c4..20c0ab4104204b 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -270,3 +270,18 @@
 	top: 50%;
 	left: 50%;
 }
+
+.zoom-out-toolbar {
+
+	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
+	.zoom-out-toolbar-button:focus::before,
+	.block-editor-block-toolbar-shuffle:focus::before,
+	.block-selection-button_drag-handle:focus::before {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	.block-editor-block-mover {
+		background: none;
+		border: none;
+	}
+}
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index a6af89388b497f..83757790d11ea2 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -41,18 +41,26 @@ export function useShowBlockTools() {
 		const maybeShowBreadcrumb =
 			hasSelectedBlock &&
 			! hasMultiSelection() &&
-			( editorMode === 'navigation' || editorMode === 'zoom-out' );
+			editorMode === 'navigation';
+
+		const _showBlockToolbarPopover =
+			editorMode !== 'zoom-out' &&
+			! getSettings().hasFixedToolbar &&
+			! _showEmptyBlockSideInserter &&
+			hasSelectedBlock &&
+			! isEmptyDefaultBlock &&
+			! maybeShowBreadcrumb;
 
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
 			showBreadcrumb:
 				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
-			showBlockToolbarPopover:
-				! getSettings().hasFixedToolbar &&
+			showBlockToolbarPopover: _showBlockToolbarPopover,
+			showZoomOutToolbar:
+				editorMode === 'zoom-out' &&
 				! _showEmptyBlockSideInserter &&
-				hasSelectedBlock &&
-				! isEmptyDefaultBlock &&
-				! maybeShowBreadcrumb,
+				! maybeShowBreadcrumb &&
+				! _showBlockToolbarPopover,
 		};
 	}, [] );
 }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
new file mode 100644
index 00000000000000..7b6f29382a6f22
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+import ZoomOutToolbar from './zoom-out-toolbar';
+
+export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	// Override some of the popover props for the zoom-out toolbar.
+	const props = {
+		...popoverProps,
+		placement: 'left-start',
+		flip: false,
+	};
+
+	return (
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
+			className={ clsx( 'zoom-out-toolbar-popover', {
+				'is-insertion-point-visible': isInsertionPointVisible,
+			} ) }
+			resize={ false }
+			{ ...props }
+		>
+			<ZoomOutToolbar
+				clientId={ clientId }
+				rootClientId={ rootClientId }
+			/>
+		</BlockPopover>
+	);
+}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
new file mode 100644
index 00000000000000..7d9ca9d1ecefbd
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { dragHandle, trash } from '@wordpress/icons';
+import { Button, ToolbarButton } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockDraggable from '../block-draggable';
+import BlockMover from '../block-mover';
+import Shuffle from '../block-toolbar/shuffle';
+import NavigableToolbar from '../navigable-toolbar';
+
+export default function ZoomOutToolbar( { clientId, rootClientId } ) {
+	const selected = useSelect(
+		( select ) => {
+			const {
+				getBlock,
+				hasBlockMovingClientId,
+				getNextBlockClientId,
+				getPreviousBlockClientId,
+				canRemoveBlock,
+				canMoveBlock,
+			} = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			const { name } = getBlock( clientId );
+			const blockType = getBlockType( name );
+			const isBlockTemplatePart =
+				blockType?.name === 'core/template-part';
+
+			let isNextBlockTemplatePart = false;
+			const nextClientId = getNextBlockClientId();
+			if ( nextClientId ) {
+				const { name: nextName } = getBlock( nextClientId );
+				const nextBlockType = getBlockType( nextName );
+				isNextBlockTemplatePart =
+					nextBlockType?.name === 'core/template-part';
+			}
+
+			let isPrevBlockTemplatePart = false;
+			const prevClientId = getPreviousBlockClientId();
+			if ( prevClientId ) {
+				const { name: prevName } = getBlock( prevClientId );
+				const prevBlockType = getBlockType( prevName );
+				isPrevBlockTemplatePart =
+					prevBlockType?.name === 'core/template-part';
+			}
+
+			return {
+				blockMovingMode: hasBlockMovingClientId(),
+				isBlockTemplatePart,
+				isNextBlockTemplatePart,
+				isPrevBlockTemplatePart,
+				canRemove: canRemoveBlock( clientId, rootClientId ),
+				canMove: canMoveBlock( clientId, rootClientId ),
+			};
+		},
+		[ clientId, rootClientId ]
+	);
+
+	const {
+		blockMovingMode,
+		isBlockTemplatePart,
+		isNextBlockTemplatePart,
+		isPrevBlockTemplatePart,
+		canRemove,
+		canMove,
+	} = selected;
+
+	const { removeBlock } = useDispatch( blockEditorStore );
+
+	const classNames = clsx( 'zoom-out-toolbar', {
+		'is-block-moving-mode': !! blockMovingMode,
+	} );
+
+	const showBlockDraggable = canMove && ! isBlockTemplatePart;
+
+	return (
+		<NavigableToolbar
+			className={ classNames }
+			/* translators: accessibility text for the block toolbar */
+			aria-label={ __( 'Block tools' ) }
+			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
+			variant="unstyled"
+			orientation="vertical"
+		>
+			{ showBlockDraggable && (
+				<BlockDraggable clientIds={ [ clientId ] }>
+					{ ( draggableProps ) => (
+						<Button
+							icon={ dragHandle }
+							className="block-selection-button_drag-handle zoom-out-toolbar-button"
+							aria-hidden="true"
+							label={ __( 'Drag' ) }
+							iconSize={ 24 }
+							size="compact"
+							// Should not be able to tab to drag handle as this
+							// button can only be used with a pointer device.
+							tabIndex="-1"
+							{ ...draggableProps }
+						/>
+					) }
+				</BlockDraggable>
+			) }
+			{ ! isBlockTemplatePart && (
+				<BlockMover
+					clientIds={ [ clientId ] }
+					hideDragHandle
+					isBlockMoverUpButtonDisabled={ isPrevBlockTemplatePart }
+					isBlockMoverDownButtonDisabled={ isNextBlockTemplatePart }
+					iconSize={ 24 }
+					size="compact"
+				/>
+			) }
+			{ canMove && canRemove && (
+				<Shuffle clientId={ clientId } as={ ToolbarButton } />
+			) }
+			{ canRemove && ! isBlockTemplatePart && (
+				<ToolbarButton
+					className="zoom-out-toolbar-button"
+					icon={ trash }
+					label="Delete"
+					onClick={ () => {
+						removeBlock( clientId );
+					} }
+				/>
+			) }
+		</NavigableToolbar>
+	);
+}
diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js
index 378d72919cccfe..f524887fdc0ed4 100644
--- a/packages/block-editor/src/components/navigable-toolbar/index.js
+++ b/packages/block-editor/src/components/navigable-toolbar/index.js
@@ -210,6 +210,7 @@ export default function NavigableToolbar( {
 	shouldUseKeyboardFocusShortcut = true,
 	__experimentalInitialIndex: initialIndex,
 	__experimentalOnIndexChange: onIndexChange,
+	orientation = 'horizontal',
 	...props
 } ) {
 	const toolbarRef = useRef();
@@ -230,6 +231,7 @@ export default function NavigableToolbar( {
 			<Toolbar
 				label={ props[ 'aria-label' ] }
 				ref={ toolbarRef }
+				orientation={ orientation }
 				{ ...props }
 			>
 				{ children }
@@ -239,7 +241,7 @@ export default function NavigableToolbar( {
 
 	return (
 		<NavigableMenu
-			orientation="horizontal"
+			orientation={ orientation }
 			role="toolbar"
 			ref={ toolbarRef }
 			{ ...props }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a8272a3a89d241..b43368905e8ab3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `Toolbar`: Add support for `vertical` orientation ([#60123](https://github.com/WordPress/gutenberg/pull/60123)).
+
 ### Bug Fixes
 
 -   `UnitControl`: Fix colors when disabled. ([#62970](https://github.com/WordPress/gutenberg/pull/62970))
diff --git a/packages/components/src/toolbar/toolbar/README.md b/packages/components/src/toolbar/toolbar/README.md
index 4ba7ac7d7db16c..de8f7a89d01ea3 100644
--- a/packages/components/src/toolbar/toolbar/README.md
+++ b/packages/components/src/toolbar/toolbar/README.md
@@ -74,6 +74,15 @@ Leave undefined for the default style. Or `'unstyled'` which removes the border
 -   Required: No
 -   Default: `undefined`
 
+#### `orientation`: `'horizontal' | 'vertical'`
+
+Specifies the toolbar's orientation.
+
+Leave undefined or 'horizontal' for horizontal orientation keyboard interactions, choose 'vertical' for the alternative.
+
+-   Required: No
+-   Default: `horizontal`
+
 ## Related components
 
 -   Toolbar may contain [ToolbarGroup](/packages/components/src/toolbar-group/README.md), [ToolbarButton](/packages/components/src/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar-Item/README.md) as children.
diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
index 6edfe172629a90..eccfc3bf705cbd 100644
--- a/packages/components/src/toolbar/toolbar/style.scss
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -20,6 +20,13 @@
 
 .components-accessible-toolbar,
 .components-toolbar {
+
+	&[aria-orientation="vertical"] {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
 	.components-button {
 		position: relative;
 		height: $block-toolbar-height;
diff --git a/packages/components/src/toolbar/toolbar/types.ts b/packages/components/src/toolbar/toolbar/types.ts
index 681f1ab2d1af2d..bf9ecc56292931 100644
--- a/packages/components/src/toolbar/toolbar/types.ts
+++ b/packages/components/src/toolbar/toolbar/types.ts
@@ -22,4 +22,10 @@ export type ToolbarProps = {
 	 * @default undefined
 	 */
 	variant?: 'unstyled' | undefined;
+	/**
+	 * Orientation of the toolbar keyboard interactions.
+	 *
+	 * @default 'horizontal'
+	 */
+	orientation?: 'horizontal' | 'vertical';
 };
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 7d8f38ae7a0eb5..5bf23958f1e7b9 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -341,7 +341,7 @@ function VisualEditor( {
 	const zoomOutProps = isZoomOutMode
 		? {
 				scale: 'default',
-				frameSize: '20px',
+				frameSize: '48px',
 		  }
 		: {};