Query pagination block cannot be dragged into a group

[fklein-lu]

Description

Query Pagination blocks cannot be dragged into Group blocks. This can only be done by manually changing the template markup. Query Pagination blocks need to be able to be placed into Groups for styling purposes.

Step-by-step reproduction instructions

1. Create a Query with a Query Loop and a Query Pagination.
2. Add a Group block into the Query block.
3. Attempt dragging the Query Pagination block into the Group block.

Expected behaviour

The Query Pagination block should be placed inside the Group block.

Actual behaviour

The Query Pagination block refuses to be put inside the Group block.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: 10.5.4
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No, custom FSE theme

Device information

• Device: Desktop
• Operating system: MacOS
• Browser: Safari

[carolinan]

Is it possible for a block to have more than one parent?
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/query-pagination/block.json#L6

[ntsekouras]

Query Pagination needs to be inside a Query block because it uses values from context to perform the proper pagination query. If we allow it in Group blocks it could create way more confusion IMO, if someone added by mistake.

Is it possible for a block to have more than one parent?

I'm not sure about this but wouldn't solve the problem here, unless we had a mechanism to allow blocks exist inside some/any blocks, as long as the parent is a specific block. For example to be able to say allowOnlyIfAncestor => Query.

For now let's see what styling options would you like for Pagination @fklein-lu, is it about background and colors? Because we could add this to the block.

[fklein-lu]

For now let's see what styling options would you like for Pagination @fklein-lu, is it about background and colors? Because we could add this to the block.

I'm not sure it's easy as this. Let's consider this layout:

It's straightforward:

• Main column with the posts: content-width.
• Pagination: Full-width background, links are wide width.

But this requires the following structure:

Query
  Group (content width)
     Query Loop
   Group (full width)
     Query Pagination

Which you can achieve by manually editing the templates, and it all still works.

So one could give the Query Pagination the same styling option as the Group block. But that then still doesn't answer the question of how a Query block can be restricted to the content width, while the Query Pagination is full-width, but with the links being wide aligned.

The issue is that one cannot expect a block as complex as the Query block to only have simple parent child relationships. Post blocks can also be placed in Groups inside of the Query Loop block, so I don't see what speaks against allowing the same for the Query.

[ntsekouras]

Okay, I got what you mean. The proper solution for this is for Query block to support layout like group. The problem though is that is not quite simple because there is an existing layout property and is special case that makes it rather complicated. I have already gave it it a try and probably will try again soon..

Post blocks can also be placed in Groups inside of the Query Loop block, so I don't see what speaks against allowing the same for the Query.

Post blocks are different in that they use as context post id and post type which is filled by the page itself or the Query block. QueryPagination uses the context that exists only in Query block as is tightly coupled with the query we want to execute..

[fklein-lu]

Post blocks are different in that they use as context post id and post type which is filled by the page itself or the Query block. QueryPagination uses the context that exists only in Query block as is tightly coupled with the query we want to execute..

There's no reason why the context couldn't be passed through from the Query to deeper blocks.

Meanwhile even complex groupings like the one below work, so I don't understand what the hangup is.

<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
  <!-- wp:query-loop -->
    <!-- wp:group {"layout":{"inherit":true}} -->
    <div class="wp-block-group">
	    <!-- wp:post-title {"isLink":true} /-->
	    <!-- wp:post-content /-->
    <!-- /wp:group -->
  <!-- /wp:query-loop -->

  <!-- wp:group {"style":{"layout":{"inherit":false,"contentSize":"100%"}} -->
  <div class="wp-block-group">
	  <!-- wp:group {"layout":{"contentSize":"960px"}} -->
	  <div class="wp-block-group"><!-- wp:query-pagination -->
		  <div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /-->
  
			  <!-- wp:query-pagination-numbers /-->
  
			  <!-- wp:query-pagination-next /--></div>
		  <!-- /wp:query-pagination --></div>
	  </div><!-- /wp:group -->
  </div><!-- /wp:group -->
<!-- /wp:query -->

[ntsekouras]

Meanwhile even complex groupings like the one below work, so I don't understand what the hangup is.

This is the hangup:

If we allow it in Group blocks it could create way more confusion IMO, if someone added by mistake.

Meanwhile I created a PR that solves your problem by adding layout support to Query.