Query Block doesn't seem to provide settings to a Post Template in a pattern/template-part

[warudin]

I’ve created a synched pattern per post-type to use as a Post Template-block inside the Query Loop-block.
This seems to work just fine in the editor, it all shows up as I’d expect.

But if I save the page and look to the front-end, something weird is happening.
The configured settings for the Query Loop-block are not passed through to the Post Template-block.
The settings for the post-type, number of posts, offset, everything is reset to the default values.

Per example:
I configured the Query Loop-block to use the post-type “Team”, but it’s showing posts from the default “Post” post-type.
The setting ITEMS PER PAGE is also being ignored, the setting from Settings > Reading > Blog pages show at most is being used.
The same goes for when the Post Template is being added as a template-part instead of a synched patterns.
However, if I “detach” the synched pattern (it reverts to normal blocks), things start to work as intended on the front-end!

Therefore I was wondering: Is it not intended to use the Post Template-block as a synched pattern or template-part?

This is an example of the block structure that I'd like to use for this use case:

This is a screen capture of the difference between the front-end and back-end that I described above:

Naamloos.mov

The Block Structure is like this when the Post Template block is a pattern (<!-- wp:block {"ref":3808} /-->).

<!-- wp:query {"queryId":181,"query":{"perPage":3,"pages":0,"offset":0,"postType":"events","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]}} -->
<div class="wp-block-query"><!-- wp:query-title {"type":"archive","showPrefix":false} /-->

<!-- wp:block {"ref":3808} /-->

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

<!-- wp:query-pagination {"paginationArrow":"arrow","showLabel":false,"layout":{"type":"flex","justifyContent":"center"},"fontSize":"small"} -->
<!-- wp:query-pagination-previous /-->

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

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

<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query -->

This is the structure for the pattern itself:

<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"style":{"border":{"radius":"30px","width":"2px","color":"#f0f0f1"},"dimensions":{"minHeight":"100%"},"spacing":{"padding":{"top":"30px","bottom":"30px","left":"30px","right":"30px"}}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"bottom","justifyContent":"left"}} -->
<div class="wp-block-group has-border-color" style="border-color:#f0f0f1;border-width:2px;border-radius:30px;min-height:100%;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:group {"style":{"border":{"radius":"10px"}},"className":"no-overflow","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group no-overflow" style="border-radius:10px"><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","width":"100%","scale":"fill","align":"full","style":{"border":{"radius":"10px"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->

<!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0.44rem","bottom":"0.44rem","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"layout":{"selfStretch":"fit","flexSize":null},"typography":{"fontSize":"0.75rem","lineHeight":"1.4"}},"backgroundColor":"primary","className":"event-details absolute top-0 left-0"} -->
<p class="event-details absolute top-0 left-0 has-primary-background-color has-background" style="padding-top:0.44rem;padding-right:var(--wp--preset--spacing--40);padding-bottom:0.44rem;padding-left:var(--wp--preset--spacing--40);font-size:0.75rem;line-height:1.4"><strong>Donderdag</strong><br>22-12-2023</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:post-terms {"term":"category","textColor":"foreground"} /-->

<!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"},":hover":{"color":{"text":"var:preset|color|primary"}}}},"typography":{"textTransform":"none","fontSize":"1.5rem","lineHeight":1.4}}} /-->

<!-- wp:paragraph -->
<p>Event details tabel.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:group -->

[stokesman]

I gave your examples a try and I see the same results. Because it works in the editor it gives the impression it should work on the frontend too. I'm not familiar with the code involved in this so I'm not sure if there's a hard technical limitation or not.

Looking into this I found a clue that makes me believe this is not intended to be supported. The Post Template block specifically opts out of support:

gutenberg/packages/block-library/src/post-template/block.json

Lines 18 to 19 in 7eddee3

	"supports": {
	"reusable": false,

I.e. converting a Post Template block to a synced pattern doesn’t work but that’s easily excepted if Post Template is wrapped in a block that doesn't opt out.

Even were this intended for support it is probably also an issue that previews of such a pattern are blank. Figuring out what should be done about that seems like no small matter.

It looks like you'll probably have to seek alternative solutions. In our other chat you mentioned you already have a block variation for the Query Loop block. I think you could add more features to that variation to have it fulfill your needs though it would obviously be more development effort. As an idea: whether it uses a Swiper slider or not could controlled by a toggle switch and it could reset its inner blocks when the configured post type changes by pulling them from a pattern by a naming convention based on post type. I think that could work and that way your patterns could still be edited via the GUI. There's still the case where it could be inferior to a synced pattern because existing instances of the variation wouldn't take up edits made in a pattern but not sure if that's much of a concern.

[warudin]

We are looking into a workaround and can probably find something. It's gonna be less then ideal, but we need to continue in this project.

The main concern here is that the Editor side of the website actually shows the desired behaviour, while the front-end is showing something totally different. That can never be the desired situation.

Just a little bit of context: Our designers have created a different "card" per post-type for a theme, that's not a very farfetched use case. As developers we took on this project to try and use the Full Site Editing feature of WordPress to create that theme.

[codewizard13]

@warudin I'm also in need of this feature - did you ever get this resolved?