Skip to content

Refactor block editor components to remove zoom out mode dependencies #71807

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

Closed
ramonjd wants to merge 11 commits into from
Closed

Refactor block editor components to remove zoom out mode dependencies #71807

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c9d62b7
Refactor block editor components to remove zoom out mode dependencies
ramonjd Sep 22, 2025
00ccd3b
Updates for edit-post
andrewserong Oct 7, 2025
d6d5473
Remove zoom out check from useFocusFirstElement
andrewserong Oct 8, 2025
ed18d27
Re-instate recalculating derived block editing modes when zoom level …
andrewserong Oct 10, 2025
01b78d3
Remove unused zoom-out mode checks from __unstableHasActiveBlockOverl…
ramonjd Oct 14, 2025
ad4be2c
Update BlockPopoverCover to use getBoundingClientRect to account for …
andrewserong Oct 24, 2025
46fab01
Remove unused variables
andrewserong Oct 24, 2025
f6f3be1
Update tests
andrewserong Oct 24, 2025
021e0f9
Keep the behaviour where we don't allow dragging horizontally to grou…
andrewserong Oct 24, 2025
38089c1
Keep the behaviour that eagerly displays the switch style button
andrewserong Oct 24, 2025
20aaf5e
Try updating e2e tests
andrewserong Oct 24, 2025
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
137 changes: 57 additions & 80 deletions packages/block-editor/src/components/block-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ import {
DEFAULT_BLOCK_EDIT_CONTEXT,
} from '../block-edit/context';
import { useTypingObserver } from '../observe-typing';
import { ZoomOutSeparator } from './zoom-out-separator';
import { unlock } from '../../lock-unlock';

export const IntersectionObserver = createContext();
Expand Down Expand Up @@ -168,76 +167,68 @@ function Items( {
// function on every render.
const hasAppender = CustomAppender !== false;
const hasCustomAppender = !! CustomAppender;
const {
order,
isZoomOut,
selectedBlocks,
visibleBlocks,
shouldRenderAppender,
} = useSelect(
( select ) => {
const {
getSettings,
getBlockOrder,
getSelectedBlockClientIds,
__unstableGetVisibleBlocks,
getTemplateLock,
getBlockEditingMode,
isSectionBlock,
isContainerInsertableToInContentOnlyMode,
getBlockName,
isZoomOut: _isZoomOut,
canInsertBlockType,
} = unlock( select( blockEditorStore ) );
const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
useSelect(
( select ) => {
const {
getSettings,
getBlockOrder,
getSelectedBlockClientIds,
__unstableGetVisibleBlocks,
getTemplateLock,
getBlockEditingMode,
isSectionBlock,
isContainerInsertableToInContentOnlyMode,
getBlockName,
canInsertBlockType,
} = unlock( select( blockEditorStore ) );

const _order = getBlockOrder( rootClientId );
const _order = getBlockOrder( rootClientId );

if ( getSettings().isPreviewMode ) {
return {
order: _order,
selectedBlocks: EMPTY_ARRAY,
visibleBlocks: EMPTY_SET,
};
}

const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const showRootAppender =
! rootClientId &&
! selectedBlockClientId &&
( ! _order.length ||
! canInsertBlockType(
getDefaultBlockName(),
rootClientId
) );
const hasSelectedRoot = !! (
rootClientId &&
selectedBlockClientId &&
rootClientId === selectedBlockClientId
);

if ( getSettings().isPreviewMode ) {
return {
order: _order,
selectedBlocks: EMPTY_ARRAY,
visibleBlocks: EMPTY_SET,
selectedBlocks: selectedBlockClientIds,
visibleBlocks: __unstableGetVisibleBlocks(),
shouldRenderAppender:
( ! isSectionBlock( rootClientId ) ||
isContainerInsertableToInContentOnlyMode(
getBlockName( selectedBlockClientId ),
rootClientId
) ) &&
getBlockEditingMode( rootClientId ) !== 'disabled' &&
! getTemplateLock( rootClientId ) &&
hasAppender &&
( hasCustomAppender ||
hasSelectedRoot ||
showRootAppender ),
};
}

const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const showRootAppender =
! rootClientId &&
! selectedBlockClientId &&
( ! _order.length ||
! canInsertBlockType(
getDefaultBlockName(),
rootClientId
) );
const hasSelectedRoot = !! (
rootClientId &&
selectedBlockClientId &&
rootClientId === selectedBlockClientId
);

return {
order: _order,
selectedBlocks: selectedBlockClientIds,
visibleBlocks: __unstableGetVisibleBlocks(),
isZoomOut: _isZoomOut(),
shouldRenderAppender:
( ! isSectionBlock( rootClientId ) ||
isContainerInsertableToInContentOnlyMode(
getBlockName( selectedBlockClientId ),
rootClientId
) ) &&
getBlockEditingMode( rootClientId ) !== 'disabled' &&
! getTemplateLock( rootClientId ) &&
hasAppender &&
! _isZoomOut() &&
( hasCustomAppender ||
hasSelectedRoot ||
showRootAppender ),
};
},
[ rootClientId, hasAppender, hasCustomAppender ]
);
},
[ rootClientId, hasAppender, hasCustomAppender ]
);

return (
<LayoutProvider value={ layout }>
Expand All @@ -251,24 +242,10 @@ function Items( {
! selectedBlocks.includes( clientId )
}
>
{ isZoomOut && (
<ZoomOutSeparator
clientId={ clientId }
rootClientId={ rootClientId }
position="top"
/>
) }
<BlockListBlock
rootClientId={ rootClientId }
clientId={ clientId }
/>
{ isZoomOut && (
<ZoomOutSeparator
clientId={ clientId }
rootClientId={ rootClientId }
position="bottom"
/>
) }
</AsyncModeProvider>
) ) }
{ order.length < 1 && placeholder }
Expand Down
8 changes: 2 additions & 6 deletions packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,13 @@ import { unlock } from '../../../lock-unlock';
*/
export function useFocusFirstElement( { clientId, initialPosition } ) {
const ref = useRef();
const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
const { isBlockSelected, isMultiSelecting } = unlock(
useSelect( blockEditorStore )
);

useEffect( () => {
// Check if the block is still selected at the time this effect runs.
if (
! isBlockSelected( clientId ) ||
isMultiSelecting() ||
isZoomOut()
) {
if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
Comment on lines 37 to +38

@andrewserong andrewserong Oct 8, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I've removed isZoomOut from this check, otherwise we get stuck on a row if we hit "enter" while zoomed out:

Before

2025-10-08.16.55.03.mp4

With this removal

2025-10-08.16.54.18.mp4

return;
}

Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/block-list/use-in-between-inserter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ export function useInBetweenInserter() {
const openRef = useContext( InsertionPointOpenRef );
const isInBetweenInserterDisabled = useSelect(
( select ) =>
select( blockEditorStore ).getSettings().isDistractionFree ||
unlock( select( blockEditorStore ) ).isZoomOut(),
select( blockEditorStore ).getSettings().isDistractionFree,
[]
);
const {
Expand Down
17 changes: 13 additions & 4 deletions packages/block-editor/src/components/block-popover/cover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,22 @@ function CoverContainer( {
additionalStyles = {},
children,
} ) {
const [ width, setWidth ] = useState( selectedElement.offsetWidth );
const [ height, setHeight ] = useState( selectedElement.offsetHeight );
const [ width, setWidth ] = useState( () => {
const rect = selectedElement.getBoundingClientRect();
return rect.width;
} );
const [ height, setHeight ] = useState( () => {
const rect = selectedElement.getBoundingClientRect();
return rect.height;
} );

useEffect( () => {
const observer = new window.ResizeObserver( () => {
setWidth( selectedElement.offsetWidth );
setHeight( selectedElement.offsetHeight );
// Use getBoundingClientRect to get correct sizes when the
// editor is zoomed in or out, accounting for any scaling.
const rect = selectedElement.getBoundingClientRect();
setWidth( rect.width );
setHeight( rect.height );
} );
observer.observe( selectedElement, { box: 'border-box' } );
return () => observer.disconnect();
Expand Down
5 changes: 1 addition & 4 deletions packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export function BlockSettingsDropdown( {
selectedBlockClientIds,
openedBlockSettingsMenu,
isContentOnly,
isZoomOut,
} = useSelect(
( select ) => {
const {
Expand All @@ -99,7 +98,6 @@ export function BlockSettingsDropdown( {
getBlockAttributes,
getOpenedBlockSettingsMenu,
getBlockEditingMode,
isZoomOut: _isZoomOut,
} = unlock( select( blockEditorStore ) );

const { getActiveBlockVariation } = select( blocksStore );
Expand All @@ -124,7 +122,6 @@ export function BlockSettingsDropdown( {
openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
isContentOnly:
getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
isZoomOut: _isZoomOut(),
};
},
[ firstBlockClientId ]
Expand Down Expand Up @@ -308,7 +305,7 @@ export function BlockSettingsDropdown( {
{ __( 'Duplicate' ) }
</MenuItem>
) }
{ canInsertBlock && ! isZoomOut && (
{ canInsertBlock && (
<>
<MenuItem
onClick={ pipe(
Expand Down
11 changes: 6 additions & 5 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 @@ -127,6 +127,7 @@ export function PrivateBlockToolbar( {

// The switch style button appears more prominently with the
// content only pattern experiment.
// @ZOOMOUTMODE

@andrewserong andrewserong Oct 24, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'm inclined to keep this one, as I think quickly being able to toggle through the section styles is nice behaviour 👍

const _showSwitchSectionStyleButton =
window?.__experimentalContentOnlyPatternInsertion &&
( _isZoomOut || isSectionBlock( selectedBlockClientId ) );
Expand All @@ -139,7 +140,6 @@ export function PrivateBlockToolbar( {
shouldShowVisualToolbar: isValid && isVisual,
toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
showParentSelector:
! _isZoomOut &&
parentBlockType &&
editingMode !== 'contentOnly' &&
getBlockEditingMode( parentClientId ) !== 'disabled' &&
Expand All @@ -152,11 +152,12 @@ export function PrivateBlockToolbar( {
isUsingBindings: _isUsingBindings,
hasParentPattern: _hasParentPattern,
hasContentOnlyLocking: _hasTemplateLock,
// @ZOOMOUTMODE

@ramonjd ramonjd Sep 22, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This comment is to indicate questionable areas... that is, "should I stay or should I go". Like that song.

@andrewserong andrewserong Oct 24, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

For the showShuffleButton I'm not sure how useful it is in its current form as it shows a very simple set of patterns in the same category. It feels like something that looks good in theory but I struggle to imagine how it would feel in actual usage, as you'd need a really good set of comparable patterns for it to work well:

image

showShuffleButton: _isZoomOut,
showSlots: ! _isZoomOut,
showGroupButtons: ! _isZoomOut,
showLockButtons: ! _isZoomOut,
showBlockVisibilityButton: ! _isZoomOut,
showBlockVisibilityButton: true,
showSlots: true,
showGroupButtons: true,
showLockButtons: true,
showSwitchSectionStyleButton: _showSwitchSectionStyleButton,
};
}, [] );
Expand Down
17 changes: 3 additions & 14 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 @@ -25,7 +25,6 @@ import {
import BlockToolbarPopover from './block-toolbar-popover';
import { store as blockEditorStore } from '../../store';
import usePopoverScroll from '../block-popover/use-popover-scroll';
import ZoomOutModeInserters from './zoom-out-mode-inserters';
import { useShowBlockTools } from './use-show-block-tools';
import { unlock } from '../../lock-unlock';
import { cleanEmptyObject } from '../../hooks/utils';
Expand All @@ -37,8 +36,6 @@ function selector( select ) {
getFirstMultiSelectedBlockClientId,
getSettings,
isTyping,
isDragging,
isZoomOut,
} = unlock( select( blockEditorStore ) );

const clientId =
Expand All @@ -48,8 +45,6 @@ function selector( select ) {
clientId,
hasFixedToolbar: getSettings().hasFixedToolbar,
isTyping: isTyping(),
isZoomOutMode: isZoomOut(),
isDragging: isDragging(),
};
}

Expand All @@ -67,8 +62,7 @@ export default function BlockTools( {
__unstableContentRef,
...props
} ) {
const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
useSelect( selector, [] );
const { clientId, hasFixedToolbar, isTyping } = useSelect( selector, [] );

const isMatch = useShortcutEventMatch();
const {
Expand Down Expand Up @@ -254,7 +248,7 @@ export default function BlockTools( {
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div { ...props } onKeyDown={ onKeyDown }>
<InsertionPointOpenRef.Provider value={ useRef( false ) }>
{ ! isTyping && ! isZoomOutMode && (
{ ! isTyping && (
<InsertionPoint
__unstableContentRef={ __unstableContentRef }
/>
Expand All @@ -276,7 +270,7 @@ export default function BlockTools( {
) }

{ /* 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 && (
{ ! hasFixedToolbar && (
<Popover.Slot
name="block-toolbar"
ref={ blockToolbarRef }
Expand All @@ -288,11 +282,6 @@ export default function BlockTools( {
name="__unstable-block-tools-after"
ref={ blockToolbarAfterRef }
/>
{ isZoomOutMode && ! isDragging && (
<ZoomOutModeInserters
__unstableContentRef={ __unstableContentRef }
/>
) }
</InsertionPointOpenRef.Provider>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-tools/insertion-point.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ function InbetweenInsertionPointPopover( {
// Other operations such as "group" are when the editor tries to create a row
// block by grouping the block being dragged with the block it's being dropped
// onto.
// @ZOOMOUTMODE

@andrewserong andrewserong Oct 24, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Grouping while dragging onto things horizontally can be a fairly fine-grained action. For now, I lean toward leaving this in (return early if we're not inserting), but we could always revisit in follow-ups. I'll remove this comment for now.

if ( isZoomOutMode && operation !== 'insert' ) {
return null;
}
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/list-view/appender.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ export const Appender = forwardRef(
const instanceId = useInstanceId( Appender );
const { directInsert, hideInserter } = useSelect(
( select ) => {
const { getBlockListSettings, getTemplateLock, isZoomOut } =
unlock( select( blockEditorStore ) );
const { getBlockListSettings, getTemplateLock } = unlock(
select( blockEditorStore )
);

const settings = getBlockListSettings( clientId );
const directInsertValue = settings?.directInsert || false;
const hideInserterValue =
!! getTemplateLock( clientId ) || isZoomOut();
const hideInserterValue = !! getTemplateLock( clientId );

return {
directInsert: directInsertValue,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,7 @@ function BlockStyleControls( {
},
},
};

if ( blockEditingMode !== 'default' ) {
return null;
}
Expand Down
Loading