From e4a9ad1d2e3addc0d6a84803232d814256a3fd9f Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Thu, 4 Jul 2024 18:23:52 +0200
Subject: [PATCH] Add a vertical toolbar for zoom out mode (#60123)

* position toolbar popover to the left and change colors on zoomed-out mode

* Make zoom out toolbar component

* Create zoom out toolbar

* Cleanup linting errors

* Add orientation to toolbar component

* css for vertical toolbars

* Add similar classes to existing toolbar

* Use correct placement for zoom out toolbar popover

* remove cs that shouldn't be needed

* Remove icon and block toolbar vertical css and apply just to base component

* made toolbar unstyled and fixed stray background

* Update Changelog

* removed transparent background from component css

* Update packages/components/src/toolbar/toolbar/types.ts

Co-authored-by: Lena Morita <lena@jaguchi.com>

* document new prop for the toolbar component

* remove white background

* increase margin width

* Also include the non-accessible toolbar in the vertical CSS rules

* Move styles to the zoom out toolbar CSS

* revert

* avoid shifting of the toolbar to the right side

* fix focus outline

* moved vertical styles to toolbar component

* missing display flex

* removed orientation from NavigableToolbar props

* Revert "removed orientation from NavigableToolbar props"

This reverts commit 59e5bdba37d77c6632121ca9c208b79494f13aac.

* Use ToolbarButton instead of Button for Shuffle

* added classes to avoid using component selectors

---------

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: Lena Morita <lena@jaguchi.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
---
 .../src/components/block-toolbar/shuffle.js   |   1 +
 .../block-tools/block-selection-button.js     |  81 +---------
 .../src/components/block-tools/index.js       |   9 ++
 .../src/components/block-tools/style.scss     |  15 ++
 .../block-tools/use-show-block-tools.js       |  20 ++-
 .../block-tools/zoom-out-popover.js           |  49 ++++++
 .../block-tools/zoom-out-toolbar.js           | 140 ++++++++++++++++++
 .../src/components/navigable-toolbar/index.js |   4 +-
 packages/components/CHANGELOG.md              |   4 +
 .../components/src/toolbar/toolbar/README.md  |   9 ++
 .../components/src/toolbar/toolbar/style.scss |   7 +
 .../components/src/toolbar/toolbar/types.ts   |   6 +
 .../src/components/visual-editor/index.js     |   2 +-
 13 files changed, 265 insertions(+), 82 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-tools/zoom-out-popover.js
 create mode 100644 packages/block-editor/src/components/block-tools/zoom-out-toolbar.js

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',
 		  }
 		: {};