From 312d357adb4913f38c60ad36e045dd5edf8c4135 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 13 Jan 2021 13:53:38 +0200 Subject: [PATCH] Decouple query from edit site (#27972) * decouple Query Loop from site-edit * don't allow `inherit` query out of edit-site context * set templateSlug in page context on template set --- .../block-library/src/query-loop/block.json | 3 +- packages/block-library/src/query-loop/edit.js | 36 ++++++------------- .../block-library/src/query/edit/index.js | 2 +- .../edit-site/src/components/editor/index.js | 4 --- .../template-navigation-item.js | 2 +- packages/edit-site/src/store/actions.js | 33 +++++++++++++---- packages/edit-site/src/store/test/actions.js | 26 ++++++++++++-- 7 files changed, 64 insertions(+), 42 deletions(-) diff --git a/packages/block-library/src/query-loop/block.json b/packages/block-library/src/query-loop/block.json index 6059febae1dd60..724169afc851d1 100644 --- a/packages/block-library/src/query-loop/block.json +++ b/packages/block-library/src/query-loop/block.json @@ -6,7 +6,8 @@ "queryId", "query", "queryContext", - "layout" + "layout", + "templateSlug" ], "supports": { "reusable": false, diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js index 370eb45e08a7d5..1606b913e260a6 100644 --- a/packages/block-library/src/query-loop/edit.js +++ b/packages/block-library/src/query-loop/edit.js @@ -43,11 +43,12 @@ export default function QueryLoopEdit( { sticky, inherit, } = {}, - queryContext, + queryContext = [ {} ], + templateSlug, layout: { type: layoutType = 'flex', columns = 1 } = {}, }, } ) { - const [ { page } ] = useQueryContext() || queryContext || [ {} ]; + const [ { page } ] = useQueryContext() || queryContext; const [ activeBlockContext, setActiveBlockContext ] = useState(); const { posts, blocks } = useSelect( @@ -79,32 +80,14 @@ export default function QueryLoopEdit( { if ( sticky ) { query.sticky = sticky === 'only'; } - - // When you insert this block outside of the edit site then store - // does not exist therefore we check for its existence. - // TODO: remove this code, edit-site shouldn't be called in block-library. - // This creates a cycle dependency. - if ( inherit && select( 'core/edit-site' ) ) { - // This should be passed from the context exposed by edit site. - const { getEditedPostType, getEditedPostId } = select( - 'core/edit-site' - ); - - if ( 'wp_template' === getEditedPostType() ) { - const { slug } = select( 'core' ).getEntityRecord( - 'postType', - 'wp_template', - getEditedPostId() - ); - - // Change the post-type if needed. - if ( slug?.startsWith( 'archive-' ) ) { - query.postType = slug.replace( 'archive-', '' ); - postType = query.postType; - } + // If `inherit` is truthy, adjust conditionally the query to create a better preview. + if ( inherit ) { + // Change the post-type if needed. + if ( templateSlug?.startsWith( 'archive-' ) ) { + query.postType = templateSlug.replace( 'archive-', '' ); + postType = query.postType; } } - return { posts: getEntityRecords( 'postType', postType, query ), blocks: getBlocks( clientId ), @@ -125,6 +108,7 @@ export default function QueryLoopEdit( { exclude, sticky, inherit, + templateSlug, ] ); diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 45be4c7f88537c..495c27f71012bc 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -50,7 +50,7 @@ export function QueryContent( { if ( !! Object.keys( newQuery ).length ) { updateQuery( newQuery ); } - }, [ query.perPage, query.exclude, postId ] ); + }, [ query.perPage, query.exclude, query.inherit, postId ] ); // We need this for multi-query block pagination. // Query parameters for each block are scoped to their ID. useEffect( () => { diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 6bf6e0751a356d..204f75e9b02257 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -116,13 +116,9 @@ function Editor() { setIsEntitiesSavedStatesOpen( false ); }, [] ); - // Set default query for misplaced Query Loop blocks, and - // provide the root `queryContext` for top-level Query Loop - // and Query Pagination blocks. const blockContext = useMemo( () => ( { ...page?.context, - query: page?.context.query || { categoryIds: [], tagIds: [] }, queryContext: [ page?.context.queryContext || { page: 1 }, ( newQueryContext ) => diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js index b63fc942368b9c..f694b66bee6684 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js @@ -32,7 +32,7 @@ export default function TemplateNavigationItem( { item } ) { const onActivateItem = () => 'wp_template' === item.type - ? setTemplate( item.id ) + ? setTemplate( item.id, item.slug ) : setTemplatePart( item.id ); return ( diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 11866b4c430b03..c21db62c9420b6 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -36,13 +36,25 @@ export function __experimentalSetPreviewDeviceType( deviceType ) { * Returns an action object used to set a template. * * @param {number} templateId The template ID. - * + * @param {string} templateSlug The template slug. * @return {Object} Action object. */ -export function setTemplate( templateId ) { +export function* setTemplate( templateId, templateSlug ) { + const pageContext = { templateSlug }; + if ( ! templateSlug ) { + const template = yield controls.resolveSelect( + 'core', + 'getEntityRecord', + 'postType', + 'wp_template', + templateId + ); + pageContext.templateSlug = template?.slug; + } return { type: 'SET_TEMPLATE', templateId, + page: { context: pageContext }, }; } @@ -64,6 +76,7 @@ export function* addTemplate( template ) { return { type: 'SET_TEMPLATE', templateId: newTemplate.id, + page: { context: { templateSlug: newTemplate.slug } }, }; } @@ -124,17 +137,25 @@ export function* setPage( page ) { if ( ! page.path && page.context?.postId ) { page.path = `?p=${ page.context.postId }`; } - const template = yield controls.resolveSelect( + const { id: templateId, slug: templateSlug } = yield controls.resolveSelect( 'core', '__experimentalGetTemplateForLink', page.path ); yield { type: 'SET_PAGE', - page, - templateId: template.id, + page: ! templateSlug + ? page + : { + ...page, + context: { + ...page.context, + templateSlug, + }, + }, + templateId, }; - return template.id; + return templateId; } /** diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js index fac4c9a0ca7377..0ad8fdb4af851f 100644 --- a/packages/edit-site/src/store/test/actions.js +++ b/packages/edit-site/src/store/test/actions.js @@ -24,11 +24,30 @@ describe( 'actions', () => { } ); describe( 'setTemplate', () => { - it( 'should return the SET_TEMPLATE action', () => { + it( 'should return the SET_TEMPLATE action when slug is provided', () => { const templateId = 1; - expect( setTemplate( templateId ) ).toEqual( { + const templateSlug = 'archive'; + const it = setTemplate( templateId, templateSlug ); + expect( it.next().value ).toEqual( { + type: 'SET_TEMPLATE', + templateId, + page: { context: { templateSlug } }, + } ); + } ); + it( 'should return the SET_TEMPLATE by getting the template slug', () => { + const templateId = 1; + const template = { slug: 'index' }; + const it = setTemplate( templateId ); + expect( it.next().value ).toEqual( { + type: '@@data/RESOLVE_SELECT', + storeKey: 'core', + selectorName: 'getEntityRecord', + args: [ 'postType', 'wp_template', templateId ], + } ); + expect( it.next( template ).value ).toEqual( { type: 'SET_TEMPLATE', templateId, + page: { context: { templateSlug: template.slug } }, } ); } ); } ); @@ -36,7 +55,7 @@ describe( 'actions', () => { describe( 'addTemplate', () => { it( 'should yield the DISPATCH control to create the template and return the SET_TEMPLATE action', () => { const template = { slug: 'index' }; - const newTemplate = { id: 1 }; + const newTemplate = { id: 1, slug: 'index' }; const it = addTemplate( template ); expect( it.next().value ).toEqual( { @@ -49,6 +68,7 @@ describe( 'actions', () => { value: { type: 'SET_TEMPLATE', templateId: newTemplate.id, + page: { context: { templateSlug: newTemplate.slug } }, }, done: true, } );