Zoom Out: Remove zoom-out toolbar (#66039)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Oct 18, 2024 · c9b7d1d · c9b7d1d
1 parent 55f9895
commit c9b7d1d
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 359 deletions.
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import {
 	forwardRef,
 	useMemo,
@@ -22,8 +21,6 @@ import {
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 import { rectUnion, getVisibleElementBounds } from '../../utils/dom';
-import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -77,38 +74,12 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const { isZoomOut, parentSectionBlock, isSectionSelected } = useSelect(
-		( select ) => {
-			const {
-				isZoomOut: isZoomOutSelector,
-				getSectionRootClientId,
-				getParentSectionBlock,
-				getBlockOrder,
-			} = unlock( select( blockEditorStore ) );
-
-			return {
-				isZoomOut: isZoomOutSelector(),
-				parentSectionBlock:
-					getParentSectionBlock( clientId ) ?? clientId,
-				isSectionSelected: getBlockOrder(
-					getSectionRootClientId()
-				).includes( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
-	// This element is used to position the zoom out view vertical toolbar
-	// correctly, relative to the selected section.
-	const parentSectionElement = useBlockElement( parentSectionBlock );
-
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
 			popoverDimensionsRecomputeCounter < 0 ||
-			( isZoomOut && ! parentSectionElement ) ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -117,35 +88,6 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
-				// The zoom out view has a vertical block toolbar that should always
-				// be on the edge of the canvas, aligned to the top of the currently
-				// selected section. This condition changes the anchor of the toolbar
-				// to the section instead of the block to handle blocks that are
-				// not full width and nested blocks to keep section height.
-				if ( isZoomOut && isSectionSelected ) {
-					// Compute the height based on the parent section of the
-					// selected block, because the selected block may be
-					// shorter than the section.
-					const canvasElementRect = getVisibleElementBounds(
-						__unstableContentRef.current
-					);
-					const parentSectionElementRect =
-						getVisibleElementBounds( parentSectionElement );
-					const anchorHeight =
-						parentSectionElementRect.bottom -
-						parentSectionElementRect.top;
-
-					// Always use the width of the section root element to make sure
-					// the toolbar is always on the edge of the canvas.
-					const anchorWidth = canvasElementRect.width;
-					return new window.DOMRectReadOnly(
-						canvasElementRect.left,
-						parentSectionElementRect.top,
-						anchorWidth,
-						anchorHeight
-					);
-				}
-
 				return lastSelectedElement
 					? rectUnion(
 							getVisibleElementBounds( selectedElement ),
@@ -157,13 +99,9 @@ function BlockPopover(
 		};
 	}, [
 		popoverDimensionsRecomputeCounter,
-		isZoomOut,
-		parentSectionElement,
 		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		isSectionSelected,
-		__unstableContentRef,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -16,7 +16,7 @@ import {
 	isReusableBlock,
 	isTemplatePart,
 } from '@wordpress/blocks';
-import { ToolbarGroup } from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -35,6 +35,8 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import Shuffle from './shuffle';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Renders the block toolbar.
@@ -67,6 +69,7 @@ export function PrivateBlockToolbar( {
 		isUsingBindings,
 		hasParentPattern,
 		hasContentOnlyLocking,
+		showShuffleButton,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -78,7 +81,8 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
-		} = select( blockEditorStore );
+			isZoomOutMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const parents = getBlockParents( selectedBlockClientId );
@@ -118,6 +122,7 @@ export function PrivateBlockToolbar( {
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
 			showParentSelector:
+				! isZoomOutMode() &&
 				parentBlockType &&
 				getBlockEditingMode( firstParentClientId ) === 'default' &&
 				hasBlockSupport(
@@ -130,6 +135,7 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
+			showShuffleButton: isZoomOutMode(),
 		};
 	}, [] );
 
@@ -179,7 +185,8 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar &&
+				{ showParentSelector &&
+					! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
@@ -215,6 +222,14 @@ export function PrivateBlockToolbar( {
 				{ ! hasContentOnlyLocking &&
 					shouldShowVisualToolbar &&
 					isMultiToolbar && <BlockGroupToolbar /> }
+				{ showShuffleButton && (
+					<ToolbarGroup>
+						<Shuffle
+							clientId={ blockClientIds[ 0 ] }
+							as={ ToolbarButton }
+						/>
+					</ToolbarGroup>
+				) }
 				{ shouldShowVisualToolbar && (
 					<>
 						<BlockControls.Slot

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -20,7 +20,6 @@ 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';
@@ -80,7 +79,6 @@ export default function BlockTools( {
 		showEmptyBlockSideInserter,
 		showBreadcrumb,
 		showBlockToolbarPopover,
-		showZoomOutToolbar,
 	} = useShowBlockTools();
 
 	const {
@@ -231,13 +229,6 @@ 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
@@ -269,31 +269,3 @@
 	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;
-	}
-
-	// Make the spacing consistent between controls.
-	.zoom-out-toolbar-button {
-		height: $button-size-next-default-40px;
-	}
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
-
-	&.is-visible {
-		visibility: visible;
-	}
-}
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
@@ -49,18 +49,7 @@ export function useShowBlockTools() {
 			hasSelectedBlock &&
 			! hasMultiSelection() &&
 			editorMode === 'navigation';
-
-		const isZoomOut = editorMode === 'zoom-out';
-		const isSectionSelected = getBlockOrder(
-			getSectionRootClientId()
-		).includes( clientId );
-		const _showZoomOutToolbar =
-			clientId &&
-			isZoomOut &&
-			! _showEmptyBlockSideInserter &&
-			isSectionSelected;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
@@ -72,7 +61,6 @@ export function useShowBlockTools() {
 			showBreadcrumb:
 				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -16,37 +16,28 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		blockInsertionPoint,
 		blockOrder,
-		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
-			getBlockInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
-			isBlockInsertionPointVisible,
 			getSectionRootClientId,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
-			blockInsertionPoint: getBlockInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
@@ -62,51 +53,36 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
-	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && blockInsertionPoint.index === index;
+	const previousClientId = selectedBlockClientId;
+	const index = blockOrder.findIndex(
+		( clientId ) => selectedBlockClientId === clientId
+	);
+	const nextClientId = blockOrder[ index + 1 ];
 
-		const previousClientId = clientId;
-		const nextClientId = blockOrder[ index ];
-
-		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
-
-		return (
-			<BlockPopoverInbetween
-				key={ index }
-				previousClientId={ previousClientId }
-				nextClientId={ nextClientId }
-			>
-				{ ! shouldRenderInsertionPoint && (
-					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
-						onClick={ () => {
-							setInserterIsOpened( {
-								rootClientId: sectionRootClientId,
-								insertionIndex: index,
-								tab: 'patterns',
-								category: 'all',
-							} );
-							showInsertionPoint( sectionRootClientId, index, {
-								operation: 'insert',
-							} );
-						} }
-					/>
-				) }
-			</BlockPopoverInbetween>
-		);
-	} );
+	return (
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+		>
+			<ZoomOutModeInserterButton
+				onClick={ () => {
+					setInserterIsOpened( {
+						rootClientId: sectionRootClientId,
+						insertionIndex: index + 1,
+						tab: 'patterns',
+						category: 'all',
+					} );
+					showInsertionPoint( sectionRootClientId, index + 1, {
+						operation: 'insert',
+					} );
+				} }
+			/>
+		</BlockPopoverInbetween>
+	);
 }
 
 export default ZoomOutModeInserters;