decouple Query Loop from site-edit

WordPress · Jan 4, 2021 · a373f45 · a373f45
1 parent dc52d16
commit a373f45
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 47 deletions.
diff --git 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
@@ -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
@@ -129,13 +129,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/navigate-to-link/index.js b/packages/edit-site/src/components/navigate-to-link/index.js
@@ -36,7 +36,7 @@ export default function NavigateToLink( {
 				pageEntity.link,
 				registry.__experimentalResolveSelect( 'core' ).getEntityRecords
 			).then(
-				( newTemplateId ) => setTemplateId( newTemplateId ),
+				( { id: newTemplateId } ) => setTemplateId( newTemplateId ),
 				() => setTemplateId( null )
 			);
 	}, [ pageEntity?.link, registry ] );

diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
@@ -129,10 +129,20 @@ export function* setPage( page ) {
 	if ( ! page.path && page.context?.postId ) {
 		page.path = `?p=${ page.context.postId }`;
 	}
-	const templateId = yield findTemplate( page.path );
+	const { id: templateId, slug: templateSlug } = yield findTemplate(
+		page.path
+	);
 	yield {
 		type: 'SET_PAGE',
-		page,
+		page: ! templateSlug
+			? page
+			: {
+					...page,
+					context: {
+						...page.context,
+						templateSlug,
+					},
+			  },
 		templateId,
 	};
 	return templateId;

diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js
@@ -104,7 +104,7 @@ describe( 'actions', () => {
 				type: 'FIND_TEMPLATE',
 				path: page.path,
 			} );
-			expect( it.next( templateId ).value ).toEqual( {
+			expect( it.next( { id: templateId } ).value ).toEqual( {
 				type: 'SET_PAGE',
 				page,
 				templateId,
@@ -134,7 +134,7 @@ describe( 'actions', () => {
 				type: 'FIND_TEMPLATE',
 				path: page.path,
 			} );
-			expect( it.next( templateId ).value ).toEqual( {
+			expect( it.next( { id: templateId } ).value ).toEqual( {
 				type: 'SET_PAGE',
 				page,
 				templateId,
@@ -173,7 +173,7 @@ describe( 'actions', () => {
 				type: 'FIND_TEMPLATE',
 				path: page.path,
 			} );
-			expect( it.next( templateId ).value ).toEqual( {
+			expect( it.next( { id: templateId } ).value ).toEqual( {
 				type: 'SET_PAGE',
 				page,
 				templateId,

diff --git a/packages/edit-site/src/utils/find-template.js b/packages/edit-site/src/utils/find-template.js
@@ -8,13 +8,19 @@ import { addQueryArgs } from '@wordpress/url';
  */
 const { fetch } = window;
 
+/**
+ * @typedef {Object} TemplateInfo
+ * @property {number} id The template's id.
+ * @property {string} slug The template's slug.
+ */
+
 /**
  * Find the template for a given page path.
  *
  * @param {string}   path The page path.
  * @param {Function} getEntityRecords The promise-returning `getEntityRecords` selector to use.
  *
- * @return {number} The found template ID.
+ * @return {TemplateInfo} The found template information.
  */
 export default async function findTemplate( path, getEntityRecords ) {
 	const { data } = await fetch(
@@ -23,17 +29,17 @@ export default async function findTemplate( path, getEntityRecords ) {
 		} )
 	).then( ( res ) => res.json() );
 
-	let newTemplateId = data.ID;
+	const { ID: newTemplateId, post_name: slug } = data;
+	const templateInfo = { id: newTemplateId, slug };
 	if ( newTemplateId === null ) {
-		newTemplateId = (
-			await getEntityRecords( 'postType', 'wp_template', {
-				resolved: true,
-				slug: data.post_name,
-			} )
-		 )[ 0 ].id;
+		const [ newTemplate ] = await getEntityRecords(
+			'postType',
+			'wp_template',
+			{ resolved: true, slug }
+		);
+		templateInfo.id = newTemplate.id;
 	}
-
-	return newTemplateId;
+	return templateInfo;
 }
 
 findTemplate.siteUrl = '';
diff --git a/packages/edit-site/src/utils/test/find-template.js b/packages/edit-site/src/utils/test/find-template.js
@@ -18,7 +18,7 @@ describe( 'findTemplate()', () => {
 		const mockFetch = createMockFetch( { data: { ID: 1 } } );
 		expect(
 			await require( '../find-template' ).default( '/path?query=true' )
-		).toBe( 1 );
+		).toEqual( { id: 1, slug: undefined } );
 		expect( mockFetch ).toHaveBeenCalledWith(
 			'/path?query=true&_wp-find-template=true'
 		);
@@ -36,7 +36,7 @@ describe( 'findTemplate()', () => {
 				'/path?query=true',
 				getEntityRecords
 			)
-		).toBe( 2 );
+		).toEqual( { id: 2, slug: 'post-name' } );
 		expect( getEntityRecords ).toHaveBeenCalledWith(
 			'postType',
 			'wp_template',