From 2bc6e98779ce872924abfeaa474c79bf5acd5d56 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 4 Jan 2021 15:33:33 +0200 Subject: [PATCH 1/3] decouple Query Loop from site-edit --- .../block-library/src/query-loop/block.json | 3 +- packages/block-library/src/query-loop/edit.js | 34 ++++++------------- .../edit-site/src/components/editor/index.js | 4 --- 3 files changed, 12 insertions(+), 29 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..c4ada5eecc92da 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( @@ -80,28 +81,12 @@ export default function QueryLoopEdit( { 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; } } @@ -125,6 +110,7 @@ export default function QueryLoopEdit( { exclude, sticky, inherit, + templateSlug, ] ); 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 ) => From 09e9bb0bd20231226a07eb32868d3a3a31ebca50 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 4 Jan 2021 15:56:33 +0200 Subject: [PATCH 2/3] don't allow `inherit` query out of edit-site context --- packages/block-library/src/query/block.json | 3 ++- .../block-library/src/query/edit/index.js | 10 +++++++-- .../query/edit/query-inspector-controls.js | 21 ++++++++++++------- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index 302ea1a8e80856..81a963574c7fa4 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -37,7 +37,8 @@ "layout": "layout" }, "usesContext": [ - "postId" + "postId", + "templateSlug" ], "supports": { "html": false diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 45be4c7f88537c..9cbe8fc1ee375e 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -22,7 +22,7 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants'; const TEMPLATE = [ [ 'core/query-loop' ] ]; export function QueryContent( { attributes, - context: { postId }, + context: { postId, templateSlug }, setAttributes, } ) { const { queryId, query, layout } = attributes; @@ -47,10 +47,15 @@ export function QueryContent( { if ( ! query.perPage && postsPerPage ) { newQuery.perPage = postsPerPage; } + // Show and allow inherit Query options only when + // in site-editing context. + if ( ! templateSlug && query.inherit ) { + newQuery.inherit = false; + } if ( !! Object.keys( newQuery ).length ) { updateQuery( newQuery ); } - }, [ query.perPage, query.exclude, postId ] ); + }, [ query.perPage, query.exclude, query.inherit, postId, templateSlug ] ); // We need this for multi-query block pagination. // Query parameters for each block are scoped to their ID. useEffect( () => { @@ -68,6 +73,7 @@ export function QueryContent( { attributes={ attributes } setQuery={ updateQuery } setLayout={ updateLayout } + allowInheritQuery={ !! templateSlug } /> - setQuery( { inherit: !! value } ) } - /> + { allowInheritQuery && ( + + setQuery( { inherit: !! value } ) + } + /> + ) } { ! inherit && ( Date: Wed, 13 Jan 2021 12:56:25 +0200 Subject: [PATCH 3/3] set templateSlug in page context on template set --- packages/block-library/src/query-loop/edit.js | 2 -- packages/block-library/src/query/block.json | 3 +- .../block-library/src/query/edit/index.js | 10 ++---- .../query/edit/query-inspector-controls.js | 21 +++++------- .../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, 62 insertions(+), 35 deletions(-) diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js index c4ada5eecc92da..1606b913e260a6 100644 --- a/packages/block-library/src/query-loop/edit.js +++ b/packages/block-library/src/query-loop/edit.js @@ -80,7 +80,6 @@ export default function QueryLoopEdit( { if ( sticky ) { query.sticky = sticky === 'only'; } - // If `inherit` is truthy, adjust conditionally the query to create a better preview. if ( inherit ) { // Change the post-type if needed. @@ -89,7 +88,6 @@ export default function QueryLoopEdit( { postType = query.postType; } } - return { posts: getEntityRecords( 'postType', postType, query ), blocks: getBlocks( clientId ), diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index 81a963574c7fa4..302ea1a8e80856 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -37,8 +37,7 @@ "layout": "layout" }, "usesContext": [ - "postId", - "templateSlug" + "postId" ], "supports": { "html": false diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 9cbe8fc1ee375e..495c27f71012bc 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -22,7 +22,7 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants'; const TEMPLATE = [ [ 'core/query-loop' ] ]; export function QueryContent( { attributes, - context: { postId, templateSlug }, + context: { postId }, setAttributes, } ) { const { queryId, query, layout } = attributes; @@ -47,15 +47,10 @@ export function QueryContent( { if ( ! query.perPage && postsPerPage ) { newQuery.perPage = postsPerPage; } - // Show and allow inherit Query options only when - // in site-editing context. - if ( ! templateSlug && query.inherit ) { - newQuery.inherit = false; - } if ( !! Object.keys( newQuery ).length ) { updateQuery( newQuery ); } - }, [ query.perPage, query.exclude, query.inherit, postId, templateSlug ] ); + }, [ 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( () => { @@ -73,7 +68,6 @@ export function QueryContent( { attributes={ attributes } setQuery={ updateQuery } setLayout={ updateLayout } - allowInheritQuery={ !! templateSlug } /> - { allowInheritQuery && ( - - setQuery( { inherit: !! value } ) - } - /> - ) } + setQuery( { inherit: !! value } ) } + /> { ! inherit && ( '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, } );