From dd2ed47f2c58861042f8ccb39fc072f483eee875 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 3 Sep 2024 12:53:09 +0100 Subject: [PATCH 1/4] Normalize usage to private selector --- .../block-tools/zoom-out-mode-inserters.js | 11 +++++++---- .../src/components/inner-blocks/index.js | 6 ++---- .../src/components/use-block-drop-zone/index.js | 10 ++++------ packages/block-editor/src/store/actions.js | 10 +++------- .../block-editor/src/store/private-selectors.js | 5 +++++ packages/block-editor/src/store/selectors.js | 13 ++++--------- .../editor/src/components/inserter-sidebar/index.js | 12 +++++------- 7 files changed, 30 insertions(+), 37 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 d15ee34714f5de..04a6a160a45be6 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 @@ -10,7 +10,7 @@ import { useEffect, useState } from '@wordpress/element'; import BlockPopoverInbetween from '../block-popover/inbetween'; import ZoomOutModeInserterButton from './zoom-out-mode-inserter-button'; import { store as blockEditorStore } from '../../store'; -import { sectionRootClientIdKey } from '../../store/private-keys'; +import { unlock } from '../../lock-unlock'; function ZoomOutModeInserters() { const [ isReady, setIsReady ] = useState( false ); @@ -32,14 +32,17 @@ function ZoomOutModeInserters() { getSelectedBlockClientId, getHoveredBlockClientId, isBlockInsertionPointVisible, - } = select( blockEditorStore ); - const { [ sectionRootClientIdKey ]: root } = getSettings(); + getSectionRootClientId, + } = unlock( select( blockEditorStore ) ); + + const root = getSectionRootClientId(); + return { hasSelection: !! getSelectionStart().clientId, blockInsertionPoint: getBlockInsertionPoint(), blockOrder: getBlockOrder( root ), blockInsertionPointVisible: isBlockInsertionPointVisible(), - sectionRootClientId: root, + sectionRootClientId: getSectionRootClientId(), setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened, selectedBlockClientId: getSelectedBlockClientId(), diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 9702044aeca6b0..0d35b459190fef 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -30,7 +30,6 @@ import useBlockSync from '../provider/use-block-sync'; import { store as blockEditorStore } from '../../store'; import useBlockDropZone from '../use-block-drop-zone'; import { unlock } from '../../lock-unlock'; -import { sectionRootClientIdKey } from '../../store/private-keys'; const EMPTY_OBJECT = {}; @@ -204,7 +203,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) { getBlockEditingMode, getBlockSettings, isDragging, - getSettings, + getSectionRootClientId, } = unlock( select( blockEditorStore ) ); let _isDropZoneDisabled; @@ -226,8 +225,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) { // 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. - const { [ sectionRootClientIdKey ]: sectionRootClientId } = - getSettings(); + const sectionRootClientId = getSectionRootClientId(); _isDropZoneDisabled = clientId !== sectionRootClientId; } 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 fb25368239a011..5af82915233703 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 @@ -24,7 +24,6 @@ import { } from '../../utils/math'; import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { sectionRootClientIdKey } from '../../store/private-keys'; const THRESHOLD_DISTANCE = 30; const MINIMUM_HEIGHT_FOR_THRESHOLD = 120; @@ -314,8 +313,8 @@ export default function useBlockDropZone( { getAllowedBlocks, isDragging, isGroupable, - getSettings, isZoomOutMode, + getSectionRootClientId, } = unlock( useSelect( blockEditorStore ) ); const { showInsertionPoint, @@ -361,8 +360,7 @@ export default function useBlockDropZone( { return; } - const { [ sectionRootClientIdKey ]: sectionRootClientId } = - getSettings(); + const sectionRootClientId = getSectionRootClientId(); // In Zoom Out mode, if the target is not the section root provided by settings then // do not allow dropping as the drop target is not within the root (that which is @@ -494,6 +492,8 @@ export default function useBlockDropZone( { getBlockNamesByClientId, getDraggedBlockClientIds, getBlockType, + getSectionRootClientId, + isZoomOutMode, getBlocks, getBlockListSettings, dropZoneElement, @@ -506,8 +506,6 @@ export default function useBlockDropZone( { isGroupable, getBlockVariations, getGroupingBlockName, - getSettings, - isZoomOutMode, ] ), 200 diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index ebd310b3de9d3f..e91f997ca67837 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -34,9 +34,6 @@ import { __experimentalUpdateSettings, privateRemoveBlocks, } from './private-actions'; -import { STORE_NAME } from './constants'; - -import { sectionRootClientIdKey } from './private-keys'; /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */ @@ -1671,13 +1668,12 @@ export const setNavigationMode = */ export const __unstableSetEditorMode = ( mode ) => - ( { dispatch, select, registry } ) => { + ( { dispatch, select } ) => { // When switching to zoom-out mode, we need to select the parent section if ( mode === 'zoom-out' ) { const firstSelectedClientId = select.getBlockSelectionStart(); - const { [ sectionRootClientIdKey ]: sectionRootClientId } = registry - .select( STORE_NAME ) - .getSettings(); + + const sectionRootClientId = select.getSectionRootClientId(); if ( firstSelectedClientId ) { let sectionClientId; diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 9cc793362296c4..0f8bb37687c831 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -543,3 +543,8 @@ export const getBlockStyles = createSelector( export function isZoomOutMode( state ) { return state.editorMode === 'zoom-out'; } + +export function getSectionRootClientId( state ) { + const sectionRootClientIdKey = 'sectionRootClientId'; + return state.settings[ sectionRootClientIdKey ] ?? null; +} diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 2a840392fbffed..30fdb76bdbe787 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -37,10 +37,9 @@ import { getContentLockingParent, getTemporarilyEditingAsBlocks, getTemporarilyEditingFocusModeToRevert, + getSectionRootClientId, } from './private-selectors'; -import { sectionRootClientIdKey } from './private-keys'; - /** * A block selection object. * @@ -2061,9 +2060,7 @@ export const getInserterItems = createRegistrySelector( ( select ) => let sectionRootClientId; try { sectionRootClientId = - getSettings( state )[ - sectionRootClientIdKey - ]; + getSectionRootClientId( state ); } catch ( e ) {} if ( sectionRootClientId && @@ -2841,8 +2838,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) { // In zoom-out mode, the block overlay is always active for section level blocks. if ( editorMode === 'zoom-out' ) { - const { [ sectionRootClientIdKey ]: sectionRootClientId } = - getSettings( state ); + const sectionRootClientId = getSectionRootClientId( state ); if ( sectionRootClientId ) { const sectionClientIds = getBlockOrder( state, @@ -2935,8 +2931,7 @@ export const getBlockEditingMode = createRegistrySelector( // sections. const editorMode = __unstableGetEditorMode( state ); if ( editorMode === 'zoom-out' ) { - const { [ sectionRootClientIdKey ]: sectionRootClientId } = - getSettings( state ); + const sectionRootClientId = getSectionRootClientId( state ); if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) { return sectionRootClientId ? 'disabled' : 'contentOnly'; diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index 3e54fec6cc06b8..fef5e54e52f68f 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -18,9 +18,7 @@ import { store as interfaceStore } from '@wordpress/interface'; import { unlock } from '../../lock-unlock'; import { store as editorStore } from '../../store'; -const { PrivateInserterLibrary, sectionRootClientIdKey } = unlock( - blockEditorPrivateApis -); +const { PrivateInserterLibrary } = unlock( blockEditorPrivateApis ); export default function InserterSidebar() { const { @@ -40,14 +38,14 @@ export default function InserterSidebar() { getBlockInsertionPoint, getBlockRootClientId, __unstableGetEditorMode, - getSettings, - } = select( blockEditorStore ); + getSectionRootClientId, + } = unlock( select( blockEditorStore ) ); const { get } = select( preferencesStore ); const { getActiveComplementaryArea } = select( interfaceStore ); const getBlockSectionRootClientId = () => { if ( __unstableGetEditorMode() === 'zoom-out' ) { - const { [ sectionRootClientIdKey ]: sectionRootClientId } = - getSettings(); + const sectionRootClientId = getSectionRootClientId(); + if ( sectionRootClientId ) { return sectionRootClientId; } From 1392caf058fb95f43013a6d374b84af6357174b9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 3 Sep 2024 12:56:31 +0100 Subject: [PATCH 2/4] Remove the lock --- packages/block-editor/src/store/private-selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 0f8bb37687c831..752c2fe7b4c2e7 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -28,6 +28,7 @@ import { unlock } from '../lock-unlock'; import { selectBlockPatternsKey, reusableBlocksSelectKey, + sectionRootClientIdKey, } from './private-keys'; export { getBlockSettings } from './get-block-settings'; @@ -545,6 +546,5 @@ export function isZoomOutMode( state ) { } export function getSectionRootClientId( state ) { - const sectionRootClientIdKey = 'sectionRootClientId'; return state.settings[ sectionRootClientIdKey ] ?? null; } From cdf6e0b53e0b4dd98bce6aafafbf971cce7b12f3 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 3 Sep 2024 15:41:16 +0100 Subject: [PATCH 3/4] Avoid double call --- .../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 04a6a160a45be6..30d51654b77cf4 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 @@ -42,7 +42,7 @@ function ZoomOutModeInserters() { blockInsertionPoint: getBlockInsertionPoint(), blockOrder: getBlockOrder( root ), blockInsertionPointVisible: isBlockInsertionPointVisible(), - sectionRootClientId: getSectionRootClientId(), + sectionRootClientId: root, setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened, selectedBlockClientId: getSelectedBlockClientId(), From 133b30f2d92058fb3863790645c2a4fcf082bc31 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 4 Sep 2024 09:33:47 +0100 Subject: [PATCH 4/4] Avoid setting default in selector --- packages/block-editor/src/store/private-selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 752c2fe7b4c2e7..7e323cee6581ae 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -546,5 +546,5 @@ export function isZoomOutMode( state ) { } export function getSectionRootClientId( state ) { - return state.settings[ sectionRootClientIdKey ] ?? null; + return state.settings?.[ sectionRootClientIdKey ]; }