Add a vertical toolbar for zoom out mode

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