Skip to content

Decouple "Zooming" from "Composing with Patterns/Sections" #65265

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
getdave wants to merge 9 commits into from
Closed

Decouple "Zooming" from "Composing with Patterns/Sections" #65265

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5a9e7c3
initial PoC
getdave Sep 12, 2024
d958a4a
Remove option from tool selector
getdave Sep 17, 2024
561bbe2
Use separate state for Zoom Level
getdave Sep 17, 2024
bf254c7
Only hide footer when zoom level is set
getdave Sep 17, 2024
5acebac
Use Zoom and Editor Mode in Toggle
getdave Sep 17, 2024
e90fa9f
Remove unwanted code
getdave Sep 18, 2024
8884052
Refactor useZoomOut hook to use new state
getdave Sep 18, 2024
6a1f268
Utilise hook as on trunk
getdave Sep 18, 2024
ee071bb
Hide other device types when in Zoom Out
getdave Sep 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
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -683,7 +683,7 @@ function BlockListBlockProvider( props ) {
! isDragging(),
initialPosition:
_isSelected &&
( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
( editorMode === 'edit' || editorMode === 'compose' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
? getSelectedBlocksInitialCaretPosition()
Comment on lines +686 to 687
Copy link
Contributor Author

@getdave getdave Sep 17, 2024

Choose a reason for hiding this comment

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

Not sure how to resolve this one

: undefined,
isHighlighted: isBlockHighlighted( clientId ),
Expand Down
10 changes: 5 additions & 5 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 @@ -177,7 +177,7 @@ function Items( {
const hasCustomAppender = !! CustomAppender;
const {
order,
isZoomOut,
isComposeMode,
selectedBlocks,
visibleBlocks,
shouldRenderAppender,
Expand Down Expand Up @@ -209,10 +209,10 @@ function Items( {
order: _order,
selectedBlocks: getSelectedBlockClientIds(),
visibleBlocks: __unstableGetVisibleBlocks(),
isZoomOut: __unstableGetEditorMode() === 'zoom-out',
isComposeMode: __unstableGetEditorMode() === 'compose',
shouldRenderAppender:
hasAppender &&
__unstableGetEditorMode() !== 'zoom-out' &&
__unstableGetEditorMode() !== 'compose' &&
( hasCustomAppender
? ! getTemplateLock( rootClientId ) &&
getBlockEditingMode( rootClientId ) !== 'disabled'
Expand All @@ -237,7 +237,7 @@ function Items( {
! selectedBlocks.includes( clientId )
}
>
{ isZoomOut && (
{ isComposeMode && (
<ZoomOutSeparator
clientId={ clientId }
rootClientId={ rootClientId }
Expand All @@ -248,7 +248,7 @@ function Items( {
rootClientId={ rootClientId }
clientId={ clientId }
/>
{ isZoomOut && (
{ isComposeMode && (
<ZoomOutSeparator
clientId={ clientId }
rootClientId={ rootClientId }
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -36,7 +36,7 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
if (
! isBlockSelected( clientId ) ||
isMultiSelecting() ||
__unstableGetEditorMode() === 'zoom-out'
__unstableGetEditorMode() === 'compose'
) {
return;
}
Expand Down
25 changes: 13 additions & 12 deletions packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,29 +16,30 @@ import { unlock } from '../../../lock-unlock';
* @param {string} clientId Block client ID.
*/
export function useZoomOutModeExit( { editorMode } ) {
const { getSettings } = useSelect( blockEditorStore );
const { __unstableSetEditorMode } = unlock(
const { getEditorMode } = useSelect( ( select ) => {
const { __unstableGetEditorMode } = select( blockEditorStore );
return {
getEditorMode: __unstableGetEditorMode,
};
}, [] );

const { __unstableSetEditorMode, setZoomOut } = unlock(
useDispatch( blockEditorStore )
);

return useRefEffect(
( node ) => {
if ( editorMode !== 'zoom-out' ) {
if ( editorMode !== 'compose' ) {
return;
}

function onDoubleClick( event ) {
if ( ! event.defaultPrevented ) {
event.preventDefault();

const { __experimentalSetIsInserterOpened } = getSettings();

if (
typeof __experimentalSetIsInserterOpened === 'function'
) {
__experimentalSetIsInserterOpened( false );
if ( getEditorMode() === 'compose' ) {
Copy link
Contributor Author

@getdave getdave Sep 18, 2024

Choose a reason for hiding this comment

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

Do we also want to check for being zoomed out here?

Copy link
Contributor Author

@getdave getdave Sep 18, 2024

Choose a reason for hiding this comment

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

If you are zoomed out but not in "compose" mode do we want double click to zoom in to work?

__unstableSetEditorMode( 'edit' );
setZoomOut( false );
}
__unstableSetEditorMode( 'edit' );
}
}

Expand All @@ -48,6 +49,6 @@ export function useZoomOutModeExit( { editorMode } ) {
node.removeEventListener( 'dblclick', onDoubleClick );
};
},
[ editorMode, getSettings, __unstableSetEditorMode ]
[ editorMode, __unstableSetEditorMode ]
);
}
2 changes: 1 addition & 1 deletion 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,7 +17,7 @@ export function useInBetweenInserter() {
const isInBetweenInserterDisabled = useSelect(
( select ) =>
select( blockEditorStore ).getSettings().isDistractionFree ||
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
select( blockEditorStore ).__unstableGetEditorMode() === 'compose',
[]
);
const {
Expand Down
10 changes: 5 additions & 5 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 @@ -46,7 +46,7 @@ function selector( select ) {
clientId,
hasFixedToolbar: getSettings().hasFixedToolbar,
isTyping: isTyping(),
isZoomOutMode: editorMode === 'zoom-out',
isComposeMode: editorMode === 'compose',
};
}

Expand All @@ -64,7 +64,7 @@ export default function BlockTools( {
__unstableContentRef,
...props
} ) {
const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
const { clientId, hasFixedToolbar, isTyping, isComposeMode } = useSelect(
selector,
[]
);
Expand Down Expand Up @@ -202,7 +202,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 && ! isComposeMode && (
<InsertionPoint
__unstableContentRef={ __unstableContentRef }
/>
Expand Down Expand Up @@ -239,7 +239,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 && (
{ ! isComposeMode && ! hasFixedToolbar && (
<Popover.Slot
name="block-toolbar"
ref={ blockToolbarRef }
Expand All @@ -251,7 +251,7 @@ export default function BlockTools( {
name="__unstable-block-tools-after"
ref={ blockToolbarAfterRef }
/>
{ isZoomOutMode && (
{ isComposeMode && (
<ZoomOutModeInserters
__unstableContentRef={ __unstableContentRef }
/>
Expand Down
6 changes: 3 additions & 3 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 @@ -38,7 +38,7 @@ function InbetweenInsertionPointPopover( {
isInserterShown,
isDistractionFree,
isNavigationMode,
isZoomOutMode,
isComposeMode,
} = useSelect( ( select ) => {
const {
getBlockOrder,
Expand Down Expand Up @@ -81,7 +81,7 @@ function InbetweenInsertionPointPopover( {
isNavigationMode: _isNavigationMode(),
isDistractionFree: settings.isDistractionFree,
isInserterShown: insertionPoint?.__unstableWithInserter,
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
isComposeMode: __unstableGetEditorMode() === 'compose',
};
}, [] );
const { getBlockEditingMode } = useSelect( blockEditorStore );
Expand Down Expand Up @@ -152,7 +152,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.
if ( isZoomOutMode && operation !== 'insert' ) {
if ( isComposeMode && operation !== 'insert' ) {
return null;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-tools/use-show-block-tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ export function useShowBlockTools() {
! hasMultiSelection() &&
editorMode === 'navigation';

const isZoomOut = editorMode === 'zoom-out';
const isComposeMode = editorMode === 'compose';
const _showZoomOutToolbar =
isZoomOut &&
isComposeMode &&
block?.attributes?.align === 'full' &&
! _showEmptyBlockSideInserter &&
! maybeShowBreadcrumb;
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import BlockDraggable from '../block-draggable';
import BlockMover from '../block-mover';
import Shuffle from '../block-toolbar/shuffle';
import NavigableToolbar from '../navigable-toolbar';
import { unlock } from '../../lock-unlock';

export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
const selected = useSelect(
Expand Down Expand Up @@ -84,8 +85,9 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
setIsInserterOpened,
} = selected;

const { removeBlock, __unstableSetEditorMode } =
useDispatch( blockEditorStore );
const { removeBlock, __unstableSetEditorMode, resetZoomOut } = unlock(
useDispatch( blockEditorStore )
);

const classNames = clsx( 'zoom-out-toolbar', {
'is-block-moving-mode': !! blockMovingMode,
Expand Down Expand Up @@ -144,6 +146,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
setIsInserterOpened( false );
}
__unstableSetEditorMode( 'edit' );
resetZoomOut();
__unstableContentRef.current?.focus();
} }
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inner-blocks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {

_isDropZoneDisabled = blockEditingMode === 'disabled';

if ( __unstableGetEditorMode() === 'zoom-out' ) {
if ( __unstableGetEditorMode() === 'compose' ) {
// In zoom out mode, we want to disable the drop zone for the sections.
// The inner blocks belonging to the section drop zone is
// already disabled by the blocks themselves being disabled.
Expand Down
6 changes: 3 additions & 3 deletions ...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export function PatternCategoryPreviews( {
category,
showTitlesAsTooltip,
} ) {
const isZoomOutMode = useSelect(
const isComposeMode = useSelect(
( select ) =>
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
select( blockEditorStore ).__unstableGetEditorMode() === 'compose',
[]
);
const [ allPatterns, , onClickPattern ] = usePatternsState(
Expand Down Expand Up @@ -172,7 +172,7 @@ export function PatternCategoryPreviews( {
</VStack>
{ currentCategoryPatterns.length > 0 && (
<>
{ isZoomOutMode && (
{ isComposeMode && (
<Text
size="12"
as="p"
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ function InserterMenu(
},
ref
) {
const isZoomOutMode = useSelect(
const isComposeMode = useSelect(
( select ) =>
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
select( blockEditorStore ).__unstableGetEditorMode() === 'compose',
[]
);
const [ filterValue, setFilterValue, delayedFilterValue ] =
Expand All @@ -71,7 +71,7 @@ function InserterMenu(
return __experimentalInitialTab;
}

if ( isZoomOutMode ) {
if ( isComposeMode ) {
return 'patterns';
}
}
Expand Down Expand Up @@ -307,7 +307,7 @@ function InserterMenu(
<div
className={ clsx( 'block-editor-inserter__menu', {
'show-panel': showPatternPanel || showMediaPanel,
'is-zoom-out': isZoomOutMode,
'is-zoom-out': isComposeMode,
} ) }
ref={ ref }
>
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -28,7 +28,7 @@ export const Appender = forwardRef(

return (
!! getTemplateLock( clientId ) ||
__unstableGetEditorMode() === 'zoom-out'
__unstableGetEditorMode() === 'compose'
);
},
[ clientId ]
Expand Down
19 changes: 14 additions & 5 deletions packages/block-editor/src/components/tool-selector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ import {
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { forwardRef } from '@wordpress/element';
import { Icon, edit as editIcon } from '@wordpress/icons';
import {
Icon,
edit as editIcon,
blockTable as composeIcon,
} from '@wordpress/icons';

/**
* Internal dependencies
Expand All @@ -30,6 +34,13 @@ const selectIcon = (
</SVG>
);

// write an icon map of mode => icon
const ICON_MAPPING = {
edit: editIcon,
navigation: selectIcon,
compose: composeIcon,
Copy link
Contributor Author

@getdave getdave Sep 18, 2024

Choose a reason for hiding this comment

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

Do we want to show a special icon for compose or just alias to the "edit" icon?

};

function ToolSelector( props, ref ) {
const mode = useSelect(
( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
Expand All @@ -45,7 +56,7 @@ function ToolSelector( props, ref ) {
__next40pxDefaultSize={ false }
{ ...props }
ref={ ref }
icon={ mode === 'navigation' ? selectIcon : editIcon }
icon={ ICON_MAPPING[ mode ] }
aria-expanded={ isOpen }
aria-haspopup="true"
onClick={ onToggle }
Expand All @@ -58,9 +69,7 @@ function ToolSelector( props, ref ) {
<>
<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
<MenuItemsChoice
value={
mode === 'navigation' ? 'navigation' : 'edit'
}
value={ mode }
onSelect={ __unstableSetEditorMode }
choices={ [
{
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/use-block-drop-zone/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ export default function useBlockDropZone( {
getAllowedBlocks,
isDragging,
isGroupable,
isZoomOutMode,
isComposeMode,
getSectionRootClientId,
} = unlock( useSelect( blockEditorStore ) );
const {
Expand Down Expand Up @@ -383,7 +383,7 @@ export default function useBlockDropZone( {
// do not allow dropping as the drop target is not within the root (that which is
// treated as "the content" by Zoom Out Mode).
if (
isZoomOutMode() &&
isComposeMode() &&
sectionRootClientId !== targetRootClientId
) {
return;
Expand Down Expand Up @@ -439,7 +439,7 @@ export default function useBlockDropZone( {
const [ targetIndex, operation, nearestSide ] =
dropTargetPosition;

if ( isZoomOutMode() && operation !== 'insert' ) {
if ( isComposeMode() && operation !== 'insert' ) {
return;
}

Expand Down Expand Up @@ -514,7 +514,7 @@ export default function useBlockDropZone( {
getDraggedBlockClientIds,
getBlockType,
getSectionRootClientId,
isZoomOutMode,
isComposeMode,
getBlocks,
getBlockListSettings,
dropZoneElement,
Expand Down
Loading