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

packages/block-library/src/query-loop/block.json

@@ -6,7 +6,8 @@
 		"queryId",
 		"query",
 		"queryContext",
-		"layout"
+		"layout",
+		"templateSlug"
 	],
 	"supports": {
 		"reusable": false,

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,
 		]
 	);
 

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( () => {

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 ) =>

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 (

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;
 }
 
 /**

packages/edit-site/src/store/test/actions.js

@@ -24,19 +24,38 @@ 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 } },
 			} );
 		} );
 	} );
 
 	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,
 			} );