Skip to content

Commit

Permalink
Zoom Out: Remove zoom-out toolbar (#66039) (#66200)
Browse files Browse the repository at this point in the history 
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
  • Loading branch information
@youknowriad @getdave
@draganescu @talldan
6 people authored Oct 18, 2024
1 parent 546a3df commit a16640b
Show file tree
Hide file tree
Showing 12 changed files with 97 additions and 410 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/zoom-out-separator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={ {
Expand Down
62 changes: 0 additions & 62 deletions packages/block-editor/src/components/block-popover/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;

Expand Down Expand Up @@ -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 )
) {
Expand All @@ -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 ),
Expand All @@ -157,13 +99,9 @@ function BlockPopover(
};
}, [
popoverDimensionsRecomputeCounter,
isZoomOut,
parentSectionElement,
selectedElement,
bottomClientId,
lastSelectedElement,
isSectionSelected,
__unstableContentRef,
] );

if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
Expand Down
61 changes: 37 additions & 24 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
isReusableBlock,
isTemplatePart,
} from '@wordpress/blocks';
import { ToolbarGroup } from '@wordpress/components';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -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.
Expand All @@ -58,7 +60,6 @@ export function PrivateBlockToolbar( {
const {
blockClientId,
blockClientIds,
isContentOnlyEditingMode,
isDefaultEditingMode,
blockType,
toolbarKey,
Expand All @@ -67,6 +68,10 @@ export function PrivateBlockToolbar( {
isUsingBindings,
hasParentPattern,
hasContentOnlyLocking,
showShuffleButton,
showSlots,
showGroupButtons,
showLockButtons,
} = useSelect( ( select ) => {
const {
getBlockName,
Expand All @@ -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 );
Expand Down Expand Up @@ -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(
Expand All @@ -130,6 +136,10 @@ export function PrivateBlockToolbar( {
isUsingBindings: _isUsingBindings,
hasParentPattern: _hasParentPattern,
hasContentOnlyLocking: _hasTemplateLock,
showShuffleButton: isZoomOutMode(),
showSlots: ! isZoomOutMode(),
showGroupButtons: ! isZoomOutMode(),
showLockButtons: ! isZoomOutMode(),
};
}, [] );

Expand Down Expand Up @@ -179,13 +189,11 @@ export function PrivateBlockToolbar( {
key={ toolbarKey }
>
<div ref={ toolbarWrapperRef } className={ innerClasses }>
{ ! isMultiToolbar &&
isLargeViewport &&
isDefaultEditingMode && <BlockParentSelector /> }
{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
<BlockParentSelector />
) }
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
( isDefaultEditingMode ||
( isContentOnlyEditingMode && ! hasParentPattern ) ||
isSynced ) && (
! hasParentPattern && (
<div
ref={ nodeRef }
{ ...showHoveredOrFocusedGestures }
Expand All @@ -196,26 +204,31 @@ export function PrivateBlockToolbar( {
disabled={ ! isDefaultEditingMode }
isUsingBindings={ isUsingBindings }
/>
{ isDefaultEditingMode && (
<>
{ ! isMultiToolbar && (
<BlockLockToolbar
clientId={ blockClientId }
/>
) }
<BlockMover
clientIds={ blockClientIds }
hideDragHandle={ hideDragHandle }
/>
</>
{ ! isMultiToolbar && showLockButtons && (
<BlockLockToolbar
clientId={ blockClientId }
/>
) }
<BlockMover
clientIds={ blockClientIds }
hideDragHandle={ hideDragHandle }
/>
</ToolbarGroup>
</div>
) }
{ ! hasContentOnlyLocking &&
shouldShowVisualToolbar &&
isMultiToolbar && <BlockGroupToolbar /> }
{ shouldShowVisualToolbar && (
isMultiToolbar &&
showGroupButtons && <BlockGroupToolbar /> }
{ showShuffleButton && (
<ToolbarGroup>
<Shuffle
clientId={ blockClientIds[ 0 ] }
as={ ToolbarButton }
/>
</ToolbarGroup>
) }
{ shouldShowVisualToolbar && showSlots && (
<>
<BlockControls.Slot
group="parent"
Expand Down
11 changes: 10 additions & 1 deletion packages/block-editor/src/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,18 @@

> :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 {
Expand Down
47 changes: 19 additions & 28 deletions packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
9 changes: 0 additions & 9 deletions packages/block-editor/src/components/block-tools/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -80,7 +79,6 @@ export default function BlockTools( {
showEmptyBlockSideInserter,
showBreadcrumb,
showBlockToolbarPopover,
showZoomOutToolbar,
} = useShowBlockTools();

const {
Expand Down Expand Up @@ -231,13 +229,6 @@ export default function BlockTools( {
/>
) }

{ showZoomOutToolbar && (
<ZoomOutPopover
__unstableContentRef={ __unstableContentRef }
clientId={ clientId }
/>
) }

{ /* 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 && (
<Popover.Slot
Expand Down
28 changes: 2 additions & 26 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,30 +270,6 @@
left: 50%;
}

.zoom-out-toolbar {

.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
.zoom-out-toolbar-button:focus::before,
.block-editor-block-toolbar-shuffle:focus::before,
.block-selection-button_drag-handle:focus::before {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}

.block-editor-block-mover {
background: none;
border: none;
}

// Make the spacing consistent between controls.
.zoom-out-toolbar-button {
height: $button-size-next-default-40px;
}
}

.block-editor-block-tools__zoom-out-mode-inserter-button {
visibility: hidden;

&.is-visible {
visibility: visible;
}
.components-button.block-editor-button-pattern-inserter__button.block-editor-block-tools__zoom-out-mode-inserter-button {
top: -1px;
}
Loading

1 comment on commit a16640b

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in a16640b.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11408887397
📝 Reported issues:

Please sign in to comment.