From 04d8cd7028fa943002bf084b9dd960aee9c893ba 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-toolbar/index.js | 18 ++- .../src/components/block-tools/index.js | 9 -- .../src/components/block-tools/style.scss | 28 ---- .../block-tools/use-show-block-tools.js | 9 -- .../block-tools/zoom-out-mode-inserters.js | 76 ++++----- .../block-tools/zoom-out-popover.js | 46 ------ .../block-tools/zoom-out-toolbar.js | 147 ------------------ .../src/store/private-selectors.js | 3 +- 8 files changed, 44 insertions(+), 292 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-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 6c4789cb2924f2..0a6a9fca62970d 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,7 @@ 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'; /** * Renders the block toolbar. @@ -67,6 +68,7 @@ export function PrivateBlockToolbar( { isUsingBindings, hasParentPattern, hasContentOnlyLocking, + showShuffleButton, } = useSelect( ( select ) => { const { getBlockName, @@ -78,6 +80,7 @@ export function PrivateBlockToolbar( { getBlockAttributes, getBlockParentsByBlockName, getTemplateLock, + isZoomOutMode, } = select( blockEditorStore ); const selectedBlockClientIds = getSelectedBlockClientIds(); const selectedBlockClientId = selectedBlockClientIds[ 0 ]; @@ -118,6 +121,7 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar: isValid && isVisual, toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`, showParentSelector: + ! isZoomOutMode() && parentBlockType && getBlockEditingMode( firstParentClientId ) === 'default' && hasBlockSupport( @@ -130,6 +134,7 @@ export function PrivateBlockToolbar( { isUsingBindings: _isUsingBindings, hasParentPattern: _hasParentPattern, hasContentOnlyLocking: _hasTemplateLock, + showShuffleButton: isZoomOutMode(), }; }, [] ); @@ -179,7 +184,8 @@ export function PrivateBlockToolbar( { key={ toolbarKey } >
- { ! isMultiToolbar && + { showParentSelector && + ! isMultiToolbar && isLargeViewport && isDefaultEditingMode && } { ( shouldShowVisualToolbar || isMultiToolbar ) && @@ -215,6 +221,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 a1f2990a5cc1ef..00000000000000 --- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * 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 } = - 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 ) => ( -