Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom Out: Remove zoom-out toolbar (#66039) #66200

Merged
merged 5 commits into from
Oct 18, 2024
Merged

Zoom Out: Remove zoom-out toolbar (#66039) #66200

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9b7d1d
Zoom Out: Remove zoom-out toolbar (#66039)
youknowriad Oct 17, 2024
811818b
Fix block toolbar
youknowriad Oct 17, 2024
4bfd93a
Fix linting
youknowriad Oct 18, 2024
619ae4f
Adjust position of Zoom Out inserter and dropdown
getdave Oct 18, 2024
f1fb8cf
Zoom Out: Hide slots and grouping buttons (#66243)
youknowriad Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 0 additions & 62 deletions packages/block-editor/src/components/block-popover/index.js
View file
Open in desktop
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
50 changes: 28 additions & 22 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
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,7 @@ export function PrivateBlockToolbar( {
isUsingBindings,
hasParentPattern,
hasContentOnlyLocking,
showShuffleButton,
} = useSelect( ( select ) => {
const {
getBlockName,
Expand All @@ -78,7 +80,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 +115,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 +133,7 @@ export function PrivateBlockToolbar( {
isUsingBindings: _isUsingBindings,
hasParentPattern: _hasParentPattern,
hasContentOnlyLocking: _hasTemplateLock,
showShuffleButton: isZoomOutMode(),
};
}, [] );

Expand Down Expand Up @@ -179,13 +183,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 && (
Comment on lines -182 to +196
Copy link
Contributor

@ajlende ajlende Oct 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Should the isContentOnlyEditingMode checks be removed here? That change seems to be part of #65204 that wasn't being backported.

Copy link
Contributor

@ajlende ajlende Oct 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

In order for the block toolbar to work properly, I had to include in the backport a small chunk of this PR #65485 as otherwise the toolbar doesn't appear in blocks with non default mode (which is the case for zoom-out sections)

Ah, this must be what you were talking about here. What's the best way to test this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think we need to test the toolbar in zoom-out (it should appear) and we should check whether the toolbar in "content-only" blocks is unchanged/makes sense.

<div
ref={ nodeRef }
{ ...showHoveredOrFocusedGestures }
Expand All @@ -196,25 +198,29 @@ export function PrivateBlockToolbar( {
disabled={ ! isDefaultEditingMode }
isUsingBindings={ isUsingBindings }
/>
{ isDefaultEditingMode && (
<>
{ ! isMultiToolbar && (
<BlockLockToolbar
clientId={ blockClientId }
/>
) }
<BlockMover
clientIds={ blockClientIds }
hideDragHandle={ hideDragHandle }
/>
</>
{ ! isMultiToolbar && (
<BlockLockToolbar
clientId={ blockClientId }
/>
) }
<BlockMover
clientIds={ blockClientIds }
hideDragHandle={ hideDragHandle }
/>
</ToolbarGroup>
</div>
) }
{ ! hasContentOnlyLocking &&
shouldShowVisualToolbar &&
isMultiToolbar && <BlockGroupToolbar /> }
{ showShuffleButton && (
<ToolbarGroup>
<Shuffle
clientId={ blockClientIds[ 0 ] }
as={ ToolbarButton }
/>
</ToolbarGroup>
) }
{ shouldShowVisualToolbar && (
<>
<BlockControls.Slot
Expand Down
11 changes: 10 additions & 1 deletion packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
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
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

What happened to this formatting :/

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
Open in desktop
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: 0 additions & 28 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,31 +269,3 @@
top: 50%;
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;
}
}
Loading
Loading