set templateSlug in page context on template set

WordPress · Jan 13, 2021 · c20bee8 · c20bee8
1 parent 09e9bb0
commit c20bee8
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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 }
 			/>
 			<BlockControls>
 				<QueryToolbar

diff --git a/packages/block-library/src/query/edit/query-inspector-controls.js b/packages/block-library/src/query/edit/query-inspector-controls.js
@@ -60,7 +60,6 @@ export default function QueryInspectorControls( {
 	attributes: { query, layout },
 	setQuery,
 	setLayout,
-	allowInheritQuery,
 } ) {
 	const {
 		order,
@@ -171,18 +170,14 @@ export default function QueryInspectorControls( {
 		<InspectorControls>
 			<CreateNewPostLink type={ postType } />
 			<PanelBody title={ __( 'Settings' ) }>
-				{ allowInheritQuery && (
-					<ToggleControl
-						label={ __( 'Inherit query from URL' ) }
-						help={ __(
-							'Disable the option to customize the query arguments. Leave enabled to inherit the global query depending on the URL.'
-						) }
-						checked={ !! inherit }
-						onChange={ ( value ) =>
-							setQuery( { inherit: !! value } )
-						}
-					/>
-				) }
+				<ToggleControl
+					label={ __( 'Inherit query from URL' ) }
+					help={ __(
+						'Disable the option to customize the query arguments. Leave enabled to inherit the global query depending on the URL.'
+					) }
+					checked={ !! inherit }
+					onChange={ ( value ) => setQuery( { inherit: !! value } ) }
+				/>
 				{ ! inherit && (
 					<SelectControl
 						options={ postTypesSelectOptions }

diff --git a/.../edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js b/.../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
@@ -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
@@ -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,
 			} );