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: Always go to edit mode when inserting a single block #64169

Closed
wants to merge 4 commits into from
Closed

Zoom Out: Always go to edit mode when inserting a single block #64169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ed692e7
Zoom Out: Always go to edit mode when insserting a single block
scruffian Aug 1, 2024
7994f66
Don't respond to mode
scruffian Aug 1, 2024
d44e003
Remove mode as dependency
getdave Aug 14, 2024
f401cb8
Normalize to single hook
getdave Aug 14, 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
33 changes: 14 additions & 19 deletions packages/block-editor/src/hooks/use-zoom-out.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect, useRef } from '@wordpress/element';

import { useSelect, useDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
Expand All @@ -19,35 +18,31 @@ export function useZoomOut( zoomOut = true ) {
const { __unstableGetEditorMode } = useSelect( blockEditorStore );

const originalEditingMode = useRef( null );
const mode = __unstableGetEditorMode();

useEffect( () => {
// Only set this on mount so we know what to return to when we unmount.
if ( ! originalEditingMode.current ) {
originalEditingMode.current = mode;
originalEditingMode.current = __unstableGetEditorMode();
}

if ( zoomOut && __unstableGetEditorMode() !== 'zoom-out' ) {
__unstableSetEditorMode( 'zoom-out' );
} else if (
! zoomOut &&
__unstableGetEditorMode() === 'zoom-out' &&
originalEditingMode.current !== __unstableGetEditorMode()
) {
__unstableSetEditorMode( originalEditingMode.current );
}

return () => {
// We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
// Restore the original mode on unmount if it was changed to 'zoom-out'
if (
__unstableGetEditorMode() === 'zoom-out' &&
__unstableGetEditorMode() !== originalEditingMode.current
) {
__unstableSetEditorMode( originalEditingMode.current );
}
};
}, [] );

// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
useEffect( () => {
if ( zoomOut && mode !== 'zoom-out' ) {
__unstableSetEditorMode( 'zoom-out' );
} else if (
! zoomOut &&
__unstableGetEditorMode() === 'zoom-out' &&
originalEditingMode.current !== mode
) {
__unstableSetEditorMode( originalEditingMode.current );
}
}, [ __unstableSetEditorMode, zoomOut, mode ] );
}, [ zoomOut, __unstableGetEditorMode, __unstableSetEditorMode ] );
}
9 changes: 9 additions & 0 deletions packages/block-editor/src/store/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1800,6 +1800,15 @@ export function editorMode( state = 'edit', action ) {
return 'edit';
}

// Let inserting a single block always trigger Edit mode.
if (
action.type === 'INSERT_BLOCKS' &&
action.blocks.length === 1 &&
action.blocks[ 0 ].innerBlocks.length === 0
) {
return 'edit';
}

Comment on lines +1803 to +1811
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm noting that in the line above the behaviour is conditionalised to navigation mode.

gutenberg/packages/block-editor/src/store/reducer.js

Lines 1799 to 1803 in 54269c0

export function editorMode( state = 'edit', action ) {
// Let inserting block in navigation mode always trigger Edit mode.
if ( action.type === 'INSERT_BLOCKS' && state === 'navigation' ) {
return 'edit';
}

This action will apply to all modes in all editors. Are we confident that's safe? Would it be better to limit the action to be in Zoom Out mode only?

Suggested change
// Let inserting a single block always trigger Edit mode.
if (
action.type === 'INSERT_BLOCKS' &&
action.blocks.length === 1 &&
action.blocks[ 0 ].innerBlocks.length === 0
) {
return 'edit';
}
// Let inserting a single block always trigger Edit mode.
if (
state === 'zoom-out' && // only applies in zoom out mode
action.type === 'INSERT_BLOCKS' &&
action.blocks.length === 1 &&
action.blocks[ 0 ].innerBlocks.length === 0
) {
return 'edit';
}

if ( action.type === 'SET_EDITOR_MODE' ) {
return action.mode;
}
Expand Down
Loading