Skip to content

Reset zoom level on component unmount #69087

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

Merged
t-hamano merged 8 commits into from
May 23, 2026
+8 −2
Merged

Reset zoom level on component unmount #69087

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
73e9e6f
Reset zoom level on component unmount
Infinite-Null Feb 7, 2025
f3b5029
Reset zoom level when viewport changes to desktop
Infinite-Null Feb 12, 2025
e8ce907
Improve block editor store hooks organization
Infinite-Null Feb 14, 2025
d04935a
Merge branch 'trunk' into fix/reset-zoom-unmount
Infinite-Null May 20, 2026
761ffb2
Fix: import comment
Infinite-Null May 20, 2026
6fe5791
Merge branch 'trunk' into fix/reset-zoom-unmount
Infinite-Null May 20, 2026
46b8777
Merge branch 'trunk' into fix/reset-zoom-unmount
Infinite-Null May 21, 2026
0f05233
Fix zoom handling in useScaleCanvas and remove unused resetZoomLevel …
Infinite-Null May 21, 2026
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
15 changes: 14 additions & 1 deletion packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
/**
* WordPress dependencies
*/
import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
import { useDispatch, useSelect, useRegistry, select } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as editorStore } from '@wordpress/editor';
import { useLayoutEffect } from '@wordpress/element';
import { store as preferencesStore } from '@wordpress/preferences';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';

export function useAdaptEditorToCanvas( canvas ) {
const { clearSelectedBlock } = useDispatch( blockEditorStore );
const {
Expand All @@ -17,6 +22,8 @@ export function useAdaptEditorToCanvas( canvas ) {
} = useDispatch( editorStore );
const { get: getPreference } = useSelect( preferencesStore );
const registry = useRegistry();
const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
Copy link
Copy Markdown
Member

@Mamaduka Mamaduka Feb 12, 2025

Choose a reason for hiding this comment

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

The useDispatch( blockEditorStore ) is also defined above. Let's move and combine them in single call.

const { isZoomOut } = unlock( select( blockEditorStore ) );
Copy link
Copy Markdown
Member

@Mamaduka Mamaduka Feb 12, 2025

Choose a reason for hiding this comment

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

The components shouldn't use global select it doesn't react to store changes.

Suggested change
const { isZoomOut } = unlock( select( blockEditorStore ) );
const { isZoomOut } = unlock( useSelect( blockEditorStore ) );

useLayoutEffect( () => {
const isMediumOrBigger =
window.matchMedia( '(min-width: 782px)' ).matches;
Expand All @@ -39,6 +46,10 @@ export function useAdaptEditorToCanvas( canvas ) {
} else {
setIsListViewOpened( false );
}

if ( isMediumOrBigger && isZoomOut() ) {
resetZoomLevel();
}
} );
}, [
canvas,
Expand All @@ -49,5 +60,7 @@ export function useAdaptEditorToCanvas( canvas ) {
setIsInserterOpened,
setIsListViewOpened,
getPreference,
resetZoomLevel,
isZoomOut,
] );
}