From 0ed82aec5f97a6e5fc06d0654f645865d8484caa Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 26 Sep 2024 13:37:37 -0500 Subject: [PATCH] Move insertionPoint state to block-editor store/rename existing insertionPoint to insertionCue (#65098) * Renames state.insertionPoint to state.insertionCue in the block editor store and related action/reducers. * Adds state.insertionPoint to store when an insertion point is manually passed. * Dispatching the block editor setInsertionPoint from editor action setIsInserterOpened. * Clear insertionPoint state on SELECT_BLOCK --- .../data/data-core-block-editor.md | 4 +- .../reference-guides/data/data-core-editor.md | 4 + .../block-list/zoom-out-separator.js | 32 ++++++-- .../block-tools/zoom-out-mode-inserters.js | 13 ++-- .../inserter/hooks/use-insertion-point.js | 13 +++- .../src/components/inserter/quick-inserter.js | 4 +- .../block-editor/src/store/private-actions.js | 14 ++++ .../src/store/private-selectors.js | 10 +++ packages/block-editor/src/store/reducer.js | 24 +++++- packages/block-editor/src/store/selectors.js | 15 ++-- .../src/store/test/private-actions.js | 15 ++++ .../block-editor/src/store/test/reducer.js | 44 ++++++++++- .../block-editor/src/store/test/selectors.js | 16 ++-- packages/edit-post/src/store/selectors.js | 2 +- packages/edit-site/src/store/selectors.js | 2 +- .../src/components/inserter-sidebar/index.js | 19 ++--- packages/editor/src/store/actions.js | 29 +++++-- .../editor/src/store/private-selectors.js | 4 +- packages/editor/src/store/test/actions.js | 76 +++++++++++++++++++ packages/editor/src/store/test/reducer.js | 22 ------ 20 files changed, 277 insertions(+), 85 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 4b3ca78f74d299..956e8dd010581a 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/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 4fea2c51fa54f3..a4c1a59f0c4231 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/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js index be5af549630607..984e29546c213b 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,14 +29,16 @@ export function ZoomOutSeparator( { const { sectionRootClientId, sectionClientIds, - blockInsertionPoint, + insertionPoint, blockInsertionPointVisible, + blockInsertionPoint, } = useSelect( ( select ) => { const { - getBlockInsertionPoint, + getInsertionPoint, getBlockOrder, - isBlockInsertionPointVisible, getSectionRootClientId, + isBlockInsertionPointVisible, + getBlockInsertionPoint, } = unlock( select( blockEditorStore ) ); const root = getSectionRootClientId(); @@ -45,6 +47,7 @@ export function ZoomOutSeparator( { sectionRootClientId: root, sectionClientIds: sectionRootClientIds, blockOrder: getBlockOrder( root ), + insertionPoint: getInsertionPoint(), blockInsertionPoint: getBlockInsertionPoint(), blockInsertionPointVisible: isBlockInsertionPointVisible(), }; @@ -67,17 +70,30 @@ export function ZoomOutSeparator( { return null; } + 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 = - blockInsertionPointVisible && - blockInsertionPoint.index === 0 && - clientId === sectionClientIds[ blockInsertionPoint.index ]; + hasTopInsertionPoint || + ( blockInsertionPointVisible && + blockInsertionPoint.index === 0 && + clientId === sectionClientIds[ blockInsertionPoint.index ] ); } if ( position === 'bottom' ) { isVisible = - blockInsertionPointVisible && - clientId === sectionClientIds[ blockInsertionPoint.index - 1 ]; + hasBottomInsertionPoint || + ( blockInsertionPointVisible && + clientId === + sectionClientIds[ blockInsertionPoint.index - 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 79f8be3f9cfe97..4d47c136defab0 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, + insertionPoint, blockOrder, blockInsertionPointVisible, setInserterIsOpened, @@ -26,20 +26,20 @@ function ZoomOutModeInserters() { } = useSelect( ( select ) => { const { getSettings, - getBlockInsertionPoint, + getInsertionPoint, getBlockOrder, getSelectionStart, getSelectedBlockClientId, getHoveredBlockClientId, - isBlockInsertionPointVisible, getSectionRootClientId, + isBlockInsertionPointVisible, } = unlock( select( blockEditorStore ) ); const root = getSectionRootClientId(); return { hasSelection: !! getSelectionStart().clientId, - blockInsertionPoint: getBlockInsertionPoint(), + insertionPoint: getInsertionPoint(), blockOrder: getBlockOrder( root ), blockInsertionPointVisible: isBlockInsertionPointVisible(), sectionRootClientId: root, @@ -50,7 +50,8 @@ function ZoomOutModeInserters() { }; }, [] ); - const { showInsertionPoint } = useDispatch( blockEditorStore ); + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const { showInsertionPoint } = unlock( useDispatch( blockEditorStore ) ); // Defer the initial rendering to avoid the jumps due to the animation. useEffect( () => { @@ -68,7 +69,7 @@ function ZoomOutModeInserters() { return [ undefined, ...blockOrder ].map( ( clientId, index ) => { const shouldRenderInsertionPoint = - blockInsertionPointVisible && blockInsertionPoint.index === index; + blockInsertionPointVisible && insertionPoint?.index === index; const previousClientId = clientId; const nextClientId = blockOrder[ index ]; 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 0cd71bf77b9830..de814152c620b0 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,15 +83,24 @@ function useInsertionPoint( { getBlockRootClientId, getBlockIndex, getBlockOrder, - } = select( blockEditorStore ); + getInsertionPoint, + } = unlock( select( blockEditorStore ) ); const selectedBlockClientId = getSelectedBlockClientId(); - let _destinationRootClientId = rootClientId; let _destinationIndex; + const insertionPoint = getInsertionPoint(); if ( insertionIndex !== undefined ) { // Insert into a specific index. _destinationIndex = insertionIndex; + } else if ( + insertionPoint && + insertionPoint.hasOwnProperty( 'index' ) + ) { + _destinationRootClientId = insertionPoint?.rootClientId + ? insertionPoint.rootClientId + : rootClientId; + _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 f40af12feddf4f..7c7f836842b418 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -87,10 +87,10 @@ export default function QuickInserter( { // the insertion point can work as expected. const onBrowseAll = () => { setInserterIsOpened( { - rootClientId, - insertionIndex, filterValue, onSelect, + rootClientId, + insertionIndex, } ); }; diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index 441a07202c42ac..5571db0ce91066 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.index The index to insert at. + * + * @return {Object} Action object. + */ +export function setInsertionPoint( value ) { + return { + type: 'SET_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 7af83bed44b0db..c3228980310656 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -674,3 +674,13 @@ export function getClosestAllowedInsertionPointForPattern( const names = getGrammar( pattern ).map( ( { blockName: name } ) => name ); return getClosestAllowedInsertionPoint( state, names, clientId ); } + +/** + * Where the point where the next block will be inserted into. + * + * @param {Object} state + * @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/reducer.js b/packages/block-editor/src/store/reducer.js index 827a2141f44c1c..f6445f8a3681c9 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 ) { @@ -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 {Object} Updated state. + */ +export function insertionPoint( state = null, action ) { + switch ( action.type ) { + case 'SET_INSERTION_POINT': + return action.value; + case 'SELECT_BLOCK': + return null; + } + + return state; +} + const combinedReducers = combineReducers( { blocks, isDragging, @@ -2092,6 +2111,7 @@ const combinedReducers = combineReducers( { blocksMode, blockListSettings, insertionPoint, + insertionCue, template, settings, preferences, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index a73785edfefd16..7bb002661565bd 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. * @@ -1466,11 +1465,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 +1484,7 @@ export const getBlockInsertionPoint = createSelector( return { rootClientId, index }; }, ( state ) => [ - state.insertionPoint, + state.insertionCue, state.selection.selectionEnd.clientId, state.blocks.parents, state.blocks.order, @@ -1493,14 +1492,14 @@ 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. * * @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 7576b95866306a..d54a519c9056b6 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, + setInsertionPoint, setOpenedBlockSettingsMenu, startDragging, stopDragging, @@ -123,4 +124,18 @@ describe( 'private actions', () => { } ); } ); } ); + + describe( 'setInsertionPoint', () => { + it( 'should return the SET_INSERTION_POINT action', () => { + expect( + setInsertionPoint( { + rootClientId: '', + index: '123', + } ) + ).toEqual( { + 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 cd472fa59ac724..1f1b9a9143d981 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -28,6 +28,7 @@ import { isMultiSelecting, preferences, blocksMode, + insertionCue, insertionPoint, template, blockListSettings, @@ -2378,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, @@ -2403,7 +2404,7 @@ describe( 'state', () => { rootClientId: 'clientId1', index: 0, } ); - const state = insertionPoint( original, { + const state = insertionCue( original, { type: 'HIDE_INSERTION_POINT', } ); @@ -3485,4 +3486,39 @@ describe( 'state', () => { expect( state ).toBe( null ); } ); } ); + + describe( 'insertionPoint', () => { + it( 'should default to null', () => { + const state = insertionPoint( undefined, {} ); + + expect( state ).toBe( null ); + } ); + + it( 'should set insertion point', () => { + const state = insertionPoint( null, { + type: 'SET_INSERTION_POINT', + value: { + rootClientId: 'clientId1', + index: 4, + }, + } ); + + expect( state ).toEqual( { + rootClientId: 'clientId1', + index: 4, + } ); + } ); + + it( 'should clear the insertion point on block selection', () => { + const original = deepFreeze( { + rootClientId: 'clientId1', + index: 4, + } ); + const state = insertionPoint( original, { + type: 'SELECT_BLOCK', + } ); + + expect( state ).toBe( null ); + } ); + } ); } ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index ebf23789fec311..a08c2e0dde1508 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, }, diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index 5bea6e7d35eb62..8d85249e8100ba 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 3f7bbea0be7d25..ddef4a71d0a915 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 b98770b7afe8fa..5cace042fae58c 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: !! ( @@ -88,14 +88,11 @@ export default function InserterSidebar() { showMostUsedBlocks={ showMostUsedBlocks } showInserterHelpPanel shouldFocusBlock={ isMobileViewport } - rootClientId={ - blockSectionRootClientId ?? insertionPoint.rootClientId - } - __experimentalInsertionIndex={ insertionPoint.insertionIndex } - onSelect={ insertionPoint.onSelect } - __experimentalInitialTab={ insertionPoint.tab } - __experimentalInitialCategory={ insertionPoint.category } - __experimentalFilterValue={ insertionPoint.filterValue } + rootClientId={ blockSectionRootClientId } + 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 59faa6b5b73624..4b519a9d8f6cc3 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. @@ -726,15 +726,32 @@ 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. */ -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' ) + ) { + unlock( registry.dispatch( blockEditorStore ) ).setInsertionPoint( { + rootClientId: value.rootClientId, + index: value.insertionIndex, + } ); + } + + dispatch( { + type: 'SET_IS_INSERTER_OPENED', + value, + } ); }; -} /** * Returns an action object used to open/close the list view. diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index 357a7344f631d4..9bc065436c10bb 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' ) { diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js index fae30c6fc271ec..206c60a159d04f 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 b4fd013c6b4d42..3971ad30c9de74 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 - ); - } ); } ); } );