From a16640b2d09ccf4064487b4c49fbafc093744456 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 18 Oct 2024 19:19:05 +0100 Subject: [PATCH] Zoom Out: Remove zoom-out toolbar (#66039) (#66200) Co-authored-by: youknowriad Co-authored-by: getdave Co-authored-by: draganescu Co-authored-by: ajlende Co-authored-by: talldan --- .../block-list/zoom-out-separator.js | 2 +- .../src/components/block-popover/index.js | 62 -------- .../src/components/block-toolbar/index.js | 61 +++++--- .../src/components/block-toolbar/style.scss | 11 +- .../block-toolbar/use-has-block-toolbar.js | 47 +++--- .../src/components/block-tools/index.js | 9 -- .../src/components/block-tools/style.scss | 28 +--- .../block-tools/use-show-block-tools.js | 14 -- .../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 +- 12 files changed, 97 insertions(+), 410 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-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index 9fa1c88ceafe48..ae616f3ec39a6c 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -88,7 +88,7 @@ export function ZoomOutSeparator( { initial={ { height: 0 } } animate={ { // Use a height equal to that of the zoom out frame size. - height: 'calc(1 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)', + height: 'calc(1.5 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)', } } exit={ { height: 0 } } transition={ { 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..a8f75bd1dc8759 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. @@ -58,7 +60,6 @@ export function PrivateBlockToolbar( { const { blockClientId, blockClientIds, - isContentOnlyEditingMode, isDefaultEditingMode, blockType, toolbarKey, @@ -67,6 +68,10 @@ export function PrivateBlockToolbar( { isUsingBindings, hasParentPattern, hasContentOnlyLocking, + showShuffleButton, + showSlots, + showGroupButtons, + showLockButtons, } = useSelect( ( select ) => { const { getBlockName, @@ -78,7 +83,8 @@ export function PrivateBlockToolbar( { getBlockAttributes, getBlockParentsByBlockName, getTemplateLock, - } = select( blockEditorStore ); + isZoomOutMode, + } = unlock( select( blockEditorStore ) ); const selectedBlockClientIds = getSelectedBlockClientIds(); const selectedBlockClientId = selectedBlockClientIds[ 0 ]; const parents = getBlockParents( selectedBlockClientId ); @@ -112,12 +118,12 @@ export function PrivateBlockToolbar( { return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, - isContentOnlyEditingMode: editingMode === 'contentOnly', isDefaultEditingMode: _isDefaultEditingMode, blockType: selectedBlockClientId && getBlockType( _blockName ), shouldShowVisualToolbar: isValid && isVisual, toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`, showParentSelector: + ! isZoomOutMode() && parentBlockType && getBlockEditingMode( firstParentClientId ) === 'default' && hasBlockSupport( @@ -130,6 +136,10 @@ export function PrivateBlockToolbar( { isUsingBindings: _isUsingBindings, hasParentPattern: _hasParentPattern, hasContentOnlyLocking: _hasTemplateLock, + showShuffleButton: isZoomOutMode(), + showSlots: ! isZoomOutMode(), + showGroupButtons: ! isZoomOutMode(), + showLockButtons: ! isZoomOutMode(), }; }, [] ); @@ -179,13 +189,11 @@ export function PrivateBlockToolbar( { key={ toolbarKey } >
- { ! isMultiToolbar && - isLargeViewport && - isDefaultEditingMode && } + { showParentSelector && ! isMultiToolbar && isLargeViewport && ( + + ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && - ( isDefaultEditingMode || - ( isContentOnlyEditingMode && ! hasParentPattern ) || - isSynced ) && ( + ! hasParentPattern && (
- { isDefaultEditingMode && ( - <> - { ! isMultiToolbar && ( - - ) } - - + { ! isMultiToolbar && showLockButtons && ( + ) } +
) } { ! hasContentOnlyLocking && shouldShowVisualToolbar && - isMultiToolbar && } - { shouldShowVisualToolbar && ( + isMultiToolbar && + showGroupButtons && } + { showShuffleButton && ( + + + + ) } + { shouldShowVisualToolbar && showSlots && ( <> :last-child, > :last-child .components-toolbar-group, - > :last-child .components-toolbar { + > :last-child .components-toolbar, + // If the last toolbar group is empty, + // we need to remove the double border from the penultimate one. + &:has(> :last-child:empty) > :nth-last-child(2), + &:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, + &:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar { border-right: none; } + + .components-toolbar-group:empty { + display: none; + } } .block-editor-block-contextual-toolbar { diff --git a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js index c4e228f8a3c07b..e6bf1ace3ffb7b 100644 --- a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js +++ b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js @@ -15,40 +15,31 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls * @return {boolean} Whether the block toolbar component will be rendered. */ export function useHasBlockToolbar() { - const { isToolbarEnabled, isDefaultEditingMode } = useSelect( - ( select ) => { - const { - getBlockEditingMode, - getBlockName, - getBlockSelectionStart, - } = select( blockEditorStore ); + const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => { + const { getBlockEditingMode, getBlockName, getBlockSelectionStart } = + select( blockEditorStore ); - // we only care about the 1st selected block - // for the toolbar, so we use getBlockSelectionStart - // instead of getSelectedBlockClientIds - const selectedBlockClientId = getBlockSelectionStart(); + // we only care about the 1st selected block + // for the toolbar, so we use getBlockSelectionStart + // instead of getSelectedBlockClientIds + const selectedBlockClientId = getBlockSelectionStart(); - const blockType = - selectedBlockClientId && - getBlockType( getBlockName( selectedBlockClientId ) ); + const blockType = + selectedBlockClientId && + getBlockType( getBlockName( selectedBlockClientId ) ); - return { - isToolbarEnabled: - blockType && - hasBlockSupport( blockType, '__experimentalToolbar', true ), - isDefaultEditingMode: - getBlockEditingMode( selectedBlockClientId ) === 'default', - }; - }, - [] - ); + return { + isToolbarEnabled: + blockType && + hasBlockSupport( blockType, '__experimentalToolbar', true ), + isBlockDisabled: + getBlockEditingMode( selectedBlockClientId ) === 'disabled', + }; + }, [] ); const hasAnyBlockControls = useHasAnyBlockControls(); - if ( - ! isToolbarEnabled || - ( ! isDefaultEditingMode && ! hasAnyBlockControls ) - ) { + if ( ! isToolbarEnabled || ( isBlockDisabled && ! hasAnyBlockControls ) ) { return false; } diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index 24f60dbbf970aa..2d02f1ed0c0378 100644 --- 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 && ( - - ) } - { /* 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 ) => ( -