Template parts need to inherit the query context

[carolinan]

Is your feature request related to a problem? Please describe.

In my theme I added a query with post excerpt, date, tags, categories and author.

But when I move the date, tags categories and author block to a template part and include this template part
in the loop, the context is lost and the information for the first post in the loop is repeated.

Describe the solution you'd like
I want to be able to reuse my template parts instead of repeating the same code in multiple places.

Example:

Main query:

<!-- wp:query {"queryId":1,"query":{"pages":"100","offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"", "exclude":[],"perPage":5,"inherit":true}} -->
<!-- wp:query-loop -->

<!-- wp:post-title {"isLink":true, "className":"default-width"} /-->

<!-- wp:template-part {"slug":"meta","theme":"armando","backgroundColor":"silver","className":"post-meta default-width is-style-armando-box-shadow"} /-->

<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:post-excerpt /-->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"color":"beige","className":"is-style-wide default-width"} -->
<hr
	class="wp-block-separator has-text-color has-background has-beige-background-color has-beige-color is-style-wide default-width" />
<!-- /wp:separator -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- /wp:query-loop -->

<!-- wp:group {"className:"default-width archive-pagination"} -->
<div class="wp-block-group default-width archive-pagination">
<div class="wp-block-group__inner-container">
	<!-- wp:query-pagination /-->
</div>
</div>
<!-- /wp:group -->

<!-- /wp:query -->

Meta.html template part:

<!-- wp:post-date /-->
<!-- wp:post-hierarchical-terms {"term":"category"} /-->
<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:post-author /-->
<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:post-tags /-->

[carolinan]

I retested this today after James mentioned in 37749 that it was working.

I was able to place template parts with working post blocks (author, content, post date, etc) inside the post template block.
The content was not static and duplicated as before, but correct for each post.
-However, I was only able to do it inside an HTML template file. It was not possible to insert template parts inside a post template block, or move a template part to a post template block, in the editors.

(WordPress 5.9 RC2, current Gutenberg trunk.)

Pinging @ryelle @tellyworth in case you want to test it as well.

[catkit]

I think I may have found a bug related to this issue. I'm not sure if I should open a new one, so I'll describe it here. Please forgive me if it's the wrong place and if so, let me know it and I'll start a new one.

I'm running WordPress 5.9 + Gutenberg 12.6.0

I'm developing a Blockbase child theme and I have a few CPTs. Although index and archive templates are identical, I need to keep them both as otherwise CPT pages will inherit the parent theme (Blockbase) archive template. So to make it easier to maintain it I created a template part out of the Post Template block. However, I tested it with Gutenberg on and off and it doesn't work as expected (I have some block plugins which I deactivated to run these tests too). The Query Loop block layout settings aren't applied in the site's frontend even though it does in the editor. It is set to display as a grid, but it renders as a list. I noticed that the container div doesn't have the flex and columns css classes. Maybe it's because it's inside a div.wp-block-template-part.

Index Template code:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","displayLayout":{"type":"flex","columns":3},"layout":{"inherit":true},"UAGDisplayConditions":"none"} -->
<main class="wp-block-query">

<!-- wp:template-part {"slug":"content", "theme":"tema-canal-ciencia"} /-->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:query-pagination {"paginationArrow":"arrow"} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></main>
<!-- /wp:query -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer-container"} /-->

Rendered HTML:

<main class="wp-container-620fa1971c1f8 wp-block-query">
<div class="alignwide wp-block-template-part"><ul class="wp-container-620fa19719f24 alignwide wp-block-post-template">

[carolinan]

@catkit What is inside the content template part?

[ndiego]

@carolinan this issue came up in today's Editor Bug Scrub. Is this still an issue? I am unable to add a Template Part block inside of the Post Template block, so perhaps something changed? Anyway, if still valid, I'll remove the "Stale" label. Thanks!

[t-hamano]

The first sample code presented in this issue contains blocks (core/post-hierarchical-terms, core/post-tags, core/query-loop) that don't already exist in latest Gutenberg, so wo need to make the new test html code to reproduce this issue.

@carolinan
Could you please provide information on how to reproduce this issue in the latest Gutenberg?

[carolinan]

I retested with Gutenberg 14.0.2. The original issue where the blocks inside the template part showed content from the wrong block in the query has been fixed.

Testing instructions:

1. Activate Twenty Twenty-Three.
2. In the HTML files, not the site editor, copy the post meta template part inclusion from single.html to the query and post template inside home.html:
3. Confirm that the editor and front shows the correct information (post date etc) for the correct post.

---

It is not possible to place template parts inside the post template in the site editor. (And template parts can't be used in the block editor at all)
That is a separate issue and a regression, because it will force theme developers to repeat code that is normally reused across several templates.
I think we need to rethink that. I think that what we can do in the HTML files and what we can do in the editor needs to match.
-If it is not intended for theme developers to use template parts inside the post template, then there should be a notice /warning/ the block should not show in the editor or front/ when the template part is present "in the wrong place" when the template is loaded.

Here is another example of where we can do something in the HTML, that is not causing block validation errors or warnings in the editor, but that can not be done in the editor:
Automattic/themes#6261

[t-hamano]

@carolinan
How about submitting the another issue about reusability of template parts and UI improvements regarding warning?
If the bug in this issue has been fixed, I think this issue should be closed.