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 59e5bdb.

* 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>

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 = {

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

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

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;
+	}
+}

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,
 		};
 	}, [] );
 }

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>
+	);
+}