From 3e599d2b2968ff71445afd8d2ca2602f8ba3bbc8 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 5 Sep 2024 13:24:50 -0500 Subject: [PATCH 01/25] Use index instead of insertionIndex --- .../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 79f8be3f9cfe9..0d85acaac991c 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 @@ -94,7 +94,7 @@ function ZoomOutModeInserters() { onClick={ () => { setInserterIsOpened( { rootClientId: sectionRootClientId, - insertionIndex: index, + index, tab: 'patterns', category: 'all', } ); From 458c376cd52e8554aee525920f3f887db85f6248 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 5 Sep 2024 13:28:20 -0500 Subject: [PATCH 02/25] Revert "Use index instead of insertionIndex" This reverts commit df849a92860f7e9b75f56153627370017c005221. --- .../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 0d85acaac991c..79f8be3f9cfe9 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 @@ -94,7 +94,7 @@ function ZoomOutModeInserters() { onClick={ () => { setInserterIsOpened( { rootClientId: sectionRootClientId, - index, + insertionIndex: index, tab: 'patterns', category: 'all', } ); From aae23538f04906a2018549c88a7038005aece884 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 6 Sep 2024 17:11:48 -0500 Subject: [PATCH 03/25] Move/Add inserterInsertionPoint to block editor --- .../block-tools/zoom-out-mode-inserters.js | 10 +++++++--- .../inserter/hooks/use-insertion-point.js | 10 +++++++++- .../block-editor/src/store/private-actions.js | 14 +++++++++++++ .../src/store/private-selectors.js | 11 ++++++++++ packages/block-editor/src/store/reducer.js | 20 +++++++++++++++++++ 5 files changed, 61 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 79f8be3f9cfe9..f5eb11822ca84 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 @@ -50,7 +50,9 @@ function ZoomOutModeInserters() { }; }, [] ); - const { showInsertionPoint } = useDispatch( blockEditorStore ); + const { showInsertionPoint, setInserterInsertionPoint } = unlock( + useDispatch( blockEditorStore ) + ); // Defer the initial rendering to avoid the jumps due to the animation. useEffect( () => { @@ -93,11 +95,13 @@ function ZoomOutModeInserters() { isVisible={ isSelected || isHovered } onClick={ () => { setInserterIsOpened( { - rootClientId: sectionRootClientId, - insertionIndex: index, tab: 'patterns', category: 'all', } ); + setInserterInsertionPoint( { + rootClientId: sectionRootClientId, + insertionIndex: index, + } ); showInsertionPoint( sectionRootClientId, index, { operation: 'insert', } ); diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 0cd71bf77b983..1e10979d44122 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -83,11 +83,13 @@ function useInsertionPoint( { getBlockRootClientId, getBlockIndex, getBlockOrder, - } = select( blockEditorStore ); + getInserterInsertionPoint, + } = unlock( select( blockEditorStore ) ); const selectedBlockClientId = getSelectedBlockClientId(); let _destinationRootClientId = rootClientId; let _destinationIndex; + const insertionPoint = getInserterInsertionPoint(); if ( insertionIndex !== undefined ) { // Insert into a specific index. @@ -95,6 +97,12 @@ function useInsertionPoint( { } else if ( clientId ) { // Insert after a specific client ID. _destinationIndex = getBlockIndex( clientId ); + } else if ( + insertionPoint?.insertionIndex && + insertionPoint?.rootClientId + ) { + _destinationRootClientId = insertionPoint.rootClientId; + _destinationIndex = insertionPoint.insertionIndex; } else if ( ! isAppender && selectedBlockClientId ) { _destinationRootClientId = getBlockRootClientId( selectedBlockClientId diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 441a07202c42a..1e335e28befa9 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -359,6 +359,20 @@ export function expandBlock( clientId ) { }; } +/** + * @param {Object} value + * @param {string} value.rootClientId The root client ID to insert at. + * @param {number} value.insertionIndex The index to insert at. + * + * @return {Object} Action object. + */ +export function setInserterInsertionPoint( value ) { + return { + type: 'SET_INSERTER_INSERTION_POINT', + value, + }; +} + /** * Temporarily modify/unlock the content-only block for editions. * diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index a98c5af93c86a..9b6d1f82fdb68 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -698,3 +698,14 @@ export function getClosestAllowedInsertionPointForPattern( const names = getGrammar( pattern ).map( ( { blockName: name } ) => name ); return getClosestAllowedInsertionPoint( state, names, clientId ); } + +/** + * Where the inserter should insert into. + * + * @param {Object} state + * @return {Object} Of where the insertion point in the block editor is or null if none is set. + */ +export function getInserterInsertionPoint( state ) { + // Potentially hook up a lot of what is happening within useInsertionPoint here. + return state.inserterInsertionPoint; +} diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 827a2141f44c1..59ab2411b0340 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -2079,6 +2079,25 @@ export function zoomLevel( state = 100, action ) { return state; } +/** + * Reducer setting the insertion point + * + * @param {boolean} state Current state. + * @param {Object} action Dispatched action. + * + * @return {boolean} Updated state. + */ +export function inserterInsertionPoint( state = false, action ) { + switch ( action.type ) { + case 'SET_INSERTER_INSERTION_POINT': + return action.value; + case 'SELECT_BLOCK': + return null; + } + + return state; +} + const combinedReducers = combineReducers( { blocks, isDragging, @@ -2091,6 +2110,7 @@ const combinedReducers = combineReducers( { initialPosition, blocksMode, blockListSettings, + inserterInsertionPoint, insertionPoint, template, settings, From 269fe5374f4ce21547522e9593212d0cdfa69ee1 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 9 Sep 2024 10:23:35 -0500 Subject: [PATCH 04/25] Update the docs of setIsInserterOpened --- docs/reference-guides/data/data-core-editor.md | 4 ++++ packages/editor/src/store/actions.js | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 4fea2c51fa54f..a4c1a59f0c423 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1422,6 +1422,10 @@ _Parameters_ - _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object. - _value.rootClientId_ `string`: The root client ID to insert at. - _value.insertionIndex_ `number`: The index to insert at. +- _value.filterValue_ `string`: A query to filter the inserter results. +- _value.onSelect_ `Function`: A callback when an item is selected. +- _value.tab_ `string`: The tab to open in the inserter. +- _value.category_ `string`: The category to initialize in the inserter. _Returns_ diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 59faa6b5b7362..17cf313385d4b 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -726,6 +726,10 @@ export function removeEditorPanel( panelName ) { * use an object. * @param {string} value.rootClientId The root client ID to insert at. * @param {number} value.insertionIndex The index to insert at. + * @param {string} value.filterValue A query to filter the inserter results. + * @param {Function} value.onSelect A callback when an item is selected. + * @param {string} value.tab The tab to open in the inserter. + * @param {string} value.category The category to initialize in the inserter. * * @return {Object} Action object. */ From b17df456d37138197b178b487f7848b819a07283 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 9 Sep 2024 15:05:03 -0500 Subject: [PATCH 05/25] Remove unnecessary props since they won't be set --- packages/editor/src/components/inserter-sidebar/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index b98770b7afe8f..e436a529bde82 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -88,10 +88,7 @@ export default function InserterSidebar() { showMostUsedBlocks={ showMostUsedBlocks } showInserterHelpPanel shouldFocusBlock={ isMobileViewport } - rootClientId={ - blockSectionRootClientId ?? insertionPoint.rootClientId - } - __experimentalInsertionIndex={ insertionPoint.insertionIndex } + rootClientId={ blockSectionRootClientId } onSelect={ insertionPoint.onSelect } __experimentalInitialTab={ insertionPoint.tab } __experimentalInitialCategory={ insertionPoint.category } From 24622578baad37449e43c1973cce8918c6d396ca Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 9 Sep 2024 15:21:49 -0500 Subject: [PATCH 06/25] Discourage use of rootIndex and insertionIndex on setIsInserterOpened --- docs/reference-guides/data/data-core-editor.md | 2 -- packages/editor/src/store/actions.js | 18 ++++++++---------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index a4c1a59f0c423..57c0892ed60f6 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1420,8 +1420,6 @@ Returns an action object used to open/close the inserter. _Parameters_ - _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object. -- _value.rootClientId_ `string`: The root client ID to insert at. -- _value.insertionIndex_ `number`: The index to insert at. - _value.filterValue_ `string`: A query to filter the inserter results. - _value.onSelect_ `Function`: A callback when an item is selected. - _value.tab_ `string`: The tab to open in the inserter. diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 17cf313385d4b..4e68d49259850 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -720,16 +720,14 @@ export function removeEditorPanel( panelName ) { /** * Returns an action object used to open/close the inserter. * - * @param {boolean|Object} value Whether the inserter should be - * opened (true) or closed (false). - * To specify an insertion point, - * use an object. - * @param {string} value.rootClientId The root client ID to insert at. - * @param {number} value.insertionIndex The index to insert at. - * @param {string} value.filterValue A query to filter the inserter results. - * @param {Function} value.onSelect A callback when an item is selected. - * @param {string} value.tab The tab to open in the inserter. - * @param {string} value.category The category to initialize in the inserter. + * @param {boolean|Object} value Whether the inserter should be + * opened (true) or closed (false). + * To specify an insertion point, + * use an object. + * @param {string} value.filterValue A query to filter the inserter results. + * @param {Function} value.onSelect A callback when an item is selected. + * @param {string} value.tab The tab to open in the inserter. + * @param {string} value.category The category to initialize in the inserter. * * @return {Object} Action object. */ From b06bdddf72df743767e30dc3d402683c05457155 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 9 Sep 2024 15:29:27 -0500 Subject: [PATCH 07/25] Remove note --- packages/block-editor/src/store/private-selectors.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 9b6d1f82fdb68..19f040318276c 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -706,6 +706,5 @@ export function getClosestAllowedInsertionPointForPattern( * @return {Object} Of where the insertion point in the block editor is or null if none is set. */ export function getInserterInsertionPoint( state ) { - // Potentially hook up a lot of what is happening within useInsertionPoint here. return state.inserterInsertionPoint; } From 8136045030222b88e9c74b6038e31c57cd2ee199 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 9 Sep 2024 15:58:59 -0500 Subject: [PATCH 08/25] Use setInserterInsertionPoint in quick inserter --- .../src/components/inserter/quick-inserter.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index f40af12feddf4..ddab685811597 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -19,6 +19,7 @@ import useInsertionPoint from './hooks/use-insertion-point'; import usePatternsState from './hooks/use-patterns-state'; import useBlockTypesState from './hooks/use-block-types-state'; import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; const SEARCH_THRESHOLD = 6; const SHOWN_BLOCK_TYPES = 6; @@ -83,15 +84,19 @@ export default function QuickInserter( { } }, [ setInserterIsOpened ] ); + const { showInsertionPoint, setInserterInsertionPoint } = unlock( + useDispatch( blockEditorStore ) + ); + // When clicking Browse All select the appropriate block so as // the insertion point can work as expected. const onBrowseAll = () => { setInserterIsOpened( { - rootClientId, - insertionIndex, filterValue, onSelect, } ); + setInserterInsertionPoint( { rootClientId, insertionIndex } ); + showInsertionPoint( rootClientId, insertionIndex ); }; let maxBlockPatterns = 0; From a551d83c539d6c25d01f43504d7ecaa3654fb118 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 10 Sep 2024 11:20:40 -0500 Subject: [PATCH 09/25] Insert in correct location for root insertions --- .../components/inserter/hooks/use-insertion-point.js | 12 +++++------- .../src/components/inserter/quick-inserter.js | 5 ++--- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 1e10979d44122..cee4d1c4b05ee 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -86,7 +86,6 @@ function useInsertionPoint( { getInserterInsertionPoint, } = unlock( select( blockEditorStore ) ); const selectedBlockClientId = getSelectedBlockClientId(); - let _destinationRootClientId = rootClientId; let _destinationIndex; const insertionPoint = getInserterInsertionPoint(); @@ -94,15 +93,14 @@ function useInsertionPoint( { if ( insertionIndex !== undefined ) { // Insert into a specific index. _destinationIndex = insertionIndex; + } else if ( insertionPoint?.insertionIndex ) { + _destinationRootClientId = insertionPoint?.rootClientId + ? insertionPoint.rootClientId + : rootClientId; + _destinationIndex = insertionPoint.insertionIndex; } else if ( clientId ) { // Insert after a specific client ID. _destinationIndex = getBlockIndex( clientId ); - } else if ( - insertionPoint?.insertionIndex && - insertionPoint?.rootClientId - ) { - _destinationRootClientId = insertionPoint.rootClientId; - _destinationIndex = insertionPoint.insertionIndex; } else if ( ! isAppender && selectedBlockClientId ) { _destinationRootClientId = getBlockRootClientId( selectedBlockClientId diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index ddab685811597..4c313d28fd517 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -9,7 +9,7 @@ import clsx from 'clsx'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Button, SearchControl } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -84,7 +84,7 @@ export default function QuickInserter( { } }, [ setInserterIsOpened ] ); - const { showInsertionPoint, setInserterInsertionPoint } = unlock( + const { setInserterInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); @@ -96,7 +96,6 @@ export default function QuickInserter( { onSelect, } ); setInserterInsertionPoint( { rootClientId, insertionIndex } ); - showInsertionPoint( rootClientId, insertionIndex ); }; let maxBlockPatterns = 0; From a1765fe0d6ac772b445d6f8108e7c1c527d47d1b Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 10 Sep 2024 11:53:45 -0500 Subject: [PATCH 10/25] Add store tests and improve docs and default state --- .../src/store/test/private-actions.js | 15 ++++++++ .../block-editor/src/store/test/reducer.js | 36 +++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js index 7576b95866306..35277dc9b3576 100644 --- a/packages/block-editor/src/store/test/private-actions.js +++ b/packages/block-editor/src/store/test/private-actions.js @@ -6,6 +6,7 @@ import { showBlockInterface, expandBlock, __experimentalUpdateSettings, + setInserterInsertionPoint, setOpenedBlockSettingsMenu, startDragging, stopDragging, @@ -123,4 +124,18 @@ describe( 'private actions', () => { } ); } ); } ); + + describe( 'setInserterInsertionPoint', () => { + it( 'should return the SET_INSERTER_INSERTION_POINT action', () => { + expect( + setInserterInsertionPoint( { + rootClientId: '', + insertionIndex: '123', + } ) + ).toEqual( { + type: 'SET_INSERTER_INSERTION_POINT', + value: { rootClientId: '', insertionIndex: '123' }, + } ); + } ); + } ); } ); diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index cd472fa59ac72..ca7624bb606ad 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -29,6 +29,7 @@ import { preferences, blocksMode, insertionPoint, + inserterInsertionPoint, template, blockListSettings, lastBlockAttributesChange, @@ -3485,4 +3486,39 @@ describe( 'state', () => { expect( state ).toBe( null ); } ); } ); + + describe( 'inserterInsertionPoint', () => { + it( 'should default to null', () => { + const state = inserterInsertionPoint( undefined, {} ); + + expect( state ).toBe( null ); + } ); + + it( 'should set inserter insertion point', () => { + const state = inserterInsertionPoint( null, { + type: 'SET_INSERTER_INSERTION_POINT', + value: { + rootClientId: 'clientId1', + insertionIndex: 4, + }, + } ); + + expect( state ).toEqual( { + rootClientId: 'clientId1', + insertionIndex: 4, + } ); + } ); + + it( 'should clear the inserter insertion point on block selection', () => { + const original = deepFreeze( { + rootClientId: 'clientId1', + insertionIndex: 4, + } ); + const state = inserterInsertionPoint( original, { + type: 'SELECT_BLOCK', + } ); + + expect( state ).toBe( null ); + } ); + } ); } ); From 5959cd84fba58f37cfbb4db0b9f420d53342b995 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 11 Sep 2024 11:24:06 -0500 Subject: [PATCH 11/25] Use inserterInsertionPoint for zoom out inserters and zoom out separator --- .../block-list/zoom-out-separator.js | 50 ++++++++----------- .../block-tools/zoom-out-mode-inserters.js | 9 ++-- 2 files changed, 27 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index be5af54963060..a6e5684f06435 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -26,29 +26,23 @@ export function ZoomOutSeparator( { position = 'top', } ) { const [ isDraggedOver, setIsDraggedOver ] = useState( false ); - const { - sectionRootClientId, - sectionClientIds, - blockInsertionPoint, - blockInsertionPointVisible, - } = useSelect( ( select ) => { - const { - getBlockInsertionPoint, - getBlockOrder, - isBlockInsertionPointVisible, - getSectionRootClientId, - } = unlock( select( blockEditorStore ) ); + const { sectionRootClientId, sectionClientIds, inserterInsertionPoint } = + useSelect( ( select ) => { + const { + getInserterInsertionPoint, + getBlockOrder, + getSectionRootClientId, + } = unlock( select( blockEditorStore ) ); - const root = getSectionRootClientId(); - const sectionRootClientIds = getBlockOrder( root ); - return { - sectionRootClientId: root, - sectionClientIds: sectionRootClientIds, - blockOrder: getBlockOrder( root ), - blockInsertionPoint: getBlockInsertionPoint(), - blockInsertionPointVisible: isBlockInsertionPointVisible(), - }; - }, [] ); + const root = getSectionRootClientId(); + const sectionRootClientIds = getBlockOrder( root ); + return { + sectionRootClientId: root, + sectionClientIds: sectionRootClientIds, + blockOrder: getBlockOrder( root ), + inserterInsertionPoint: getInserterInsertionPoint(), + }; + }, [] ); const isReducedMotion = useReducedMotion(); @@ -63,21 +57,21 @@ export function ZoomOutSeparator( { sectionClientIds && sectionClientIds.includes( clientId ); - if ( ! isSectionBlock ) { + if ( ! isSectionBlock || ! inserterInsertionPoint ) { return null; } if ( position === 'top' ) { isVisible = - blockInsertionPointVisible && - blockInsertionPoint.index === 0 && - clientId === sectionClientIds[ blockInsertionPoint.index ]; + inserterInsertionPoint.insertionIndex === 0 && + clientId === + sectionClientIds[ inserterInsertionPoint.insertionIndex ]; } if ( position === 'bottom' ) { isVisible = - blockInsertionPointVisible && - clientId === sectionClientIds[ blockInsertionPoint.index - 1 ]; + clientId === + sectionClientIds[ inserterInsertionPoint.insertionIndex - 1 ]; } return ( 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 f5eb11822ca84..680cbcefe3b99 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 @@ -16,7 +16,7 @@ function ZoomOutModeInserters() { const [ isReady, setIsReady ] = useState( false ); const { hasSelection, - blockInsertionPoint, + inserterInsertionPoint, blockOrder, blockInsertionPointVisible, setInserterIsOpened, @@ -26,7 +26,7 @@ function ZoomOutModeInserters() { } = useSelect( ( select ) => { const { getSettings, - getBlockInsertionPoint, + getInserterInsertionPoint, getBlockOrder, getSelectionStart, getSelectedBlockClientId, @@ -39,7 +39,7 @@ function ZoomOutModeInserters() { return { hasSelection: !! getSelectionStart().clientId, - blockInsertionPoint: getBlockInsertionPoint(), + inserterInsertionPoint: getInserterInsertionPoint(), blockOrder: getBlockOrder( root ), blockInsertionPointVisible: isBlockInsertionPointVisible(), sectionRootClientId: root, @@ -70,7 +70,8 @@ function ZoomOutModeInserters() { return [ undefined, ...blockOrder ].map( ( clientId, index ) => { const shouldRenderInsertionPoint = - blockInsertionPointVisible && blockInsertionPoint.index === index; + blockInsertionPointVisible && + inserterInsertionPoint?.insertionIndex === index; const previousClientId = clientId; const nextClientId = blockOrder[ index ]; From 3705906c0ce80b8ba88af94d674e0d23ed5dcf5e Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 11 Sep 2024 12:45:47 -0500 Subject: [PATCH 12/25] Remove blockInsertionPointVisible from zoom out mode inserters --- .../block-tools/zoom-out-mode-inserters.js | 41 ++++++++----------- 1 file changed, 18 insertions(+), 23 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 680cbcefe3b99..41f4c0e780e5a 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 @@ -18,7 +18,6 @@ function ZoomOutModeInserters() { hasSelection, inserterInsertionPoint, blockOrder, - blockInsertionPointVisible, setInserterIsOpened, sectionRootClientId, selectedBlockClientId, @@ -31,7 +30,6 @@ function ZoomOutModeInserters() { getSelectionStart, getSelectedBlockClientId, getHoveredBlockClientId, - isBlockInsertionPointVisible, getSectionRootClientId, } = unlock( select( blockEditorStore ) ); @@ -41,7 +39,6 @@ function ZoomOutModeInserters() { hasSelection: !! getSelectionStart().clientId, inserterInsertionPoint: getInserterInsertionPoint(), blockOrder: getBlockOrder( root ), - blockInsertionPointVisible: isBlockInsertionPointVisible(), sectionRootClientId: root, setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened, @@ -50,7 +47,8 @@ function ZoomOutModeInserters() { }; }, [] ); - const { showInsertionPoint, setInserterInsertionPoint } = unlock( + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const { setInserterInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); @@ -70,7 +68,6 @@ function ZoomOutModeInserters() { return [ undefined, ...blockOrder ].map( ( clientId, index ) => { const shouldRenderInsertionPoint = - blockInsertionPointVisible && inserterInsertionPoint?.insertionIndex === index; const previousClientId = clientId; @@ -91,24 +88,22 @@ function ZoomOutModeInserters() { previousClientId={ previousClientId } nextClientId={ nextClientId } > - { ! shouldRenderInsertionPoint && ( - { - setInserterIsOpened( { - tab: 'patterns', - category: 'all', - } ); - setInserterInsertionPoint( { - rootClientId: sectionRootClientId, - insertionIndex: index, - } ); - showInsertionPoint( sectionRootClientId, index, { - operation: 'insert', - } ); - } } - /> - ) } + { + setInserterIsOpened( { + tab: 'patterns', + category: 'all', + } ); + setInserterInsertionPoint( { + rootClientId: sectionRootClientId, + insertionIndex: index, + } ); + } } + /> ); } ); From 72e8309f5e9fdd5a470b3150442b4f7fb939ebfc Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 11 Sep 2024 13:29:55 -0500 Subject: [PATCH 13/25] Fix dragging vertical displacement on insertion points --- .../block-list/zoom-out-separator.js | 66 ++++++++++++------- 1 file changed, 44 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index a6e5684f06435..ebb9c4f3f61a9 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -26,23 +26,32 @@ export function ZoomOutSeparator( { position = 'top', } ) { const [ isDraggedOver, setIsDraggedOver ] = useState( false ); - const { sectionRootClientId, sectionClientIds, inserterInsertionPoint } = - useSelect( ( select ) => { - const { - getInserterInsertionPoint, - getBlockOrder, - getSectionRootClientId, - } = unlock( select( blockEditorStore ) ); + const { + sectionRootClientId, + sectionClientIds, + inserterInsertionPoint, + blockInsertionPointVisible, + blockInsertionPoint, + } = useSelect( ( select ) => { + const { + getInserterInsertionPoint, + getBlockOrder, + getSectionRootClientId, + isBlockInsertionPointVisible, + getBlockInsertionPoint, + } = unlock( select( blockEditorStore ) ); - const root = getSectionRootClientId(); - const sectionRootClientIds = getBlockOrder( root ); - return { - sectionRootClientId: root, - sectionClientIds: sectionRootClientIds, - blockOrder: getBlockOrder( root ), - inserterInsertionPoint: getInserterInsertionPoint(), - }; - }, [] ); + const root = getSectionRootClientId(); + const sectionRootClientIds = getBlockOrder( root ); + return { + sectionRootClientId: root, + sectionClientIds: sectionRootClientIds, + blockOrder: getBlockOrder( root ), + inserterInsertionPoint: getInserterInsertionPoint(), + blockInsertionPoint: getBlockInsertionPoint(), + blockInsertionPointVisible: isBlockInsertionPointVisible(), + }; + }, [] ); const isReducedMotion = useReducedMotion(); @@ -57,21 +66,34 @@ export function ZoomOutSeparator( { sectionClientIds && sectionClientIds.includes( clientId ); - if ( ! isSectionBlock || ! inserterInsertionPoint ) { + if ( ! isSectionBlock ) { return null; } + const hasTopInserterInsertionPoint = + inserterInsertionPoint?.insertionIndex === 0 && + clientId === sectionClientIds[ inserterInsertionPoint.insertionIndex ]; + const hasBottomInserterInsertionPoint = + inserterInsertionPoint?.insertionIndex && + clientId === + sectionClientIds[ inserterInsertionPoint.insertionIndex - 1 ]; + // We want to show the zoom out separator in either of these conditions: + // 1. If the inserter has an insertion index set + // 2. We are dragging a pattern over an insertion point if ( position === 'top' ) { isVisible = - inserterInsertionPoint.insertionIndex === 0 && - clientId === - sectionClientIds[ inserterInsertionPoint.insertionIndex ]; + hasTopInserterInsertionPoint || + ( blockInsertionPointVisible && + blockInsertionPoint.index === 0 && + clientId === sectionClientIds[ blockInsertionPoint.index ] ); } if ( position === 'bottom' ) { isVisible = - clientId === - sectionClientIds[ inserterInsertionPoint.insertionIndex - 1 ]; + hasBottomInserterInsertionPoint || + ( blockInsertionPointVisible && + clientId === + sectionClientIds[ blockInsertionPoint.index - 1 ] ); } return ( From 355a0611516a81371c95df8b1859e5be80598e67 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 11 Sep 2024 14:13:07 -0500 Subject: [PATCH 14/25] Fix inserting at 0 index on zoom out mode --- .../block-list/zoom-out-separator.js | 3 +- .../block-tools/zoom-out-mode-inserters.js | 40 +++++++++++-------- .../inserter/hooks/use-insertion-point.js | 9 ++++- 3 files changed, 32 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index ebb9c4f3f61a9..0ce86afdcffad 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -74,7 +74,8 @@ export function ZoomOutSeparator( { inserterInsertionPoint?.insertionIndex === 0 && clientId === sectionClientIds[ inserterInsertionPoint.insertionIndex ]; const hasBottomInserterInsertionPoint = - inserterInsertionPoint?.insertionIndex && + inserterInsertionPoint && + inserterInsertionPoint.hasOwnProperty( 'insertionIndex' ) && clientId === sectionClientIds[ inserterInsertionPoint.insertionIndex - 1 ]; // We want to show the zoom out separator in either of these conditions: 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 41f4c0e780e5a..87c470973789f 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 @@ -18,6 +18,7 @@ function ZoomOutModeInserters() { hasSelection, inserterInsertionPoint, blockOrder, + blockInsertionPointVisible, setInserterIsOpened, sectionRootClientId, selectedBlockClientId, @@ -31,6 +32,7 @@ function ZoomOutModeInserters() { getSelectedBlockClientId, getHoveredBlockClientId, getSectionRootClientId, + isBlockInsertionPointVisible, } = unlock( select( blockEditorStore ) ); const root = getSectionRootClientId(); @@ -39,6 +41,7 @@ function ZoomOutModeInserters() { hasSelection: !! getSelectionStart().clientId, inserterInsertionPoint: getInserterInsertionPoint(), blockOrder: getBlockOrder( root ), + blockInsertionPointVisible: isBlockInsertionPointVisible(), sectionRootClientId: root, setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened, @@ -48,7 +51,7 @@ function ZoomOutModeInserters() { }, [] ); // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const { setInserterInsertionPoint } = unlock( + const { showInsertionPoint, setInserterInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); @@ -68,6 +71,7 @@ function ZoomOutModeInserters() { return [ undefined, ...blockOrder ].map( ( clientId, index ) => { const shouldRenderInsertionPoint = + blockInsertionPointVisible && inserterInsertionPoint?.insertionIndex === index; const previousClientId = clientId; @@ -88,22 +92,24 @@ function ZoomOutModeInserters() { previousClientId={ previousClientId } nextClientId={ nextClientId } > - { - setInserterIsOpened( { - tab: 'patterns', - category: 'all', - } ); - setInserterInsertionPoint( { - rootClientId: sectionRootClientId, - insertionIndex: index, - } ); - } } - /> + { ! shouldRenderInsertionPoint && ( + { + setInserterIsOpened( { + tab: 'patterns', + category: 'all', + } ); + setInserterInsertionPoint( { + rootClientId: sectionRootClientId, + insertionIndex: index, + } ); + showInsertionPoint( sectionRootClientId, index, { + operation: 'insert', + } ); + } } + /> + ) } ); } ); diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index cee4d1c4b05ee..ee2e8ecedefa9 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -93,8 +93,13 @@ function useInsertionPoint( { if ( insertionIndex !== undefined ) { // Insert into a specific index. _destinationIndex = insertionIndex; - } else if ( insertionPoint?.insertionIndex ) { - _destinationRootClientId = insertionPoint?.rootClientId + } else if ( + insertionPoint && + insertionPoint.hasOwnProperty( 'insertionIndex' ) + ) { + _destinationRootClientId = insertionPoint.hasOwnProperty( + 'rootClientId' + ) ? insertionPoint.rootClientId : rootClientId; _destinationIndex = insertionPoint.insertionIndex; From 136c9a3f597771c1589f558c159337d24d350bfc Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 11 Sep 2024 15:28:47 -0500 Subject: [PATCH 15/25] Fix insertion point at root level --- .../src/components/inserter/hooks/use-insertion-point.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index ee2e8ecedefa9..d8db37d7d34f4 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -97,9 +97,7 @@ function useInsertionPoint( { insertionPoint && insertionPoint.hasOwnProperty( 'insertionIndex' ) ) { - _destinationRootClientId = insertionPoint.hasOwnProperty( - 'rootClientId' - ) + _destinationRootClientId = insertionPoint?.rootClientId ? insertionPoint.rootClientId : rootClientId; _destinationIndex = insertionPoint.insertionIndex; From 867641ebae30e8c2e66fba49e3c398e872fd2a79 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 12 Sep 2024 10:33:04 -0500 Subject: [PATCH 16/25] Deprecate rootClientId and insertionIndex on setIsInserterOpened --- .../reference-guides/data/data-core-editor.md | 2 + packages/editor/src/store/actions.js | 53 ++++++++++++++----- 2 files changed, 42 insertions(+), 13 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 57c0892ed60f6..c95973e750c65 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1420,6 +1420,8 @@ Returns an action object used to open/close the inserter. _Parameters_ - _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object. +- _value.rootClientId_ `string`: Deprecated. The root client ID to insert at. +- _value.insertionIndex_ `number`: Deprecated. The index to insert at. - _value.filterValue_ `string`: A query to filter the inserter results. - _value.onSelect_ `Function`: A callback when an item is selected. - _value.tab_ `string`: The tab to open in the inserter. diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 4e68d49259850..af652a62708ab 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -720,23 +720,50 @@ export function removeEditorPanel( panelName ) { /** * Returns an action object used to open/close the inserter. * - * @param {boolean|Object} value Whether the inserter should be - * opened (true) or closed (false). - * To specify an insertion point, - * use an object. - * @param {string} value.filterValue A query to filter the inserter results. - * @param {Function} value.onSelect A callback when an item is selected. - * @param {string} value.tab The tab to open in the inserter. - * @param {string} value.category The category to initialize in the inserter. + * @param {boolean|Object} value Whether the inserter should be + * opened (true) or closed (false). + * To specify an insertion point, + * use an object. + * @param {string} value.rootClientId Deprecated. The root client ID to insert at. + * @param {number} value.insertionIndex Deprecated. The index to insert at. + * @param {string} value.filterValue A query to filter the inserter results. + * @param {Function} value.onSelect A callback when an item is selected. + * @param {string} value.tab The tab to open in the inserter. + * @param {string} value.category The category to initialize in the inserter. * * @return {Object} Action object. */ -export function setIsInserterOpened( value ) { - return { - type: 'SET_IS_INSERTER_OPENED', - value, +export const setIsInserterOpened = + ( value ) => + ( { dispatch, registry } ) => { + if ( + typeof value === 'object' && + value.hasOwnProperty( 'rootClientId' ) && + value.hasOwnProperty( 'insertionIndex' ) + ) { + deprecated( + 'rootClientId and insertionIndex are deprecated from the editor store state.', + { + since: '6.7', + version: '6.9', + alternative: + 'wp.data.dispatch( "core/block-editor" ).setInserterInsertionPoint', + } + ); + + return registry + .dispatch( blockEditorStore ) + .setInserterInsertionPoint( { + rootClientId: value.rootClientId, + insertionIndex: value.insertionIndex, + } ); + } + + dispatch( { + type: 'SET_IS_INSERTER_OPENED', + value, + } ); }; -} /** * Returns an action object used to open/close the list view. From bfff2d4a126cc466113c1a1e0954ca2c6ee07e4d Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 13 Sep 2024 14:46:40 -0500 Subject: [PATCH 17/25] Renaming Insertion API for clarity - old block-editor insertionPoint becomes insertionCue (for the reducer and state value) - which opens up insertionPoint to be the real insertion point - so we can change getInserterInsertionPoint to getInsertionPoint - rename editor private getInsertionPoint to getInserter to more accurately describe its state - remove unnecessary deprecation --- .../block-tools/zoom-out-mode-inserters.js | 6 +++--- .../inserter/hooks/use-insertion-point.js | 8 ++++---- .../src/components/inserter/quick-inserter.js | 6 ++---- .../block-editor/src/store/private-actions.js | 8 ++++---- .../src/store/private-selectors.js | 4 ++-- packages/block-editor/src/store/reducer.js | 12 +++++------ packages/block-editor/src/store/selectors.js | 10 +++++----- .../src/store/test/private-actions.js | 14 ++++++------- .../block-editor/src/store/test/reducer.js | 2 +- packages/edit-post/src/store/selectors.js | 2 +- packages/edit-site/src/store/selectors.js | 2 +- .../src/components/inserter-sidebar/index.js | 14 ++++++------- packages/editor/src/store/actions.js | 20 ++++--------------- .../editor/src/store/private-selectors.js | 4 ++-- 14 files changed, 49 insertions(+), 63 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 87c470973789f..6e1568638b586 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 @@ -51,7 +51,7 @@ function ZoomOutModeInserters() { }, [] ); // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const { showInsertionPoint, setInserterInsertionPoint } = unlock( + const { showInsertionPoint, setInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); @@ -100,9 +100,9 @@ function ZoomOutModeInserters() { tab: 'patterns', category: 'all', } ); - setInserterInsertionPoint( { + setInsertionPoint( { rootClientId: sectionRootClientId, - insertionIndex: index, + index, } ); showInsertionPoint( sectionRootClientId, index, { operation: 'insert', diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index d8db37d7d34f4..de814152c620b 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -83,24 +83,24 @@ function useInsertionPoint( { getBlockRootClientId, getBlockIndex, getBlockOrder, - getInserterInsertionPoint, + getInsertionPoint, } = unlock( select( blockEditorStore ) ); const selectedBlockClientId = getSelectedBlockClientId(); let _destinationRootClientId = rootClientId; let _destinationIndex; - const insertionPoint = getInserterInsertionPoint(); + const insertionPoint = getInsertionPoint(); if ( insertionIndex !== undefined ) { // Insert into a specific index. _destinationIndex = insertionIndex; } else if ( insertionPoint && - insertionPoint.hasOwnProperty( 'insertionIndex' ) + insertionPoint.hasOwnProperty( 'index' ) ) { _destinationRootClientId = insertionPoint?.rootClientId ? insertionPoint.rootClientId : rootClientId; - _destinationIndex = insertionPoint.insertionIndex; + _destinationIndex = insertionPoint.index; } else if ( clientId ) { // Insert after a specific client ID. _destinationIndex = getBlockIndex( clientId ); diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 4c313d28fd517..a6a681a467339 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -84,9 +84,7 @@ export default function QuickInserter( { } }, [ setInserterIsOpened ] ); - const { setInserterInsertionPoint } = unlock( - useDispatch( blockEditorStore ) - ); + const { setInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); // When clicking Browse All select the appropriate block so as // the insertion point can work as expected. @@ -95,7 +93,7 @@ export default function QuickInserter( { filterValue, onSelect, } ); - setInserterInsertionPoint( { rootClientId, insertionIndex } ); + setInsertionPoint( { rootClientId, index: insertionIndex } ); }; let maxBlockPatterns = 0; diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 1e335e28befa9..5571db0ce9106 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -361,14 +361,14 @@ export function expandBlock( clientId ) { /** * @param {Object} value - * @param {string} value.rootClientId The root client ID to insert at. - * @param {number} value.insertionIndex The index to insert at. + * @param {string} value.rootClientId The root client ID to insert at. + * @param {number} value.index The index to insert at. * * @return {Object} Action object. */ -export function setInserterInsertionPoint( value ) { +export function setInsertionPoint( value ) { return { - type: 'SET_INSERTER_INSERTION_POINT', + type: 'SET_INSERTION_POINT', value, }; } diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 19f040318276c..14d344f4523fd 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -705,6 +705,6 @@ export function getClosestAllowedInsertionPointForPattern( * @param {Object} state * @return {Object} Of where the insertion point in the block editor is or null if none is set. */ -export function getInserterInsertionPoint( state ) { - return state.inserterInsertionPoint; +export function getInsertionPoint( state ) { + return state.insertionPoint; } diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 59ab2411b0340..f6445f8a3681c 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1601,7 +1601,7 @@ export function blocksMode( state = {}, action ) { * * @return {Object} Updated state. */ -export function insertionPoint( state = null, action ) { +export function insertionCue( state = null, action ) { switch ( action.type ) { case 'SHOW_INSERTION_POINT': { const { @@ -2066,7 +2066,7 @@ export function hoveredBlockClientId( state = false, action ) { * @param {boolean} state Current state. * @param {Object} action Dispatched action. * - * @return {boolean} Updated state. + * @return {number} Updated state. */ export function zoomLevel( state = 100, action ) { switch ( action.type ) { @@ -2085,11 +2085,11 @@ export function zoomLevel( state = 100, action ) { * @param {boolean} state Current state. * @param {Object} action Dispatched action. * - * @return {boolean} Updated state. + * @return {Object} Updated state. */ -export function inserterInsertionPoint( state = false, action ) { +export function insertionPoint( state = null, action ) { switch ( action.type ) { - case 'SET_INSERTER_INSERTION_POINT': + case 'SET_INSERTION_POINT': return action.value; case 'SELECT_BLOCK': return null; @@ -2110,8 +2110,8 @@ const combinedReducers = combineReducers( { initialPosition, blocksMode, blockListSettings, - inserterInsertionPoint, insertionPoint, + insertionCue, template, settings, preferences, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index a73785edfefd1..9a216084d515a 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1466,11 +1466,11 @@ export const getBlockInsertionPoint = createSelector( let rootClientId, index; const { - insertionPoint, + insertionCue, selection: { selectionEnd }, } = state; - if ( insertionPoint !== null ) { - return insertionPoint; + if ( insertionCue !== null ) { + return insertionCue; } const { clientId } = selectionEnd; @@ -1485,7 +1485,7 @@ export const getBlockInsertionPoint = createSelector( return { rootClientId, index }; }, ( state ) => [ - state.insertionPoint, + state.insertionCue, state.selection.selectionEnd.clientId, state.blocks.parents, state.blocks.order, @@ -1500,7 +1500,7 @@ export const getBlockInsertionPoint = createSelector( * @return {?boolean} Whether the insertion point is visible or not. */ export function isBlockInsertionPointVisible( state ) { - return state.insertionPoint !== null; + return state.insertionCue !== null; } /** diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js index 35277dc9b3576..d54a519c9056b 100644 --- a/packages/block-editor/src/store/test/private-actions.js +++ b/packages/block-editor/src/store/test/private-actions.js @@ -6,7 +6,7 @@ import { showBlockInterface, expandBlock, __experimentalUpdateSettings, - setInserterInsertionPoint, + setInsertionPoint, setOpenedBlockSettingsMenu, startDragging, stopDragging, @@ -125,16 +125,16 @@ describe( 'private actions', () => { } ); } ); - describe( 'setInserterInsertionPoint', () => { - it( 'should return the SET_INSERTER_INSERTION_POINT action', () => { + describe( 'setInsertionPoint', () => { + it( 'should return the SET_INSERTION_POINT action', () => { expect( - setInserterInsertionPoint( { + setInsertionPoint( { rootClientId: '', - insertionIndex: '123', + index: '123', } ) ).toEqual( { - type: 'SET_INSERTER_INSERTION_POINT', - value: { rootClientId: '', insertionIndex: '123' }, + type: 'SET_INSERTION_POINT', + value: { rootClientId: '', index: '123' }, } ); } ); } ); diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index ca7624bb606ad..78306a6267725 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -3496,7 +3496,7 @@ describe( 'state', () => { it( 'should set inserter insertion point', () => { const state = inserterInsertionPoint( null, { - type: 'SET_INSERTER_INSERTION_POINT', + type: 'SET_INSERTION_POINT', value: { rootClientId: 'clientId1', insertionIndex: 4, diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index 5bea6e7d35eb6..8d85249e8100b 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -506,7 +506,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector( version: '6.7', } ); - return unlock( select( editorStore ) ).getInsertionPoint(); + return unlock( select( editorStore ) ).getInserter(); } ); diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 3f7bbea0be7d2..ddef4a71d0a91 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -213,7 +213,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector( version: '6.7', } ); - return unlock( select( editorStore ) ).getInsertionPoint(); + return unlock( select( editorStore ) ).getInserter(); } ); diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index e436a529bde82..5cace042fae58 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -24,13 +24,13 @@ export default function InserterSidebar() { const { blockSectionRootClientId, inserterSidebarToggleRef, - insertionPoint, + inserter, showMostUsedBlocks, sidebarIsOpened, } = useSelect( ( select ) => { const { getInserterSidebarToggleRef, - getInsertionPoint, + getInserter, isPublishSidebarOpened, } = unlock( select( editorStore ) ); const { @@ -52,7 +52,7 @@ export default function InserterSidebar() { }; return { inserterSidebarToggleRef: getInserterSidebarToggleRef(), - insertionPoint: getInsertionPoint(), + inserter: getInserter(), showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ), blockSectionRootClientId: getBlockSectionRootClientId(), sidebarIsOpened: !! ( @@ -89,10 +89,10 @@ export default function InserterSidebar() { showInserterHelpPanel shouldFocusBlock={ isMobileViewport } rootClientId={ blockSectionRootClientId } - onSelect={ insertionPoint.onSelect } - __experimentalInitialTab={ insertionPoint.tab } - __experimentalInitialCategory={ insertionPoint.category } - __experimentalFilterValue={ insertionPoint.filterValue } + onSelect={ inserter.onSelect } + __experimentalInitialTab={ inserter.tab } + __experimentalInitialCategory={ inserter.category } + __experimentalFilterValue={ inserter.filterValue } onPatternCategorySelection={ sidebarIsOpened ? () => disableComplementaryArea( 'core' ) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index af652a62708ab..d5c6f09a54911 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -741,22 +741,10 @@ export const setIsInserterOpened = value.hasOwnProperty( 'rootClientId' ) && value.hasOwnProperty( 'insertionIndex' ) ) { - deprecated( - 'rootClientId and insertionIndex are deprecated from the editor store state.', - { - since: '6.7', - version: '6.9', - alternative: - 'wp.data.dispatch( "core/block-editor" ).setInserterInsertionPoint', - } - ); - - return registry - .dispatch( blockEditorStore ) - .setInserterInsertionPoint( { - rootClientId: value.rootClientId, - insertionIndex: value.insertionIndex, - } ); + return registry.dispatch( blockEditorStore ).setInsertionPoint( { + rootClientId: value.rootClientId, + index: value.insertionIndex, + } ); } dispatch( { diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index 357a7344f631d..9bc065436c10b 100644 --- a/packages/editor/src/store/private-selectors.js +++ b/packages/editor/src/store/private-selectors.js @@ -37,13 +37,13 @@ const EMPTY_INSERTION_POINT = { }; /** - * Get the insertion point for the inserter. + * Get the inserter. * * @param {Object} state Global application state. * * @return {Object} The root client ID, index to insert at and starting filter value. */ -export const getInsertionPoint = createRegistrySelector( ( select ) => +export const getInserter = createRegistrySelector( ( select ) => createSelector( ( state ) => { if ( typeof state.blockInserterPanel === 'object' ) { From 4f262d13d7b9536c4ed9539e2136119b24100d33 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 13 Sep 2024 14:55:43 -0500 Subject: [PATCH 18/25] Catch missed renamings --- .../block-list/zoom-out-separator.js | 25 +++++++++---------- .../block-tools/zoom-out-mode-inserters.js | 9 +++---- .../block-editor/src/store/test/reducer.js | 24 +++++++++--------- 3 files changed, 28 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index 0ce86afdcffad..984e29546c213 100644 --- a/packages/block-editor/src/components/block-list/zoom-out-separator.js +++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js @@ -29,12 +29,12 @@ export function ZoomOutSeparator( { const { sectionRootClientId, sectionClientIds, - inserterInsertionPoint, + insertionPoint, blockInsertionPointVisible, blockInsertionPoint, } = useSelect( ( select ) => { const { - getInserterInsertionPoint, + getInsertionPoint, getBlockOrder, getSectionRootClientId, isBlockInsertionPointVisible, @@ -47,7 +47,7 @@ export function ZoomOutSeparator( { sectionRootClientId: root, sectionClientIds: sectionRootClientIds, blockOrder: getBlockOrder( root ), - inserterInsertionPoint: getInserterInsertionPoint(), + insertionPoint: getInsertionPoint(), blockInsertionPoint: getBlockInsertionPoint(), blockInsertionPointVisible: isBlockInsertionPointVisible(), }; @@ -70,20 +70,19 @@ export function ZoomOutSeparator( { return null; } - const hasTopInserterInsertionPoint = - inserterInsertionPoint?.insertionIndex === 0 && - clientId === sectionClientIds[ inserterInsertionPoint.insertionIndex ]; - const hasBottomInserterInsertionPoint = - inserterInsertionPoint && - inserterInsertionPoint.hasOwnProperty( 'insertionIndex' ) && - clientId === - sectionClientIds[ inserterInsertionPoint.insertionIndex - 1 ]; + const hasTopInsertionPoint = + insertionPoint?.index === 0 && + clientId === sectionClientIds[ insertionPoint.index ]; + const hasBottomInsertionPoint = + insertionPoint && + insertionPoint.hasOwnProperty( 'index' ) && + clientId === sectionClientIds[ insertionPoint.index - 1 ]; // We want to show the zoom out separator in either of these conditions: // 1. If the inserter has an insertion index set // 2. We are dragging a pattern over an insertion point if ( position === 'top' ) { isVisible = - hasTopInserterInsertionPoint || + hasTopInsertionPoint || ( blockInsertionPointVisible && blockInsertionPoint.index === 0 && clientId === sectionClientIds[ blockInsertionPoint.index ] ); @@ -91,7 +90,7 @@ export function ZoomOutSeparator( { if ( position === 'bottom' ) { isVisible = - hasBottomInserterInsertionPoint || + hasBottomInsertionPoint || ( blockInsertionPointVisible && clientId === sectionClientIds[ blockInsertionPoint.index - 1 ] ); 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 6e1568638b586..72df00bd4cfbe 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 @@ -16,7 +16,7 @@ function ZoomOutModeInserters() { const [ isReady, setIsReady ] = useState( false ); const { hasSelection, - inserterInsertionPoint, + insertionPoint, blockOrder, blockInsertionPointVisible, setInserterIsOpened, @@ -26,7 +26,7 @@ function ZoomOutModeInserters() { } = useSelect( ( select ) => { const { getSettings, - getInserterInsertionPoint, + getInsertionPoint, getBlockOrder, getSelectionStart, getSelectedBlockClientId, @@ -39,7 +39,7 @@ function ZoomOutModeInserters() { return { hasSelection: !! getSelectionStart().clientId, - inserterInsertionPoint: getInserterInsertionPoint(), + insertionPoint: getInsertionPoint(), blockOrder: getBlockOrder( root ), blockInsertionPointVisible: isBlockInsertionPointVisible(), sectionRootClientId: root, @@ -71,8 +71,7 @@ function ZoomOutModeInserters() { return [ undefined, ...blockOrder ].map( ( clientId, index ) => { const shouldRenderInsertionPoint = - blockInsertionPointVisible && - inserterInsertionPoint?.insertionIndex === index; + blockInsertionPointVisible && insertionPoint?.index === index; const previousClientId = clientId; const nextClientId = blockOrder[ index ]; diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 78306a6267725..64f529dc8e0c2 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -28,8 +28,8 @@ import { isMultiSelecting, preferences, blocksMode, + insertionCue, insertionPoint, - inserterInsertionPoint, template, blockListSettings, lastBlockAttributesChange, @@ -2379,15 +2379,15 @@ describe( 'state', () => { } ); } ); - describe( 'insertionPoint', () => { + describe( 'insertionCue', () => { it( 'should default to null', () => { - const state = insertionPoint( undefined, {} ); + const state = insertionCue( undefined, {} ); expect( state ).toBe( null ); } ); it( 'should set insertion point', () => { - const state = insertionPoint( null, { + const state = insertionCue( null, { type: 'SHOW_INSERTION_POINT', rootClientId: 'clientId1', index: 0, @@ -2404,7 +2404,7 @@ describe( 'state', () => { rootClientId: 'clientId1', index: 0, } ); - const state = insertionPoint( original, { + const state = insertionCue( original, { type: 'HIDE_INSERTION_POINT', } ); @@ -3487,34 +3487,34 @@ describe( 'state', () => { } ); } ); - describe( 'inserterInsertionPoint', () => { + describe( 'insertionPoint', () => { it( 'should default to null', () => { - const state = inserterInsertionPoint( undefined, {} ); + const state = insertionPoint( undefined, {} ); expect( state ).toBe( null ); } ); it( 'should set inserter insertion point', () => { - const state = inserterInsertionPoint( null, { + const state = insertionPoint( null, { type: 'SET_INSERTION_POINT', value: { rootClientId: 'clientId1', - insertionIndex: 4, + index: 4, }, } ); expect( state ).toEqual( { rootClientId: 'clientId1', - insertionIndex: 4, + index: 4, } ); } ); it( 'should clear the inserter insertion point on block selection', () => { const original = deepFreeze( { rootClientId: 'clientId1', - insertionIndex: 4, + index: 4, } ); - const state = inserterInsertionPoint( original, { + const state = insertionPoint( original, { type: 'SELECT_BLOCK', } ); From 24a2aec47299bb17ca4736c23e35f16fa329cbc0 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 13 Sep 2024 15:24:27 -0500 Subject: [PATCH 19/25] More renamings and clarification --- docs/reference-guides/data/data-core-block-editor.md | 4 ++-- packages/block-editor/src/store/private-selectors.js | 4 ++-- packages/block-editor/src/store/selectors.js | 5 ++--- packages/block-editor/src/store/test/reducer.js | 4 ++-- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 4b3ca78f74d29..956e8dd010581 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -262,7 +262,7 @@ _Returns_ ### getBlockInsertionPoint -Returns the insertion point, the index at which the new inserted block would be placed. Defaults to the last index. +Returns the location of the insertion cue. Defaults to the last index. _Parameters_ @@ -982,7 +982,7 @@ _Returns_ ### isBlockInsertionPointVisible -Returns true if we should show the block insertion point. +Returns true if the block insertion point is visible. _Parameters_ diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 14d344f4523fd..b216a8199ad9d 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -700,10 +700,10 @@ export function getClosestAllowedInsertionPointForPattern( } /** - * Where the inserter should insert into. + * Where the point where the next block will be inserted into. * * @param {Object} state - * @return {Object} Of where the insertion point in the block editor is or null if none is set. + * @return {Object} where the insertion point in the block editor is or null if none is set. */ export function getInsertionPoint( state ) { return state.insertionPoint; diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 9a216084d515a..7bb002661565b 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1454,8 +1454,7 @@ export function isCaretWithinFormattedText() { } /** - * Returns the insertion point, the index at which the new inserted block would - * be placed. Defaults to the last index. + * Returns the location of the insertion cue. Defaults to the last index. * * @param {Object} state Editor state. * @@ -1493,7 +1492,7 @@ export const getBlockInsertionPoint = createSelector( ); /** - * Returns true if we should show the block insertion point. + * Returns true if the block insertion point is visible. * * @param {Object} state Global application state. * diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 64f529dc8e0c2..1f1b9a9143d98 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -3494,7 +3494,7 @@ describe( 'state', () => { expect( state ).toBe( null ); } ); - it( 'should set inserter insertion point', () => { + it( 'should set insertion point', () => { const state = insertionPoint( null, { type: 'SET_INSERTION_POINT', value: { @@ -3509,7 +3509,7 @@ describe( 'state', () => { } ); } ); - it( 'should clear the inserter insertion point on block selection', () => { + it( 'should clear the insertion point on block selection', () => { const original = deepFreeze( { rootClientId: 'clientId1', index: 4, From 8d6410c11a5fb1072e0cc4e764b0c32c9818733b Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 25 Sep 2024 15:52:32 -0500 Subject: [PATCH 20/25] Fix logic and missing private function in editor store --- packages/editor/src/store/actions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index d5c6f09a54911..34a9621d0324f 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -26,7 +26,7 @@ import { getNotificationArgumentsForSaveFail, getNotificationArgumentsForTrashFail, } from './utils/notice-builder'; - +import { unlock } from '../lock-unlock'; /** * Returns an action generator used in signalling that editor has initialized with * the specified post object and editor settings. @@ -741,7 +741,7 @@ export const setIsInserterOpened = value.hasOwnProperty( 'rootClientId' ) && value.hasOwnProperty( 'insertionIndex' ) ) { - return registry.dispatch( blockEditorStore ).setInsertionPoint( { + unlock( registry.dispatch( blockEditorStore ) ).setInsertionPoint( { rootClientId: value.rootClientId, index: value.insertionIndex, } ); From 28e1596a4b9c74f694b52170b5b9cca301b99526 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 25 Sep 2024 16:02:35 -0500 Subject: [PATCH 21/25] Fallback to using setInserterIsOpened if already in use --- docs/reference-guides/data/data-core-editor.md | 4 ++-- .../src/components/block-tools/zoom-out-mode-inserters.js | 8 ++------ .../src/components/inserter/quick-inserter.js | 8 +++----- packages/editor/src/store/actions.js | 4 ++-- 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index c95973e750c65..a4c1a59f0c423 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1420,8 +1420,8 @@ Returns an action object used to open/close the inserter. _Parameters_ - _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object. -- _value.rootClientId_ `string`: Deprecated. The root client ID to insert at. -- _value.insertionIndex_ `number`: Deprecated. The index to insert at. +- _value.rootClientId_ `string`: The root client ID to insert at. +- _value.insertionIndex_ `number`: The index to insert at. - _value.filterValue_ `string`: A query to filter the inserter results. - _value.onSelect_ `Function`: A callback when an item is selected. - _value.tab_ `string`: The tab to open in the inserter. 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 72df00bd4cfbe..fdeb823fdd5e8 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 @@ -51,9 +51,7 @@ function ZoomOutModeInserters() { }, [] ); // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const { showInsertionPoint, setInsertionPoint } = unlock( - useDispatch( blockEditorStore ) - ); + const { showInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); // Defer the initial rendering to avoid the jumps due to the animation. useEffect( () => { @@ -98,10 +96,8 @@ function ZoomOutModeInserters() { setInserterIsOpened( { tab: 'patterns', category: 'all', - } ); - setInsertionPoint( { rootClientId: sectionRootClientId, - index, + insertionIndex: index, } ); showInsertionPoint( sectionRootClientId, index, { operation: 'insert', diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index a6a681a467339..7c7f836842b41 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -9,7 +9,7 @@ import clsx from 'clsx'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Button, SearchControl } from '@wordpress/components'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -19,7 +19,6 @@ import useInsertionPoint from './hooks/use-insertion-point'; import usePatternsState from './hooks/use-patterns-state'; import useBlockTypesState from './hooks/use-block-types-state'; import { store as blockEditorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; const SEARCH_THRESHOLD = 6; const SHOWN_BLOCK_TYPES = 6; @@ -84,16 +83,15 @@ export default function QuickInserter( { } }, [ setInserterIsOpened ] ); - const { setInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); - // When clicking Browse All select the appropriate block so as // the insertion point can work as expected. const onBrowseAll = () => { setInserterIsOpened( { filterValue, onSelect, + rootClientId, + insertionIndex, } ); - setInsertionPoint( { rootClientId, index: insertionIndex } ); }; let maxBlockPatterns = 0; diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 34a9621d0324f..4b519a9d8f6cc 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -724,8 +724,8 @@ export function removeEditorPanel( panelName ) { * opened (true) or closed (false). * To specify an insertion point, * use an object. - * @param {string} value.rootClientId Deprecated. The root client ID to insert at. - * @param {number} value.insertionIndex Deprecated. The index to insert at. + * @param {string} value.rootClientId The root client ID to insert at. + * @param {number} value.insertionIndex The index to insert at. * @param {string} value.filterValue A query to filter the inserter results. * @param {Function} value.onSelect A callback when an item is selected. * @param {string} value.tab The tab to open in the inserter. From a21fe7769ff0eaa19293c1323e3e3792c86bedd7 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 26 Sep 2024 10:07:41 -0500 Subject: [PATCH 22/25] Move actions test within reducer to actions test and test with selectors as well --- packages/editor/src/store/actions.js | 2 +- packages/editor/src/store/test/actions.js | 76 +++++++++++++++++++++++ packages/editor/src/store/test/reducer.js | 22 ------- 3 files changed, 77 insertions(+), 23 deletions(-) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 4b519a9d8f6cc..14926b8591cda 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -747,7 +747,7 @@ export const setIsInserterOpened = } ); } - dispatch( { + return dispatch( { type: 'SET_IS_INSERTER_OPENED', value, } ); diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js index fae30c6fc271e..206c60a159d04 100644 --- a/packages/editor/src/store/test/actions.js +++ b/packages/editor/src/store/test/actions.js @@ -576,4 +576,80 @@ describe( 'Editor actions', () => { ).toBe( true ); } ); } ); + + describe( 'setIsInserterOpened', () => { + it( 'should open and close the inserter', () => { + const registry = createRegistryWithStores(); + + registry.dispatch( editorStore ).setIsInserterOpened( true ); + + expect( registry.select( editorStore ).isInserterOpened() ).toBe( + true + ); + + registry.dispatch( editorStore ).setIsInserterOpened( false ); + + expect( registry.select( editorStore ).isInserterOpened() ).toBe( + false + ); + } ); + + it( 'the list view should close when the inserter is opened', () => { + const registry = createRegistryWithStores(); + + registry.dispatch( editorStore ).setIsListViewOpened( true ); + expect( registry.select( editorStore ).isListViewOpened() ).toBe( + true + ); + expect( registry.select( editorStore ).isInserterOpened() ).toBe( + false + ); + + registry.dispatch( editorStore ).setIsInserterOpened( true ); + expect( registry.select( editorStore ).isInserterOpened() ).toBe( + true + ); + expect( registry.select( editorStore ).isListViewOpened() ).toBe( + false + ); + } ); + } ); + + describe( 'setIsListViewOpened', () => { + it( 'should open and close the list view', () => { + const registry = createRegistryWithStores(); + + registry.dispatch( editorStore ).setIsListViewOpened( true ); + + expect( registry.select( editorStore ).isListViewOpened() ).toBe( + true + ); + + registry.dispatch( editorStore ).setIsListViewOpened( false ); + + expect( registry.select( editorStore ).isListViewOpened() ).toBe( + false + ); + } ); + + it( 'the inserter should close when the list view is opened', () => { + const registry = createRegistryWithStores(); + + registry.dispatch( editorStore ).setIsInserterOpened( true ); + expect( registry.select( editorStore ).isInserterOpened() ).toBe( + true + ); + expect( registry.select( editorStore ).isListViewOpened() ).toBe( + false + ); + + registry.dispatch( editorStore ).setIsListViewOpened( true ); + expect( registry.select( editorStore ).isListViewOpened() ).toBe( + true + ); + expect( registry.select( editorStore ).isInserterOpened() ).toBe( + false + ); + } ); + } ); } ); diff --git a/packages/editor/src/store/test/reducer.js b/packages/editor/src/store/test/reducer.js index b4fd013c6b4d4..3971ad30c9de7 100644 --- a/packages/editor/src/store/test/reducer.js +++ b/packages/editor/src/store/test/reducer.js @@ -18,7 +18,6 @@ import { blockInserterPanel, listViewPanel, } from '../reducer'; -import { setIsInserterOpened } from '../actions'; describe( 'state', () => { describe( 'hasSameKeys()', () => { @@ -298,15 +297,6 @@ describe( 'state', () => { expect( blockInserterPanel( true, {} ) ).toBe( true ); } ); - it( 'should set the open state of the inserter panel', () => { - expect( - blockInserterPanel( false, setIsInserterOpened( true ) ) - ).toBe( true ); - expect( - blockInserterPanel( true, setIsInserterOpened( false ) ) - ).toBe( false ); - } ); - it( 'should close the inserter when opening the list view panel', () => { expect( blockInserterPanel( true, { @@ -349,17 +339,5 @@ describe( 'state', () => { } ) ).toBe( false ); } ); - - it( 'should close the list view when opening the inserter panel', () => { - expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe( - false - ); - } ); - - it( 'should not change the state when closing the inserter panel', () => { - expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe( - true - ); - } ); } ); } ); From 98cf472ad9716ff785710d9cc47481dadb70dff3 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 26 Sep 2024 10:11:09 -0500 Subject: [PATCH 23/25] Remove unncessary return on dispatch --- packages/editor/src/store/actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 14926b8591cda..4b519a9d8f6cc 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -747,7 +747,7 @@ export const setIsInserterOpened = } ); } - return dispatch( { + dispatch( { type: 'SET_IS_INSERTER_OPENED', value, } ); From d037772f7005abc48e5d2c2fc7116629d7809c98 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 26 Sep 2024 10:45:10 -0500 Subject: [PATCH 24/25] Update block editor selector state tests from insertionPoint to insertionCue --- .../block-editor/src/store/test/selectors.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index ebf23789fec31..a08c2e0dde150 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -2425,7 +2425,7 @@ describe( 'selectors', () => { } ) ), }, - insertionPoint: { + insertionCue: { rootClientId: undefined, index: 0, }, @@ -2466,7 +2466,7 @@ describe( 'selectors', () => { } ) ), }, - insertionPoint: null, + insertionCue: null, }; expect( getBlockInsertionPoint( state ) ).toEqual( { @@ -2504,7 +2504,7 @@ describe( 'selectors', () => { } ) ), }, - insertionPoint: null, + insertionCue: null, }; const insertionPoint1 = getBlockInsertionPoint( state ); @@ -2546,7 +2546,7 @@ describe( 'selectors', () => { } ) ), }, - insertionPoint: null, + insertionCue: null, }; expect( getBlockInsertionPoint( state ) ).toEqual( { @@ -2588,7 +2588,7 @@ describe( 'selectors', () => { } ) ), }, - insertionPoint: null, + insertionCue: null, }; expect( getBlockInsertionPoint( state ) ).toEqual( { @@ -2630,7 +2630,7 @@ describe( 'selectors', () => { } ) ), }, - insertionPoint: null, + insertionCue: null, }; expect( getBlockInsertionPoint( state ) ).toEqual( { @@ -2643,7 +2643,7 @@ describe( 'selectors', () => { describe( 'isBlockInsertionPointVisible', () => { it( 'should return false if no assigned insertion point', () => { const state = { - insertionPoint: null, + insertionCue: null, }; expect( isBlockInsertionPointVisible( state ) ).toBe( false ); @@ -2651,7 +2651,7 @@ describe( 'selectors', () => { it( 'should return true if assigned insertion point', () => { const state = { - insertionPoint: { + insertionCue: { rootClientId: undefined, index: 5, }, From 8c48524579ac89cab9789f0c24377c389d52fa76 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 26 Sep 2024 13:00:54 -0500 Subject: [PATCH 25/25] Move code back to previous location --- .../src/components/block-tools/zoom-out-mode-inserters.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 fdeb823fdd5e8..4d47c136defab 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 @@ -94,10 +94,10 @@ function ZoomOutModeInserters() { isVisible={ isSelected || isHovered } onClick={ () => { setInserterIsOpened( { - tab: 'patterns', - category: 'all', rootClientId: sectionRootClientId, insertionIndex: index, + tab: 'patterns', + category: 'all', } ); showInsertionPoint( sectionRootClientId, index, { operation: 'insert',