diff --git a/editor/store/selectors.js b/editor/store/selectors.js index f1af3328ca33b..db34a9a379173 100644 --- a/editor/store/selectors.js +++ b/editor/store/selectors.js @@ -1122,12 +1122,13 @@ function buildInserterItemFromBlockType( state, enabledBlockTypes, blockType ) { /** * Given a reusable block, constructs an item that appears in the inserter. * + * @param {Object} state Global application state. * @param {string[]|boolean} enabledBlockTypes Enabled block types, or true/false to enable/disable all types. * @param {Object} reusableBlock Reusable block, likely from getReusableBlock(). * * @return {Editor.InserterItem} Item that appears in inserter. */ -function buildInserterItemFromReusableBlock( enabledBlockTypes, reusableBlock ) { +function buildInserterItemFromReusableBlock( state, enabledBlockTypes, reusableBlock ) { if ( ! enabledBlockTypes || ! reusableBlock ) { return null; } @@ -1137,7 +1138,12 @@ function buildInserterItemFromReusableBlock( enabledBlockTypes, reusableBlock ) return null; } - const referencedBlockType = getBlockType( reusableBlock.type ); + const referencedBlock = getBlock( state, reusableBlock.uid ); + if ( ! referencedBlock ) { + return null; + } + + const referencedBlockType = getBlockType( referencedBlock.name ); if ( ! referencedBlockType ) { return null; } @@ -1173,7 +1179,7 @@ export function getInserterItems( state, enabledBlockTypes = true ) { ); const dynamicItems = getReusableBlocks( state ).map( reusableBlock => - buildInserterItemFromReusableBlock( enabledBlockTypes, reusableBlock ) + buildInserterItemFromReusableBlock( state, enabledBlockTypes, reusableBlock ) ); const items = [ ...staticItems, ...dynamicItems ]; @@ -1201,7 +1207,7 @@ function getItemsFromInserts( state, inserts, enabledBlockTypes = true, maximum const items = fillWithCommonBlocks( inserts ).map( insert => { if ( insert.ref ) { const reusableBlock = getReusableBlock( state, insert.ref ); - return buildInserterItemFromReusableBlock( enabledBlockTypes, reusableBlock ); + return buildInserterItemFromReusableBlock( state, enabledBlockTypes, reusableBlock ); } const blockType = getBlockType( insert.name ); @@ -1248,8 +1254,8 @@ export function getFrecentInserterItems( state, enabledBlockTypes = true, maximu /** * Returns the reusable block with the given ID. * - * @param {Object} state Global application state. - * @param {string} ref The reusable block's ID. + * @param {Object} state Global application state. + * @param {number|string} ref The reusable block's ID. * * @return {Object} The reusable block, or null if none exists. */ @@ -1260,10 +1266,12 @@ export const getReusableBlock = createSelector( return null; } + const isTemporary = isNaN( parseInt( ref ) ); + return { ...block, - id: ref, - isTemporary: ! Number.isInteger( ref ), + id: isTemporary ? ref : +ref, + isTemporary, }; }, ( state, ref ) => [ @@ -1304,7 +1312,7 @@ export function isFetchingReusableBlock( state, ref ) { * @return {Array} An array of all reusable blocks. */ export function getReusableBlocks( state ) { - return Object.values( state.reusableBlocks.data ); + return Object.keys( state.reusableBlocks.data ).map( ( ref ) => getReusableBlock( state, ref ) ); } /** diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js index b0948eecfd65f..cc2fb4498964b 100644 --- a/editor/store/test/selectors.js +++ b/editor/store/test/selectors.js @@ -2344,7 +2344,9 @@ describe( 'selectors', () => { const state = { editor: { present: { - blocksByUid: {}, + blocksByUid: { + carrot: { name: 'core/test-block' }, + }, blockOrder: {}, edits: {}, }, @@ -2352,11 +2354,7 @@ describe( 'selectors', () => { currentPost: {}, reusableBlocks: { data: { - 123: { - id: 123, - title: 'My reusable block', - type: 'core/test-block', - }, + 123: { uid: 'carrot', title: 'My reusable block' }, }, }, }; @@ -2398,14 +2396,19 @@ describe( 'selectors', () => { }, editor: { present: { + blocksByUid: { + carrot: { name: 'core/test-block' }, + }, blockOrder: [], + edits: {}, }, }, reusableBlocks: { data: { - 123: { id: 123, type: 'core/test-block' }, + 123: { uid: 'carrot' }, }, }, + currentPost: {}, }; expect( getFrecentInserterItems( state, true, 3 ) ).toMatchObject( [ @@ -2545,33 +2548,20 @@ describe( 'selectors', () => { describe( 'getReusableBlocks', () => { it( 'should return an array of reusable blocks', () => { - const reusableBlock1 = { - id: '358b59ee-bab3-4d6f-8445-e8c6971a5605', - name: 'My cool block', - type: 'core/paragraph', - attributes: { - content: 'Hello!', - }, - }; - const reusableBlock2 = { - id: '687e1a87-cca1-41f2-a782-197ddaea9abf', - name: 'My neat block', - type: 'core/paragraph', - attributes: { - content: 'Goodbye!', - }, - }; const state = { reusableBlocks: { data: { - [ reusableBlock1.id ]: reusableBlock1, - [ reusableBlock2.id ]: reusableBlock2, + 123: { uid: 'carrot' }, + reusable1: { uid: 'broccoli' }, }, }, }; const reusableBlocks = getReusableBlocks( state ); - expect( reusableBlocks ).toEqual( [ reusableBlock1, reusableBlock2 ] ); + expect( reusableBlocks ).toEqual( [ + { id: 123, isTemporary: false, uid: 'carrot' }, + { id: 'reusable1', isTemporary: true, uid: 'broccoli' }, + ] ); } ); it( 'should return an empty array when no reusable blocks exist', () => {