From c9b7d1d7eba826b0426ef01c1258924175dcae8c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 17 Oct 2024 11:11:19 +0100 Subject: [PATCH] Zoom Out: Remove zoom-out toolbar (#66039) Co-authored-by: youknowriad Co-authored-by: ellatrix Co-authored-by: getdave Co-authored-by: draganescu Co-authored-by: annezazu Co-authored-by: jasmussen Co-authored-by: stokesman Co-authored-by: richtabor Co-authored-by: ntsekouras Co-authored-by: jameskoster --- .../src/components/block-popover/index.js | 62 -------- .../src/components/block-toolbar/index.js | 21 ++- .../src/components/block-tools/index.js | 9 -- .../src/components/block-tools/style.scss | 28 ---- .../block-tools/use-show-block-tools.js | 12 -- .../block-tools/zoom-out-mode-inserters.js | 76 ++++----- .../block-tools/zoom-out-popover.js | 47 ------ .../block-tools/zoom-out-toolbar.js | 147 ------------------ .../src/store/private-selectors.js | 3 +- 9 files changed, 46 insertions(+), 359 deletions(-) delete mode 100644 packages/block-editor/src/components/block-tools/zoom-out-popover.js delete mode 100644 packages/block-editor/src/components/block-tools/zoom-out-toolbar.js diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 637ab1cb8a53e0..f01c43ef26a71d 100644 --- 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 index 6c4789cb2924f2..28a2bf37637d12 100644 --- 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 } >
- { ! isMultiToolbar && + { showParentSelector && + ! isMultiToolbar && isLargeViewport && isDefaultEditingMode && } { ( shouldShowVisualToolbar || isMultiToolbar ) && @@ -215,6 +222,14 @@ export function PrivateBlockToolbar( { { ! hasContentOnlyLocking && shouldShowVisualToolbar && isMultiToolbar && } + { showShuffleButton && ( + + + + ) } { shouldShowVisualToolbar && ( <> ) } - { showZoomOutToolbar && ( - - ) } - { /* 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 && ( { const { getSettings, - getBlockInsertionPoint, getBlockOrder, getSelectionStart, getSelectedBlockClientId, - getHoveredBlockClientId, - isBlockInsertionPointVisible, getSectionRootClientId, } = unlock( select( blockEditorStore ) ); @@ -39,14 +33,11 @@ function ZoomOutModeInserters() { 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 ( - - { ! shouldRenderInsertionPoint && ( - { - setInserterIsOpened( { - rootClientId: sectionRootClientId, - insertionIndex: index, - tab: 'patterns', - category: 'all', - } ); - showInsertionPoint( sectionRootClientId, index, { - operation: 'insert', - } ); - } } - /> - ) } - - ); - } ); + return ( + + { + setInserterIsOpened( { + rootClientId: sectionRootClientId, + insertionIndex: index + 1, + tab: 'patterns', + category: 'all', + } ); + showInsertionPoint( sectionRootClientId, index + 1, { + operation: 'insert', + } ); + } } + /> + + ); } export default ZoomOutModeInserters; 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 deleted file mode 100644 index 7a5c2243cf0540..00000000000000 --- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; -/** - * Internal dependencies - */ -import { PrivateBlockPopover as 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 } = - 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, - shift: true, - }; - - return ( - - - - ); -} 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 deleted file mode 100644 index 4c6de7d8e2f87c..00000000000000 --- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js +++ /dev/null @@ -1,147 +0,0 @@ -/** - * 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, __unstableContentRef } ) { - const selected = useSelect( - ( select ) => { - const { - getBlock, - hasBlockMovingClientId, - getNextBlockClientId, - getPreviousBlockClientId, - canRemoveBlock, - canMoveBlock, - getSettings, - } = select( blockEditorStore ); - - const { __experimentalSetIsInserterOpened: setIsInserterOpened } = - getSettings(); - - 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 ), - canMove: canMoveBlock( clientId ), - setIsInserterOpened, - }; - }, - [ clientId ] - ); - - 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 ( - - { showBlockDraggable && ( - - { ( draggableProps ) => ( -