diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 637ab1cb8a53e..f01c43ef26a71 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 2ac2cbb12ff35..d6a0985fef361 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'; import { unlock } from '../../lock-unlock'; /** @@ -67,6 +68,7 @@ export function PrivateBlockToolbar( { isUsingBindings, hasParentPattern, hasContentOnlyLocking, + showShuffleButton, } = useSelect( ( select ) => { const { getBlockName, @@ -79,6 +81,7 @@ export function PrivateBlockToolbar( { getBlockParentsByBlockName, getTemplateLock, getParentSectionBlock, + isZoomOutMode, } = unlock( select( blockEditorStore ) ); const selectedBlockClientIds = getSelectedBlockClientIds(); const selectedBlockClientId = selectedBlockClientIds[ 0 ]; @@ -119,6 +122,7 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar: isValid && isVisual, toolbarKey: `${ selectedBlockClientId }${ parentClientId }`, showParentSelector: + ! isZoomOutMode() && parentBlockType && getBlockEditingMode( parentClientId ) !== 'disabled' && hasBlockSupport( @@ -130,6 +134,7 @@ export function PrivateBlockToolbar( { isUsingBindings: _isUsingBindings, hasParentPattern: _hasParentPattern, hasContentOnlyLocking: _hasTemplateLock, + showShuffleButton: isZoomOutMode(), }; }, [] ); @@ -179,7 +184,7 @@ export function PrivateBlockToolbar( { key={ toolbarKey } >
- { ! isMultiToolbar && isLargeViewport && ( + { showParentSelector && ! isMultiToolbar && isLargeViewport && ( ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && @@ -205,6 +210,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, - getInsertionPoint, getBlockOrder, getSelectionStart, getSelectedBlockClientId, getSectionRootClientId, - isBlockInsertionPointVisible, } = unlock( select( blockEditorStore ) ); const root = getSectionRootClientId(); return { hasSelection: !! getSelectionStart().clientId, - insertionPoint: getInsertionPoint(), blockOrder: getBlockOrder( root ), - blockInsertionPointVisible: isBlockInsertionPointVisible(), sectionRootClientId: root, setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened, @@ -64,41 +58,32 @@ function ZoomOutModeInserters() { return null; } - return [ undefined, ...blockOrder ].map( ( clientId, index ) => { - const shouldRenderInsertionPoint = - blockInsertionPointVisible && insertionPoint?.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 = - selectedBlockClientId === previousClientId || - selectedBlockClientId === nextClientId; - - return ( - - { ! shouldRenderInsertionPoint && isSelected && ( - { - 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 7a5c2243cf054..0000000000000 --- 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 2b5c6a3e3cea6..0000000000000 --- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js +++ /dev/null @@ -1,135 +0,0 @@ -/** - * 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, - 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 { - isBlockTemplatePart, - isNextBlockTemplatePart, - isPrevBlockTemplatePart, - canRemove: canRemoveBlock( clientId ), - canMove: canMoveBlock( clientId ), - setIsInserterOpened, - }; - }, - [ clientId ] - ); - - const { - isBlockTemplatePart, - isNextBlockTemplatePart, - isPrevBlockTemplatePart, - canRemove, - canMove, - } = selected; - - const { removeBlock } = useDispatch( blockEditorStore ); - - const showBlockDraggable = canMove && ! isBlockTemplatePart; - - return ( - - { showBlockDraggable && ( - - { ( draggableProps ) => ( -