From eb0c1b25f990d5671bd6b228a97475ba2b564a4d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 15 Oct 2024 18:23:34 +0100 Subject: [PATCH] Zoom-out: Rely on zoom-level instead of zoom-out mode --- .../src/components/block-list/index.js | 6 +-- .../use-focus-first-element.js | 8 +-- .../use-selected-block-event-handlers.js | 27 +++------- .../use-block-props/use-zoom-out-mode-exit.js | 24 ++------- .../block-list/use-in-between-inserter.js | 2 +- .../src/components/block-tools/index.js | 6 +-- .../components/block-tools/insertion-point.js | 7 +-- .../block-tools/use-show-block-tools.js | 4 +- .../src/components/inner-blocks/index.js | 4 +- .../pattern-category-previews.js | 4 +- .../src/components/inserter/menu.js | 4 +- .../src/components/list-view/appender.js | 11 ++-- .../src/components/tool-selector/index.js | 3 +- .../components/use-block-drop-zone/index.js | 8 +-- .../components/writing-flow/use-tab-nav.js | 3 +- .../block-editor/src/hooks/use-zoom-out.js | 46 +++++----------- packages/block-editor/src/store/actions.js | 43 +-------------- .../block-editor/src/store/private-actions.js | 54 +++++++++++++++++-- .../src/store/private-selectors.js | 24 +-------- packages/block-editor/src/store/selectors.js | 9 ++-- .../edit-post/src/components/layout/index.js | 4 +- .../components/layout/use-should-iframe.js | 9 +++- .../src/components/document-tools/index.js | 4 +- .../src/components/inserter-sidebar/index.js | 9 ++-- .../src/components/zoom-out-toggle/index.js | 3 +- packages/editor/src/store/selectors.js | 5 +- 26 files changed, 132 insertions(+), 199 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index e2e019d4a9bf69..b315a22b4840b4 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -181,8 +181,8 @@ function Items( { __unstableGetVisibleBlocks, getTemplateLock, getBlockEditingMode, - __unstableGetEditorMode, isSectionBlock, + isZoomOut: _isZoomOut, } = unlock( select( blockEditorStore ) ); const _order = getBlockOrder( rootClientId ); @@ -200,13 +200,13 @@ function Items( { order: _order, selectedBlocks: getSelectedBlockClientIds(), visibleBlocks: __unstableGetVisibleBlocks(), - isZoomOut: __unstableGetEditorMode() === 'zoom-out', + isZoomOut: _isZoomOut(), shouldRenderAppender: ! isSectionBlock( rootClientId ) && getBlockEditingMode( rootClientId ) !== 'disabled' && ! getTemplateLock( rootClientId ) && hasAppender && - __unstableGetEditorMode() !== 'zoom-out' && + _isZoomOut() && ( hasCustomAppender || rootClientId === selectedBlockClientId || ( ! rootClientId && diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js index 27f72d1a100d3e..26f7cca2990d89 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js @@ -15,6 +15,7 @@ import { useSelect } from '@wordpress/data'; */ import { isInsideRootBlock } from '../../../utils/dom'; import { store as blockEditorStore } from '../../../store'; +import { unlock } from '../../../lock-unlock'; /** @typedef {import('@wordpress/element').RefObject} RefObject */ @@ -28,15 +29,16 @@ import { store as blockEditorStore } from '../../../store'; */ export function useFocusFirstElement( { clientId, initialPosition } ) { const ref = useRef(); - const { isBlockSelected, isMultiSelecting, __unstableGetEditorMode } = - useSelect( blockEditorStore ); + const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock( + useSelect( blockEditorStore ) + ); useEffect( () => { // Check if the block is still selected at the time this effect runs. if ( ! isBlockSelected( clientId ) || isMultiSelecting() || - __unstableGetEditorMode() === 'zoom-out' + isZoomOut() ) { return; } diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js index 19b778ca8fccfc..68f8a671adbe9a 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js @@ -21,18 +21,12 @@ import { unlock } from '../../../lock-unlock'; * @param {string} clientId Block client ID. */ export function useEventHandlers( { clientId, isSelected } ) { - const { - getBlockRootClientId, - getBlockIndex, - isZoomOut, - __unstableGetEditorMode, - } = unlock( useSelect( blockEditorStore ) ); - const { - insertAfterBlock, - removeBlock, - __unstableSetEditorMode, - resetZoomLevel, - } = unlock( useDispatch( blockEditorStore ) ); + const { getBlockRootClientId, getBlockIndex, isZoomOut } = unlock( + useSelect( blockEditorStore ) + ); + const { insertAfterBlock, removeBlock, resetZoomLevel } = unlock( + useDispatch( blockEditorStore ) + ); return useRefEffect( ( node ) => { @@ -66,12 +60,7 @@ export function useEventHandlers( { clientId, isSelected } ) { event.preventDefault(); - if ( - keyCode === ENTER && - __unstableGetEditorMode() === 'zoom-out' && - isZoomOut() - ) { - __unstableSetEditorMode( 'edit' ); + if ( keyCode === ENTER && isZoomOut() ) { resetZoomLevel(); } else if ( keyCode === ENTER ) { insertAfterBlock( clientId ); @@ -105,8 +94,6 @@ export function useEventHandlers( { clientId, isSelected } ) { getBlockIndex, insertAfterBlock, removeBlock, - __unstableGetEditorMode, - __unstableSetEditorMode, isZoomOut, resetZoomLevel, ] diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js index 494694952110bb..d77af3ef89c1ec 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js @@ -14,22 +14,13 @@ import { unlock } from '../../../lock-unlock'; * Allows Zoom Out mode to be exited by double clicking in the selected block. */ export function useZoomOutModeExit() { - const { getSettings, isZoomOut, __unstableGetEditorMode } = unlock( - useSelect( blockEditorStore ) - ); - - const { __unstableSetEditorMode, resetZoomLevel } = unlock( - useDispatch( blockEditorStore ) - ); + const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) ); + const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); return useRefEffect( ( node ) => { function onDoubleClick( event ) { - // In "compose" mode. - const composeMode = - __unstableGetEditorMode() === 'zoom-out' && isZoomOut(); - - if ( ! composeMode ) { + if ( ! isZoomOut() ) { return; } @@ -43,7 +34,6 @@ export function useZoomOutModeExit() { ) { __experimentalSetIsInserterOpened( false ); } - __unstableSetEditorMode( 'edit' ); resetZoomLevel(); } } @@ -54,12 +44,6 @@ export function useZoomOutModeExit() { node.removeEventListener( 'dblclick', onDoubleClick ); }; }, - [ - getSettings, - __unstableSetEditorMode, - __unstableGetEditorMode, - isZoomOut, - resetZoomLevel, - ] + [ getSettings, isZoomOut, resetZoomLevel ] ); } diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index 2b76804785a576..71eda2558f7930 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -18,7 +18,7 @@ export function useInBetweenInserter() { const isInBetweenInserterDisabled = useSelect( ( select ) => select( blockEditorStore ).getSettings().isDistractionFree || - select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', + unlock( select( blockEditorStore ) ).isZoomOut(), [] ); const { diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index cbcb5b8e50b09a..790927379b81a8 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -31,21 +31,19 @@ function selector( select ) { getSelectedBlockClientId, getFirstMultiSelectedBlockClientId, getSettings, - __unstableGetEditorMode, isTyping, isDragging, + isZoomOut, } = unlock( select( blockEditorStore ) ); const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId(); - const editorMode = __unstableGetEditorMode(); - return { clientId, hasFixedToolbar: getSettings().hasFixedToolbar, isTyping: isTyping(), - isZoomOutMode: editorMode === 'zoom-out', + isZoomOutMode: isZoomOut(), isDragging: isDragging(), }; } diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js index 891a32eaa5dc9c..6c54993b23bcaa 100644 --- a/packages/block-editor/src/components/block-tools/insertion-point.js +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -18,6 +18,7 @@ import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; import BlockPopoverInbetween from '../block-popover/inbetween'; import BlockDropZonePopover from '../block-popover/drop-zone'; +import { unlock } from '../../lock-unlock'; export const InsertionPointOpenRef = createContext(); @@ -47,8 +48,8 @@ function InbetweenInsertionPointPopover( { getPreviousBlockClientId, getNextBlockClientId, getSettings, - __unstableGetEditorMode, - } = select( blockEditorStore ); + isZoomOut, + } = unlock( select( blockEditorStore ) ); const insertionPoint = getBlockInsertionPoint(); const order = getBlockOrder( insertionPoint.rootClientId ); @@ -78,7 +79,7 @@ function InbetweenInsertionPointPopover( { rootClientId: insertionPoint.rootClientId, isDistractionFree: settings.isDistractionFree, isInserterShown: insertionPoint?.__unstableWithInserter, - isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', + isZoomOutMode: isZoomOut(), }; }, [] ); const { getBlockEditingMode } = useSelect( blockEditorStore ); diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js index 97737b4ec2f5b4..1ff3df4f1f1c4d 100644 --- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js +++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js @@ -27,6 +27,7 @@ export function useShowBlockTools() { isTyping, getBlockOrder, getSectionRootClientId, + isZoomOut, } = unlock( select( blockEditorStore ) ); const clientId = @@ -44,13 +45,12 @@ export function useShowBlockTools() { ! isTyping() && editorMode === 'edit' && isEmptyDefaultBlock; - const isZoomOut = editorMode === 'zoom-out'; const isSectionSelected = getBlockOrder( getSectionRootClientId() ).includes( clientId ); const _showZoomOutToolbar = clientId && - isZoomOut && + isZoomOut() && ! _showEmptyBlockSideInserter && isSectionSelected; const _showBlockToolbarPopover = diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 1583031a8ea18d..e79c188018cb50 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -195,7 +195,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) { ( select ) => { const { getBlockName, - __unstableGetEditorMode, + isZoomOut, getTemplateLock, getBlockRootClientId, getBlockEditingMode, @@ -216,7 +216,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) { _isDropZoneDisabled = blockEditingMode === 'disabled'; - if ( __unstableGetEditorMode() === 'zoom-out' ) { + if ( isZoomOut() ) { // In zoom out mode, we want to disable the drop zone for the sections. // The inner blocks belonging to the section drop zone is // already disabled by the blocks themselves being disabled. diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index 61716f616dafa9..835015704c944b 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -34,6 +34,7 @@ import { INSERTER_PATTERN_TYPES, } from './utils'; import { store as blockEditorStore } from '../../../store'; +import { unlock } from '../../../lock-unlock'; const noop = () => {}; @@ -45,8 +46,7 @@ export function PatternCategoryPreviews( { showTitlesAsTooltip, } ) { const isZoomOutMode = useSelect( - ( select ) => - select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', + ( select ) => unlock( select( blockEditorStore ) ).isZoomOut(), [] ); const [ allPatterns, , onClickPattern ] = usePatternsState( diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index bdd4ff11abceee..915a36d242ba26 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -33,6 +33,7 @@ import useInsertionPoint from './hooks/use-insertion-point'; import { store as blockEditorStore } from '../../store'; import TabbedSidebar from '../tabbed-sidebar'; import { useZoomOut } from '../../hooks/use-zoom-out'; +import { unlock } from '../../lock-unlock'; const NOOP = () => {}; function InserterMenu( @@ -54,8 +55,7 @@ function InserterMenu( ref ) { const isZoomOutMode = useSelect( - ( select ) => - select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', + ( select ) => unlock( select( blockEditorStore ) ).isZoomOut(), [] ); const [ filterValue, setFilterValue, delayedFilterValue ] = diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index ec46a1d211ab65..8cd515499b1a61 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -15,6 +15,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title'; import { useListViewContext } from './context'; import Inserter from '../inserter'; import AriaReferencedText from './aria-referenced-text'; +import { unlock } from '../../lock-unlock'; export const Appender = forwardRef( ( { nestingLevel, blockCount, clientId, ...props }, ref ) => { @@ -23,13 +24,11 @@ export const Appender = forwardRef( const instanceId = useInstanceId( Appender ); const hideInserter = useSelect( ( select ) => { - const { getTemplateLock, __unstableGetEditorMode } = - select( blockEditorStore ); - - return ( - !! getTemplateLock( clientId ) || - __unstableGetEditorMode() === 'zoom-out' + const { getTemplateLock, isZoomOut } = unlock( + select( blockEditorStore ) ); + + return !! getTemplateLock( clientId ) || isZoomOut(); }, [ clientId ] ); diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js index 14a7f00593e196..d4ba5d58ea61eb 100644 --- a/packages/block-editor/src/components/tool-selector/index.js +++ b/packages/block-editor/src/components/tool-selector/index.js @@ -36,7 +36,7 @@ function ToolSelector( props, ref ) { ( select ) => select( blockEditorStore ).__unstableGetEditorMode(), [] ); - const { resetZoomLevel, __unstableSetEditorMode } = unlock( + const { __unstableSetEditorMode } = unlock( useDispatch( blockEditorStore ) ); @@ -68,7 +68,6 @@ function ToolSelector( props, ref ) { mode === 'navigation' ? 'navigation' : 'edit' } onSelect={ ( newMode ) => { - resetZoomLevel(); __unstableSetEditorMode( newMode ); } } choices={ [ diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js index ff4d52aaa493bc..64424178461bcf 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/index.js +++ b/packages/block-editor/src/components/use-block-drop-zone/index.js @@ -330,7 +330,7 @@ export default function useBlockDropZone( { getAllowedBlocks, isDragging, isGroupable, - isZoomOutMode, + isZoomOut, getSectionRootClientId, } = unlock( useSelect( blockEditorStore ) ); const { @@ -383,7 +383,7 @@ export default function useBlockDropZone( { // do not allow dropping as the drop target is not within the root (that which is // treated as "the content" by Zoom Out Mode). if ( - isZoomOutMode() && + isZoomOut() && sectionRootClientId !== targetRootClientId ) { return; @@ -439,7 +439,7 @@ export default function useBlockDropZone( { const [ targetIndex, operation, nearestSide ] = dropTargetPosition; - if ( isZoomOutMode() && operation !== 'insert' ) { + if ( isZoomOut() && operation !== 'insert' ) { return; } @@ -514,7 +514,7 @@ export default function useBlockDropZone( { getDraggedBlockClientIds, getBlockType, getSectionRootClientId, - isZoomOutMode, + isZoomOut, getBlocks, getBlockListSettings, dropZoneElement, diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js index 216e7b6e04ad57..16a18358fb2ede 100644 --- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js +++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js @@ -27,7 +27,6 @@ export default function useTabNav() { getLastFocus, getSectionRootClientId, isZoomOut, - __unstableGetEditorMode, } = unlock( useSelect( blockEditorStore ) ); const { setLastFocus } = unlock( useDispatch( blockEditorStore ) ); @@ -54,7 +53,7 @@ export default function useTabNav() { } } // In "compose" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas. - else if ( __unstableGetEditorMode() === 'zoom-out' && isZoomOut() ) { + else if ( isZoomOut() ) { const sectionRootClientId = getSectionRootClientId(); const sectionBlocks = getBlockOrder( sectionRootClientId ); diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 23511487a54bf7..23f7fbc4bd59a1 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -2,62 +2,42 @@ * 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'; import { unlock } from '../lock-unlock'; + /** * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. * * @param {boolean} zoomOut If we should enter into zoomOut mode or not */ export function useZoomOut( zoomOut = true ) { - const { __unstableSetEditorMode, setZoomLevel } = unlock( + const { setZoomLevel, resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); - const { __unstableGetEditorMode } = unlock( useSelect( blockEditorStore ) ); - - const originalEditingModeRef = useRef( null ); - const mode = __unstableGetEditorMode(); + const { isZoomOut } = unlock( useSelect( blockEditorStore ) ); useEffect( () => { - // Only set this on mount so we know what to return to when we unmount. - if ( ! originalEditingModeRef.current ) { - originalEditingModeRef.current = mode; - } + const isZoomOutOnMount = isZoomOut(); return () => { - // We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount - if ( - __unstableGetEditorMode() === 'zoom-out' && - __unstableGetEditorMode() !== originalEditingModeRef.current - ) { - __unstableSetEditorMode( originalEditingModeRef.current ); - setZoomLevel( 100 ); + if ( isZoomOutOnMount ) { + setZoomLevel( 50 ); + } else { + resetZoomLevel(); } }; }, [] ); - // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. useEffect( () => { - if ( zoomOut && mode !== 'zoom-out' ) { - __unstableSetEditorMode( 'zoom-out' ); + if ( zoomOut ) { setZoomLevel( 50 ); - } else if ( - ! zoomOut && - __unstableGetEditorMode() === 'zoom-out' && - originalEditingModeRef.current !== mode - ) { - __unstableSetEditorMode( originalEditingModeRef.current ); - setZoomLevel( 100 ); + } else { + resetZoomLevel(); } - }, [ - __unstableGetEditorMode, - __unstableSetEditorMode, - zoomOut, - setZoomLevel, - ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes. + }, [ zoomOut, setZoomLevel, resetZoomLevel ] ); } diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index d92f8bc08569dc..24a08ecb21d6e5 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1669,46 +1669,7 @@ export const setNavigationMode = */ export const __unstableSetEditorMode = ( mode ) => - ( { dispatch, select, registry } ) => { - // When switching to zoom-out mode, we need to select the parent section - if ( mode === 'zoom-out' ) { - const firstSelectedClientId = select.getBlockSelectionStart(); - - const sectionRootClientId = select.getSectionRootClientId(); - - if ( firstSelectedClientId ) { - let sectionClientId; - - if ( sectionRootClientId ) { - const sectionClientIds = - select.getBlockOrder( sectionRootClientId ); - - // If the selected block is a section block, use it. - if ( sectionClientIds?.includes( firstSelectedClientId ) ) { - sectionClientId = firstSelectedClientId; - } else { - // If the selected block is not a section block, find - // the parent section that contains the selected block. - sectionClientId = select - .getBlockParents( firstSelectedClientId ) - .find( ( parent ) => - sectionClientIds.includes( parent ) - ); - } - } else { - sectionClientId = select.getBlockHierarchyRootClientId( - firstSelectedClientId - ); - } - - if ( sectionClientId ) { - dispatch.selectBlock( sectionClientId ); - } else { - dispatch.clearSelectedBlock(); - } - } - } - + ( { registry } ) => { registry.dispatch( preferencesStore ).set( 'core', 'editorTool', mode ); if ( mode === 'navigation' ) { @@ -1723,8 +1684,6 @@ export const __unstableSetEditorMode = 'You are currently in edit mode. To return to the navigation mode, press Escape.' ) ); - } else if ( mode === 'zoom-out' ) { - speak( __( 'You are currently in zoom-out mode.' ) ); } }; diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 5571db0ce91066..0ca3eb2cf522e6 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -2,6 +2,8 @@ * WordPress dependencies */ import { Platform } from '@wordpress/element'; +import { speak } from '@wordpress/a11y'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -404,12 +406,54 @@ export const modifyContentLockBlock = * @param {number} zoom the new zoom level * @return {Object} Action object. */ -export function setZoomLevel( zoom = 100 ) { - return { - type: 'SET_ZOOM_LEVEL', - zoom, +export const setZoomLevel = + ( zoom = 100 ) => + ( { select, dispatch } ) => { + // When switching to zoom-out mode, we need to select the parent section + if ( zoom !== 100 ) { + const firstSelectedClientId = select.getBlockSelectionStart(); + const sectionRootClientId = select.getSectionRootClientId(); + + if ( firstSelectedClientId ) { + let sectionClientId; + + if ( sectionRootClientId ) { + const sectionClientIds = + select.getBlockOrder( sectionRootClientId ); + + // If the selected block is a section block, use it. + if ( sectionClientIds?.includes( firstSelectedClientId ) ) { + sectionClientId = firstSelectedClientId; + } else { + // If the selected block is not a section block, find + // the parent section that contains the selected block. + sectionClientId = select + .getBlockParents( firstSelectedClientId ) + .find( ( parent ) => + sectionClientIds.includes( parent ) + ); + } + } else { + sectionClientId = select.getBlockHierarchyRootClientId( + firstSelectedClientId + ); + } + + if ( sectionClientId ) { + dispatch.selectBlock( sectionClientId ); + } else { + dispatch.clearSelectedBlock(); + } + + speak( __( 'You are currently in zoom-out mode.' ) ); + } + } + + dispatch( { + type: 'SET_ZOOM_LEVEL', + zoom, + } ); }; -} /** * Resets the Zoom state. diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index c3228980310656..dff5dc0184a4d2 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -117,6 +117,7 @@ export const getEnabledClientIdsTree = createSelector( state.settings.templateLock, state.blockListSettings, state.editorMode, + state.zoomLevel, getSectionRootClientId( state ), ] ); @@ -571,17 +572,6 @@ export const getBlockStyles = createSelector( ] ); -/** - * Returns whether zoom out mode is enabled. - * - * @param {Object} state Editor state. - * - * @return {boolean} Is zoom out mode enabled. - */ -export function isZoomOutMode( state ) { - return state.editorMode === 'zoom-out'; -} - /** * Retrieves the client ID of the block which contains the blocks * acting as "sections" in the editor. This is typically the "main content" @@ -595,16 +585,6 @@ export function getSectionRootClientId( state ) { return state.settings?.[ sectionRootClientIdKey ]; } -/** - * Returns the zoom out state. - * - * @param {Object} state Global application state. - * @return {boolean} The zoom out state. - */ -export function getZoomLevel( state ) { - return state.zoomLevel; -} - /** * Returns whether the editor is considered zoomed out. * @@ -612,7 +592,7 @@ export function getZoomLevel( state ) { * @return {boolean} Whether the editor is zoomed. */ export function isZoomOut( state ) { - return getZoomLevel( state ) < 100; + return state.zoomLevel < 100; } /** diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index a81d88de33466d..de1f892a17aedd 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -41,6 +41,7 @@ import { getSectionRootClientId, isSectionBlock, getParentSectionBlock, + isZoomOut, } from './private-selectors'; /** @@ -2876,10 +2877,8 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) { return true; } - const editorMode = __unstableGetEditorMode( state ); - // In zoom-out mode, the block overlay is always active for section level blocks. - if ( editorMode === 'zoom-out' ) { + if ( isZoomOut( state ) ) { const sectionRootClientId = getSectionRootClientId( state ); if ( sectionRootClientId ) { const sectionClientIds = getBlockOrder( @@ -2978,8 +2977,7 @@ export const getBlockEditingMode = createRegistrySelector( // In zoom-out mode, override the behavior set by // __unstableSetBlockEditingMode to only allow editing the top-level // sections. - const editorMode = __unstableGetEditorMode( state ); - if ( editorMode === 'zoom-out' ) { + if ( isZoomOut( state ) ) { const sectionRootClientId = getSectionRootClientId( state ); if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) { @@ -3001,6 +2999,7 @@ export const getBlockEditingMode = createRegistrySelector( return 'disabled'; } + const editorMode = __unstableGetEditorMode( state ); if ( editorMode === 'navigation' ) { const sectionRootClientId = getSectionRootClientId( state ); diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 88d0cd1588f03f..42250054a70873 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -411,7 +411,7 @@ function Layout( { kind: 'postType', name: 'wp_template', } ); - const { __unstableGetEditorMode } = select( blockEditorStore ); + const { isZoomOut } = unlock( select( blockEditorStore ) ); const { getEditorMode, getRenderingMode } = select( editorStore ); const isRenderingPostOnly = getRenderingMode() === 'post-only'; @@ -436,7 +436,7 @@ function Layout( { ? getEditedPostTemplateId() : null, enablePaddingAppender: - __unstableGetEditorMode() !== 'zoom-out' && + ! isZoomOut() && isRenderingPostOnly && ! DESIGN_POST_TYPES.includes( currentPostType ), }; diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js index e36a4773c4a1fd..97e746a6a28f6e 100644 --- a/packages/edit-post/src/components/layout/use-should-iframe.js +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -6,6 +6,11 @@ import { useSelect } from '@wordpress/data'; import { store as blocksStore } from '@wordpress/blocks'; import { store as blockEditorStore } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; export function useShouldIframe() { @@ -16,7 +21,7 @@ export function useShouldIframe() { isZoomOutMode, } = useSelect( ( select ) => { const { getEditorSettings, getCurrentPostType } = select( editorStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); + const { isZoomOut } = unlock( select( blockEditorStore ) ); const { getBlockTypes } = select( blocksStore ); const editorSettings = getEditorSettings(); return { @@ -25,7 +30,7 @@ export function useShouldIframe() { return type.apiVersion >= 3; } ), isEditingTemplate: getCurrentPostType() === 'wp_template', - isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', + isZoomOutMode: isZoomOut(), }; }, [] ); diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index 146945f7343bf2..ee261567a9115a 100644 --- a/packages/editor/src/components/document-tools/index.js +++ b/packages/editor/src/components/document-tools/index.js @@ -48,7 +48,7 @@ function DocumentTools( { className, disableBlockTools = false } ) { getListViewToggleRef, } = unlock( select( editorStore ) ); const { getShortcutRepresentation } = select( keyboardShortcutsStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); + const { isZoomOut } = unlock( select( blockEditorStore ) ); return { isInserterOpened: select( editorStore ).isInserterOpened(), @@ -61,7 +61,7 @@ function DocumentTools( { className, disableBlockTools = false } ) { showIconLabels: get( 'core', 'showIconLabels' ), isDistractionFree: get( 'core', 'distractionFree' ), isVisualMode: getEditorMode() === 'visual', - isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', + isZoomedOutView: isZoomOut(), }; }, [] ); diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index 5cace042fae58c..66730b43592b6e 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -33,15 +33,12 @@ export default function InserterSidebar() { getInserter, isPublishSidebarOpened, } = unlock( select( editorStore ) ); - const { - getBlockRootClientId, - __unstableGetEditorMode, - getSectionRootClientId, - } = unlock( select( blockEditorStore ) ); + const { getBlockRootClientId, isZoomOut, getSectionRootClientId } = + unlock( select( blockEditorStore ) ); const { get } = select( preferencesStore ); const { getActiveComplementaryArea } = select( interfaceStore ); const getBlockSectionRootClientId = () => { - if ( __unstableGetEditorMode() === 'zoom-out' ) { + if ( isZoomOut() ) { const sectionRootClientId = getSectionRootClientId(); if ( sectionRootClientId ) { diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index b89bf15546f0d8..2cfb2e2da3bc44 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -23,7 +23,7 @@ const ZoomOutToggle = () => { ), } ) ); - const { resetZoomLevel, setZoomLevel, __unstableSetEditorMode } = unlock( + const { resetZoomLevel, setZoomLevel } = unlock( useDispatch( blockEditorStore ) ); @@ -33,7 +33,6 @@ const ZoomOutToggle = () => { } else { setZoomLevel( 50 ); } - __unstableSetEditorMode( isZoomOut ? 'edit' : 'zoom-out' ); }; return ( diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index abb744ee5f2207..2396cb67c73e69 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -28,6 +28,7 @@ import { } from './constants'; import { getPostRawValue } from './reducer'; import { getTemplatePartIcon } from '../utils/get-template-part-icon'; +import { unlock } from '../lock-unlock'; /** * Shared reference to an empty object for cases where it is important to avoid @@ -1299,8 +1300,8 @@ export function getRenderingMode( state ) { */ export const getDeviceType = createRegistrySelector( ( select ) => ( state ) => { - const editorMode = select( blockEditorStore ).__unstableGetEditorMode(); - if ( editorMode === 'zoom-out' ) { + const isZoomOut = unlock( select( blockEditorStore ) ).isZoomOut(); + if ( isZoomOut ) { return 'Desktop'; } return state.deviceType;