From 56ddd4ec7dc07d4a08f9d129857561f27c296213 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 9 Oct 2024 14:41:25 +1100 Subject: [PATCH 1/2] Zoom Out: When double clicking a template while zoomed out, reset zoom level instead of showing template editing dialog --- .../edit-template-blocks-notification.js | 46 ++++++++++++++----- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js index 3ccbe79127c013..fe1cfaa1d8e8ca 100644 --- a/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js +++ b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js @@ -1,7 +1,8 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -11,6 +12,7 @@ import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/compone * Internal dependencies */ import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; /** * Component that: @@ -27,16 +29,24 @@ import { store as editorStore } from '../../store'; * editor iframe canvas. */ export default function EditTemplateBlocksNotification( { contentRef } ) { - const { onNavigateToEntityRecord, templateId } = useSelect( ( select ) => { - const { getEditorSettings, getCurrentTemplateId } = - select( editorStore ); + const { isZoomOut, onNavigateToEntityRecord, templateId } = useSelect( + ( select ) => { + const { getEditorSettings, getCurrentTemplateId } = + select( editorStore ); - return { - onNavigateToEntityRecord: - getEditorSettings().onNavigateToEntityRecord, - templateId: getCurrentTemplateId(), - }; - }, [] ); + return { + isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(), + onNavigateToEntityRecord: + getEditorSettings().onNavigateToEntityRecord, + templateId: getCurrentTemplateId(), + }; + }, + [] + ); + + const { resetZoomLevel, __unstableSetEditorMode } = unlock( + useDispatch( blockEditorStore ) + ); const canEditTemplate = useSelect( ( select ) => @@ -51,6 +61,14 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { useEffect( () => { const handleDblClick = ( event ) => { + // If the editor is zoomed out, reset the zoom level and switch to + // edit mode. The dialog will not be shown in this case. + if ( isZoomOut ) { + resetZoomLevel(); + __unstableSetEditorMode( 'edit' ); + return; + } + if ( ! canEditTemplate ) { return; } @@ -69,7 +87,13 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { return () => { canvas?.removeEventListener( 'dblclick', handleDblClick ); }; - }, [ contentRef, canEditTemplate ] ); + }, [ + contentRef, + canEditTemplate, + isZoomOut, + resetZoomLevel, + __unstableSetEditorMode, + ] ); if ( ! canEditTemplate ) { return null; From ab96290c3288a85da721c5d5b38cebbc65592f51 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 10 Oct 2024 14:11:16 +1100 Subject: [PATCH 2/2] Try reusing useZoomOutModeExit hook --- packages/block-editor/src/private-apis.js | 2 + .../edit-template-blocks-notification.js | 52 ++++++------------- .../src/components/visual-editor/index.js | 2 + 3 files changed, 20 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index 7205bef5798ec1..98dd326a3ebb34 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -32,6 +32,7 @@ import { usesContextKey } from './components/rich-text/format-edit'; import { ExperimentalBlockCanvas } from './components/block-canvas'; import { getDuotoneFilter } from './components/duotone/utils'; import { useFlashEditableBlocks } from './components/use-flash-editable-blocks'; +import { useZoomOutModeExit } from './components/block-list/use-block-props/use-zoom-out-mode-exit'; import { selectBlockPatternsKey, reusableBlocksSelectKey, @@ -78,6 +79,7 @@ lock( privateApis, { TextAlignmentControl, usesContextKey, useFlashEditableBlocks, + useZoomOutModeExit, globalStylesDataKey, globalStylesLinksDataKey, selectBlockPatternsKey, diff --git a/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js index fe1cfaa1d8e8ca..bacf1beb1abecd 100644 --- a/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js +++ b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js @@ -1,8 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch, useSelect } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -12,7 +11,6 @@ import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/compone * Internal dependencies */ import { store as editorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; /** * Component that: @@ -29,24 +27,16 @@ import { unlock } from '../../lock-unlock'; * editor iframe canvas. */ export default function EditTemplateBlocksNotification( { contentRef } ) { - const { isZoomOut, onNavigateToEntityRecord, templateId } = useSelect( - ( select ) => { - const { getEditorSettings, getCurrentTemplateId } = - select( editorStore ); + const { onNavigateToEntityRecord, templateId } = useSelect( ( select ) => { + const { getEditorSettings, getCurrentTemplateId } = + select( editorStore ); - return { - isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(), - onNavigateToEntityRecord: - getEditorSettings().onNavigateToEntityRecord, - templateId: getCurrentTemplateId(), - }; - }, - [] - ); - - const { resetZoomLevel, __unstableSetEditorMode } = unlock( - useDispatch( blockEditorStore ) - ); + return { + onNavigateToEntityRecord: + getEditorSettings().onNavigateToEntityRecord, + templateId: getCurrentTemplateId(), + }; + }, [] ); const canEditTemplate = useSelect( ( select ) => @@ -61,14 +51,6 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { useEffect( () => { const handleDblClick = ( event ) => { - // If the editor is zoomed out, reset the zoom level and switch to - // edit mode. The dialog will not be shown in this case. - if ( isZoomOut ) { - resetZoomLevel(); - __unstableSetEditorMode( 'edit' ); - return; - } - if ( ! canEditTemplate ) { return; } @@ -79,7 +61,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { ) { return; } - setIsDialogOpen( true ); + + if ( ! event.defaultPrevented ) { + event.preventDefault(); + setIsDialogOpen( true ); + } }; const canvas = contentRef.current; @@ -87,13 +73,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { return () => { canvas?.removeEventListener( 'dblclick', handleDblClick ); }; - }, [ - contentRef, - canEditTemplate, - isZoomOut, - resetZoomLevel, - __unstableSetEditorMode, - ] ); + }, [ contentRef, canEditTemplate ] ); if ( ! canEditTemplate ) { return null; diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 88d2dac8ffd77c..0fee7e6d26e32e 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -48,6 +48,7 @@ const { useLayoutStyles, ExperimentalBlockCanvas: BlockCanvas, useFlashEditableBlocks, + useZoomOutModeExit, } = unlock( blockEditorPrivateApis ); /** @@ -335,6 +336,7 @@ function VisualEditor( { useSelectNearestEditableBlock( { isEnabled: renderingMode === 'template-locked', } ), + useZoomOutModeExit(), ] ); const zoomOutProps =