Take control of zoom if a new page is created

WordPress · Dec 19, 2024 · 0c888af · 0c888af
1 parent 8e8210f
commit 0c888af
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
@@ -19,6 +20,7 @@ import { unlock } from '../lock-unlock';
  * @param {boolean} enabled If we should enter into zoomOut mode or not
  */
 export function useZoomOut( enabled = true ) {
+	const { postId } = useContext( BlockContext );
 	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -37,6 +39,7 @@ export function useZoomOut( enabled = true ) {
 
 	const controlZoomLevelRef = useRef( false );
 	const isEnabledRef = useRef( enabled );
+	const postIdRef = useRef( postId );
 
 	/**
 	 * This hook tracks if the zoom state was changed manually by the user via clicking
@@ -55,6 +58,11 @@ export function useZoomOut( enabled = true ) {
 	useEffect( () => {
 		isEnabledRef.current = enabled;
 
+		// If the user created a new post/page, we should take control of the zoom level.
+		if ( postIdRef.current !== postId ) {
+			controlZoomLevelRef.current = true;
+		}
+
 		if ( enabled !== isZoomOut() ) {
 			controlZoomLevelRef.current = true;
 
@@ -71,5 +79,5 @@ export function useZoomOut( enabled = true ) {
 				resetZoomLevel();
 			}
 		};
-	}, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] );
+	}, [ enabled, isZoomOut, postId, resetZoomLevel, setZoomLevel ] );
 }
diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js
@@ -12,28 +12,22 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { store as editorStore } from '../../store';
 
 export default function StartPageOptions() {
-	const { postId, shouldEnable } = useSelect( ( select ) => {
-		const {
-			isEditedPostDirty,
-			isEditedPostEmpty,
-			getCurrentPostId,
-			getCurrentPostType,
-		} = select( editorStore );
+	const shouldEnable = useSelect( ( select ) => {
+		const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } =
+			select( editorStore );
 		const preferencesModalActive =
 			select( interfaceStore ).isModalActive( 'editor/preferences' );
 		const choosePatternModalEnabled = select( preferencesStore ).get(
 			'core',
 			'enableChoosePatternModal'
 		);
-		return {
-			shouldEnable:
-				choosePatternModalEnabled &&
-				! preferencesModalActive &&
-				! isEditedPostDirty() &&
-				isEditedPostEmpty() &&
-				'page' === getCurrentPostType(),
-			postId: getCurrentPostId(),
-		};
+		return (
+			choosePatternModalEnabled &&
+			! preferencesModalActive &&
+			! isEditedPostDirty() &&
+			isEditedPostEmpty() &&
+			'page' === getCurrentPostType()
+		);
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
@@ -44,7 +38,7 @@ export default function StartPageOptions() {
 				category: 'core/starter-content',
 			} );
 		}
-	}, [ postId, shouldEnable, setIsInserterOpened ] );
+	}, [ shouldEnable, setIsInserterOpened ] );
 
 	return null;
 }