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 9fa1c88ceafe4..ae616f3ec39a6 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 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 6c4789cb2924f..a8f75bd1dc875 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 c4e228f8a3c07..e6bf1ace3ffb7 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 24f60dbbf970a..2d02f1ed0c037 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 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 4c6de7d8e2f87..0000000000000 --- 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 ) => ( -