From e706baf03b8c64238e972c94c9981388bdf28b08 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 10 May 2024 13:22:46 +0900 Subject: [PATCH 1/6] Zoom out: try click through to disengage --- .../components/block-tools/zoom-out-mode-inserters.js | 11 ++++++++++- .../block-editor/src/components/inserter/library.js | 2 ++ packages/block-editor/src/components/inserter/menu.js | 6 ++---- packages/block-editor/src/store/selectors.js | 9 +++++++-- .../editor/src/components/inserter-sidebar/index.js | 3 +++ 5 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js index 4396f54b19707..b92c8b21f53c8 100644 --- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js +++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js @@ -21,8 +21,10 @@ function ZoomOutModeInserters() { sectionRootClientId, insertionPoint, setInserterIsOpened, + selectedClientId, } = useSelect( ( select ) => { - const { getSettings, getBlockOrder } = select( blockEditorStore ); + const { getSettings, getBlockOrder, getSelectedBlockClientId } = + select( blockEditorStore ); const { sectionRootClientId: root } = unlock( getSettings() ); // To do: move ZoomOutModeInserters to core/editor. // Or we perhaps we should move the insertion point state to the @@ -37,11 +39,18 @@ function ZoomOutModeInserters() { sectionRootClientId: root, setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened, + selectedClientId: getSelectedBlockClientId(), }; }, [] ); const isMounted = useRef( false ); + useEffect( () => { + if ( selectedClientId && ! blockOrder.includes( selectedClientId ) ) { + setInserterIsOpened( { tab: 'blocks' } ); + } + }, [ selectedClientId, blockOrder, setInserterIsOpened ] ); + useEffect( () => { if ( ! isMounted.current ) { isMounted.current = true; diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index 6be31f49b5fbe..23bce7d0b452c 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -21,6 +21,7 @@ function InserterLibrary( showMostUsedBlocks = false, __experimentalInsertionIndex, __experimentalInitialTab, + __experimentalSetTab, __experimentalInitialCategory, __experimentalFilterValue, __experimentalOnPatternCategorySelection, @@ -56,6 +57,7 @@ function InserterLibrary( __experimentalOnPatternCategorySelection } __experimentalInitialTab={ __experimentalInitialTab } + __experimentalSetTab={ __experimentalSetTab } __experimentalInitialCategory={ __experimentalInitialCategory } shouldFocusBlock={ shouldFocusBlock } ref={ ref } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ddaec9d15a34a..e3c53460927af 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -48,7 +48,8 @@ function InserterMenu( shouldFocusBlock = true, __experimentalOnPatternCategorySelection = NOOP, onClose, - __experimentalInitialTab, + __experimentalInitialTab: selectedTab = 'blocks', + __experimentalSetTab: setSelectedTab, __experimentalInitialCategory, }, ref @@ -67,9 +68,6 @@ function InserterMenu( const [ patternFilter, setPatternFilter ] = useState( 'all' ); const [ selectedMediaCategory, setSelectedMediaCategory ] = useState( null ); - const [ selectedTab, setSelectedTab ] = useState( - __experimentalInitialTab - ); const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] = useInsertionPoint( { diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 4ce85afb8cfd1..fc0f6b8822c9d 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2800,7 +2800,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) { sectionRootClientId ); if ( sectionClientIds?.includes( clientId ) ) { - return true; + return ! isBlockSelected( state, clientId ); } } else if ( clientId && ! getBlockRootClientId( state, clientId ) ) { return true; @@ -2898,7 +2898,12 @@ export const getBlockEditingMode = createRegistrySelector( sectionRootClientId ); if ( ! sectionsClientIds?.includes( clientId ) ) { - return 'disabled'; + return getBlockParents( state, clientId ).some( + ( parentClientId ) => + isBlockSelected( state, parentClientId ) + ) + ? 'default' + : 'disabled'; } } diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index e127fa50d23bf..f1059acb85189 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -63,6 +63,9 @@ export default function InserterSidebar( { insertionPoint.insertionIndex } __experimentalInitialTab={ insertionPoint.tab } + __experimentalSetTab={ ( tab ) => { + setIsInserterOpened( { tab } ); + } } __experimentalInitialCategory={ insertionPoint.category } __experimentalFilterValue={ insertionPoint.filterValue } __experimentalOnPatternCategorySelection={ From 664c7b58f37a20a446d6e0b086d264ef8768d1eb Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 10 May 2024 14:24:03 +0900 Subject: [PATCH 2/6] Only allow selecting one down for now --- packages/block-editor/src/store/selectors.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index fc0f6b8822c9d..b3e3b621cda0b 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2898,9 +2898,9 @@ export const getBlockEditingMode = createRegistrySelector( sectionRootClientId ); if ( ! sectionsClientIds?.includes( clientId ) ) { - return getBlockParents( state, clientId ).some( - ( parentClientId ) => - isBlockSelected( state, parentClientId ) + return isBlockSelected( + state, + getBlockRootClientId( state, clientId ) ) ? 'default' : 'disabled'; From bc742a6656eab4c568114c2c748f3e57cd75f683 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 10 May 2024 15:32:25 +0900 Subject: [PATCH 3/6] wip --- .../block-tools/zoom-out-mode-inserters.js | 16 +++++++++++++--- packages/block-editor/src/hooks/use-zoom-out.js | 6 +++++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js index b92c8b21f53c8..4d3994d7163d0 100644 --- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js +++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useRegistry, useSelect } from '@wordpress/data'; import { useEffect, useRef, useState } from '@wordpress/element'; import { Button } from '@wordpress/components'; import { plus } from '@wordpress/icons'; @@ -16,6 +16,7 @@ import { unlock } from '../../lock-unlock'; function ZoomOutModeInserters() { const [ isReady, setIsReady ] = useState( false ); + const registry = useRegistry(); const { blockOrder, sectionRootClientId, @@ -47,9 +48,18 @@ function ZoomOutModeInserters() { useEffect( () => { if ( selectedClientId && ! blockOrder.includes( selectedClientId ) ) { - setInserterIsOpened( { tab: 'blocks' } ); + const { tab } = unlock( + registry.select( 'core/editor' ) + ).getInsertionPoint(); + if ( tab ) { + setInserterIsOpened( { tab: 'blocks' } ); + } else { + registry + .dispatch( blockEditorStore ) + .__unstableSetEditorMode( 'edit' ); + } } - }, [ selectedClientId, blockOrder, setInserterIsOpened ] ); + }, [ selectedClientId, blockOrder, setInserterIsOpened, registry ] ); useEffect( () => { if ( ! isMounted.current ) { diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index ce20cb5bd7a17..81ab541ff7e31 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -21,6 +21,10 @@ export function useZoomOut( zoomOut = true ) { const originalEditingMode = useRef( null ); const mode = __unstableGetEditorMode(); + useEffect( () => { + originalEditingMode.current = mode; + }, [ mode ] ); + useEffect( () => { // Only set this on mount so we know what to return to when we unmount. if ( ! originalEditingMode.current ) { @@ -42,5 +46,5 @@ export function useZoomOut( zoomOut = true ) { } else if ( ! zoomOut && originalEditingMode.current !== mode ) { __unstableSetEditorMode( originalEditingMode.current ); } - }, [ __unstableSetEditorMode, zoomOut, mode ] ); + }, [ __unstableSetEditorMode, zoomOut ] ); } From e0adbde4c8bda3d08f13a0745f25737715474307 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 10 May 2024 15:48:03 +0900 Subject: [PATCH 4/6] Share original mode state --- .../block-editor/src/hooks/use-zoom-out.js | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 81ab541ff7e31..dd78ca7606219 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -2,13 +2,15 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useRef } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies */ import { store as blockEditorStore } from '../store'; +let originalEditingMode = null; + /** * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. * @@ -18,33 +20,25 @@ export function useZoomOut( zoomOut = true ) { const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const { __unstableGetEditorMode } = useSelect( blockEditorStore ); - const originalEditingMode = useRef( null ); - const mode = __unstableGetEditorMode(); - - useEffect( () => { - originalEditingMode.current = mode; - }, [ mode ] ); - useEffect( () => { // Only set this on mount so we know what to return to when we unmount. - if ( ! originalEditingMode.current ) { - originalEditingMode.current = mode; - } + originalEditingMode = __unstableGetEditorMode(); return () => { // We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount - if ( __unstableGetEditorMode() !== originalEditingMode.current ) { - __unstableSetEditorMode( originalEditingMode.current ); + if ( __unstableGetEditorMode() !== originalEditingMode ) { + __unstableSetEditorMode( originalEditingMode ); } }; }, [] ); // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. useEffect( () => { + const mode = __unstableGetEditorMode(); if ( zoomOut && mode !== 'zoom-out' ) { __unstableSetEditorMode( 'zoom-out' ); - } else if ( ! zoomOut && originalEditingMode.current !== mode ) { - __unstableSetEditorMode( originalEditingMode.current ); + } else if ( ! zoomOut && originalEditingMode !== mode ) { + __unstableSetEditorMode( originalEditingMode ); } }, [ __unstableSetEditorMode, zoomOut ] ); } From b64f17e9f261a346c8549e87beea36167fab2a55 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 10 May 2024 16:33:39 +0900 Subject: [PATCH 5/6] Fix exit on insert --- .../src/components/block-tools/zoom-out-mode-inserters.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js index 4d3994d7163d0..1ea22ed68e42e 100644 --- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js +++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js @@ -67,7 +67,7 @@ function ZoomOutModeInserters() { return; } // reset insertion point when the block order changes - setInserterIsOpened( true ); + setInserterIsOpened( { tab: 'patterns' } ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [ blockOrder ] ); From 31411ae48dca4a3ce0993fee7ba415f2c3d55892 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 10 May 2024 16:48:32 +0900 Subject: [PATCH 6/6] Fix override issue --- packages/block-editor/src/store/selectors.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index b3e3b621cda0b..40b0d56473d01 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2898,12 +2898,14 @@ export const getBlockEditingMode = createRegistrySelector( sectionRootClientId ); if ( ! sectionsClientIds?.includes( clientId ) ) { - return isBlockSelected( - state, - getBlockRootClientId( state, clientId ) - ) - ? 'default' - : 'disabled'; + if ( + ! isBlockSelected( + state, + getBlockRootClientId( state, clientId ) + ) + ) { + return 'disabled'; + } } }