From 2cc58dc5775d471182f7198bea0ab288e6fb3e5b Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Tue, 8 Oct 2024 12:09:18 +0530 Subject: [PATCH 1/3] reset zoomLevel on component unmount --- .../block-editor/src/components/iframe/index.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index b14514f934fb3..2dfad7b490c43 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -22,7 +22,7 @@ import { useDisabled, } from '@wordpress/compose'; import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -31,6 +31,7 @@ import { useBlockSelectionClearer } from '../block-selection-clearer'; import { useWritingFlow } from '../writing-flow'; import { getCompatibilityStyles } from './get-compatibility-styles'; import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; function bubbleEvent( event, Constructor, frame ) { const init = {}; @@ -130,6 +131,9 @@ function Iframe( { useResizeObserver(); const [ containerResizeListener, { width: containerWidth } ] = useResizeObserver(); + const { resetZoomLevel, __unstableSetEditorMode } = unlock( + useDispatch( blockEditorStore ) + ); const setRef = useRefEffect( ( node ) => { node._load = () => { @@ -298,8 +302,15 @@ function Iframe( { const _src = URL.createObjectURL( new window.Blob( [ html ], { type: 'text/html' } ) ); - return [ _src, () => URL.revokeObjectURL( _src ) ]; - }, [ html ] ); + return [ + _src, + () => { + URL.revokeObjectURL( _src ); + resetZoomLevel(); + __unstableSetEditorMode( 'edit' ); + }, + ]; + }, [ html, resetZoomLevel, __unstableSetEditorMode ] ); useEffect( () => cleanup, [ cleanup ] ); From 622ca0f13317cf9882e4f88460977a022c5d71c3 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Fri, 11 Oct 2024 18:56:09 +0530 Subject: [PATCH 2/3] conditionally reset zoom level --- packages/block-editor/src/components/iframe/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 2dfad7b490c43..1bc2419ebbd11 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -306,11 +306,13 @@ function Iframe( { _src, () => { URL.revokeObjectURL( _src ); - resetZoomLevel(); - __unstableSetEditorMode( 'edit' ); + if ( isZoomedOut ) { + resetZoomLevel(); + __unstableSetEditorMode( 'edit' ); + } }, ]; - }, [ html, resetZoomLevel, __unstableSetEditorMode ] ); + }, [ html, resetZoomLevel, __unstableSetEditorMode, isZoomedOut ] ); useEffect( () => cleanup, [ cleanup ] ); From f82d9b9bbc856f944be683fac39303c1134f42f6 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Thu, 17 Oct 2024 15:33:05 +0530 Subject: [PATCH 3/3] revert iframe changes and reset zoomLevel in the text-editor --- .../src/components/iframe/index.js | 19 +++---------------- .../src/components/text-editor/index.js | 11 ++++++++++- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 1bc2419ebbd11..b14514f934fb3 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -22,7 +22,7 @@ import { useDisabled, } from '@wordpress/compose'; import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -31,7 +31,6 @@ import { useBlockSelectionClearer } from '../block-selection-clearer'; import { useWritingFlow } from '../writing-flow'; import { getCompatibilityStyles } from './get-compatibility-styles'; import { store as blockEditorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; function bubbleEvent( event, Constructor, frame ) { const init = {}; @@ -131,9 +130,6 @@ function Iframe( { useResizeObserver(); const [ containerResizeListener, { width: containerWidth } ] = useResizeObserver(); - const { resetZoomLevel, __unstableSetEditorMode } = unlock( - useDispatch( blockEditorStore ) - ); const setRef = useRefEffect( ( node ) => { node._load = () => { @@ -302,17 +298,8 @@ function Iframe( { const _src = URL.createObjectURL( new window.Blob( [ html ], { type: 'text/html' } ) ); - return [ - _src, - () => { - URL.revokeObjectURL( _src ); - if ( isZoomedOut ) { - resetZoomLevel(); - __unstableSetEditorMode( 'edit' ); - } - }, - ]; - }, [ html, resetZoomLevel, __unstableSetEditorMode, isZoomedOut ] ); + return [ _src, () => URL.revokeObjectURL( _src ) ]; + }, [ html ] ); useEffect( () => cleanup, [ cleanup ] ); diff --git a/packages/editor/src/components/text-editor/index.js b/packages/editor/src/components/text-editor/index.js index fa0688859b5a6..6997c66826a12 100644 --- a/packages/editor/src/components/text-editor/index.js +++ b/packages/editor/src/components/text-editor/index.js @@ -6,6 +6,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { useEffect, useRef } from '@wordpress/element'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -13,6 +14,7 @@ import { useEffect, useRef } from '@wordpress/element'; import { store as editorStore } from '../../store'; import PostTextEditor from '../post-text-editor'; import PostTitleRaw from '../post-title/post-title-raw'; +import { unlock } from '../../lock-unlock'; export default function TextEditor( { autoFocus = false } ) { const { switchEditorMode } = useDispatch( editorStore ); @@ -26,13 +28,20 @@ export default function TextEditor( { autoFocus = false } ) { }; }, [] ); + const { resetZoomLevel, __unstableSetEditorMode } = unlock( + useDispatch( blockEditorStore ) + ); + const titleRef = useRef(); useEffect( () => { + resetZoomLevel(); + __unstableSetEditorMode( 'edit' ); + if ( autoFocus ) { return; } titleRef?.current?.focus(); - }, [ autoFocus ] ); + }, [ autoFocus, resetZoomLevel, __unstableSetEditorMode ] ); return (