Skip to content

Commit

Permalink
Zoom Out: Remove zoom-out toolbar (#66039)
Browse files Browse the repository at this point in the history 
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
  • Loading branch information
@youknowriad @ellatrix
@getdave @draganescu @annezazu @stokesman @richtabor @ntsekouras @jameskoster
11 people committed Oct 17, 2024
1 parent 4a7de72 commit 04d8cd7
Show file tree
Hide file tree
Showing 8 changed files with 44 additions and 292 deletions.
18 changes: 16 additions & 2 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,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.
Expand Down Expand Up @@ -67,6 +68,7 @@ export function PrivateBlockToolbar( {
isUsingBindings,
hasParentPattern,
hasContentOnlyLocking,
showShuffleButton,
} = useSelect( ( select ) => {
const {
getBlockName,
Expand All @@ -78,6 +80,7 @@ export function PrivateBlockToolbar( {
getBlockAttributes,
getBlockParentsByBlockName,
getTemplateLock,
isZoomOutMode,
} = select( blockEditorStore );
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
Expand Down Expand Up @@ -118,6 +121,7 @@ export function PrivateBlockToolbar( {
shouldShowVisualToolbar: isValid && isVisual,
toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
showParentSelector:
! isZoomOutMode() &&
parentBlockType &&
getBlockEditingMode( firstParentClientId ) === 'default' &&
hasBlockSupport(
Expand All @@ -130,6 +134,7 @@ export function PrivateBlockToolbar( {
isUsingBindings: _isUsingBindings,
hasParentPattern: _hasParentPattern,
hasContentOnlyLocking: _hasTemplateLock,
showShuffleButton: isZoomOutMode(),
};
}, [] );

Expand Down Expand Up @@ -179,7 +184,8 @@ export function PrivateBlockToolbar( {
key={ toolbarKey }
>
<div ref={ toolbarWrapperRef } className={ innerClasses }>
{ ! isMultiToolbar &&
{ showParentSelector &&
! isMultiToolbar &&
isLargeViewport &&
isDefaultEditingMode && <BlockParentSelector /> }
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
Expand Down Expand Up @@ -215,6 +221,14 @@ export function PrivateBlockToolbar( {
{ ! hasContentOnlyLocking &&
shouldShowVisualToolbar &&
isMultiToolbar && <BlockGroupToolbar /> }
{ showShuffleButton && (
<ToolbarGroup>
<Shuffle
clientId={ blockClientIds[ 0 ] }
as={ ToolbarButton }
/>
</ToolbarGroup>
) }
{ shouldShowVisualToolbar && (
<>
<BlockControls.Slot
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: 0 additions & 28 deletions packages/block-editor/src/components/block-tools/style.scss
View file
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;
}
}
9 changes: 0 additions & 9 deletions packages/block-editor/src/components/block-tools/use-show-block-tools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,7 @@ export function useShowBlockTools() {
hasSelectedBlock &&
! hasMultiSelection() &&
editorMode === 'navigation';

const isZoomOut = editorMode === 'zoom-out';
const _showZoomOutToolbar =
isZoomOut &&
block?.attributes?.align === 'full' &&
! _showEmptyBlockSideInserter &&
! maybeShowBreadcrumb;
const _showBlockToolbarPopover =
! _showZoomOutToolbar &&
! getSettings().hasFixedToolbar &&
! _showEmptyBlockSideInserter &&
hasSelectedBlock &&
Expand All @@ -66,7 +58,6 @@ export function useShowBlockTools() {
showBreadcrumb:
! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
showBlockToolbarPopover: _showBlockToolbarPopover,
showZoomOutToolbar: _showZoomOutToolbar,
};
}, [] );
}
76 changes: 26 additions & 50 deletions packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,28 @@ function ZoomOutModeInserters() {
const [ isReady, setIsReady ] = useState( false );
const {
hasSelection,
blockInsertionPoint,
blockOrder,
blockInsertionPointVisible,
setInserterIsOpened,
sectionRootClientId,
selectedBlockClientId,
hoveredBlockClientId,
} = useSelect( ( select ) => {
const {
getSettings,
getBlockInsertionPoint,
getBlockOrder,
getSelectionStart,
getSelectedBlockClientId,
getHoveredBlockClientId,
isBlockInsertionPointVisible,
getSectionRootClientId,
} = unlock( select( blockEditorStore ) );

const root = getSectionRootClientId();

return {
hasSelection: !! getSelectionStart().clientId,
blockInsertionPoint: getBlockInsertionPoint(),
blockOrder: getBlockOrder( root ),
blockInsertionPointVisible: isBlockInsertionPointVisible(),
sectionRootClientId: root,
setInserterIsOpened:
getSettings().__experimentalSetIsInserterOpened,
selectedBlockClientId: getSelectedBlockClientId(),
hoveredBlockClientId: getHoveredBlockClientId(),
};
}, [] );

Expand All @@ -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 (
<BlockPopoverInbetween
key={ index }
previousClientId={ previousClientId }
nextClientId={ nextClientId }
>
{ ! shouldRenderInsertionPoint && (
<ZoomOutModeInserterButton
isVisible={ isSelected || isHovered }
onClick={ () => {
setInserterIsOpened( {
rootClientId: sectionRootClientId,
insertionIndex: index,
tab: 'patterns',
category: 'all',
} );
showInsertionPoint( sectionRootClientId, index, {
operation: 'insert',
} );
} }
/>
) }
</BlockPopoverInbetween>
);
} );
return (
<BlockPopoverInbetween
previousClientId={ previousClientId }
nextClientId={ nextClientId }
>
<ZoomOutModeInserterButton
onClick={ () => {
setInserterIsOpened( {
rootClientId: sectionRootClientId,
insertionIndex: index + 1,
tab: 'patterns',
category: 'all',
} );
showInsertionPoint( sectionRootClientId, index + 1, {
operation: 'insert',
} );
} }
/>
</BlockPopoverInbetween>
);
}

export default ZoomOutModeInserters;
46 changes: 0 additions & 46 deletions packages/block-editor/src/components/block-tools/zoom-out-popover.js
View file

This file was deleted.

Loading

0 comments on commit 04d8cd7

Please sign in to comment.