Block: Query Pagination: Pagination inserted as a template part or pattern does not work

[webmandesign]

Description

I'm trying to separate each template into as many parts as possible for easier global design. Meaning, I want to have Query Pagination block as a template part, so user can easily change the design of the pagination in one place and it will affect all the instances where pagination template part is being used.

However, it seems it's not possible. When I insert pagination as a template part (or a pattern) into another template part with Query block, the pagination stops working. Pagination links are wrong and also the current paged state is not honored.

Is there any restriction for Query Pagination to be used directly as a child of Query block without being inserted as pattern or template part?

Step-by-step reproduction instructions

Creating a template part and a pattern with Query Pagination block. Here is the content:

<!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
	<!-- wp:query-pagination-previous /-->
	<!-- wp:query-pagination-numbers /-->
	<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

Then insert the pagination into some template file with a Query block using all of these:

<!-- wp:template-part {"slug":"pagination","theme":"theme-slug"} /-->

<!-- wp:pattern {"slug":"theme-slug/pagination"} /-->

<!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
	<!-- wp:query-pagination-previous /-->
	<!-- wp:query-pagination-numbers /-->
	<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

You will see, only the last approach works. Pagination inserted as a template part and a pattern does not work.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.1.1
both with and without Gutenberg 15.1.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

Yes, the query pagination is limited to using the query as the parent.
The query loop block passes the query data to the query pagination and the inner blocks.

[webmandesign]

Thank you for the explanation, Carolina.

Do you know, is there a plan to improve this? As a theme author (from a classic theme approach) I am used to split each repeating element into its own file/template part, so I don't repeat the code all the time. It is also easier to do modifications at one place then.

I can imagine, if user likes to change the design or layout of pagination, it is currently only possible by editing all template files containing the pagination in a block theme. This is very tedious. The only global manageable approach for user currently would be to use custom CSS instead of editing each template file with Site Editor.

That's what the issue is all about.

[webmandesign]

Could the Query Loop block pass the query data to additional inner blocks such as <!-- wp:template-part /--> and <!-- wp:pattern /-->? And pagination (and possibly other blocks) could inherit the query data from there subsequently?
Would this be viable solution?

[webmandesign]

Just an additional info, I've tried to enable queryId and query inheritance for Template Part and Pattern blocks (so they can pass those to nested Pagination block) via my theme JS using a code similar to:

( function() {
	'use strict';

	wp.hooks.addFilter(
		'blocks.registerBlockType',
		'theme-slug/block-mods',
		function( settings, name ) {

			if (
				'core/template-part' === name
				|| 'core/pattern' === name
			) {
				settings = lodash.merge( settings, {
					usesContext: [ 'queryId', 'query' ]
				} );
			}

			return settings;
		},
		5
	);
} )();

But it does not seem to work.

[carolinan]

I think we need to implement something like this #39894

[webmandesign]

Great catch, Carolina! Thanks for pointing this out, I think it would really help here too.

[Mamaduka]

I think this is a duplicate of #38684.