wp:query-pagination block doesn't paginate the main query

[bobbingwide]

The core/query-pagination block doesn't appear to work at present.
For pages that should be using the main query, I would have expected the pagination to work using URLs with /page/n,
where n is the page number.

I believe it should be possible to add this logic for when the core/query-loop block is the main query.
ie When not within the core/query block.

[bobbingwide]

Proposed solution

This is similar to #11.

The PHP for the prototyped solution is fairly basic.

In query-pagination.php add a new function

/**
 * Renders the `core/query-pagination` block on the server for the main query.
 *
 * @param array    $attributes Block attributes.
 * @param string   $content    Block default content.
 * @param WP_Block $block      Block instance.
 *
 * @return string Returns the pagination for the query.
 */
function gutenberg_render_block_core_query_pagination_main_query( $attributes, $content, $block ) {
    $html = '<div class="wp-block-query-pagination">';
    $html .= paginate_links( [ 'type' => 'list'] );
    $html .= "</div>";
    return $html;
}

In gutenberg_render_block_core_query_pagination() test if ( isset( $block->context['queryId'] ) ) .
When true implement the current logic, else call the new function.

CSS styling for the Fizzie theme could be something like this:

.wp-block-query-pagination {
     clear: both;
 }

ul.page-numbers {
    display: block;
    padding-left: 0px;
}

.page-numbers li {
    display: inline-block;
}

.page-numbers li a {
    background-color: #f5f5f5;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    text-decoration: none;
    padding: 8px 12px;
}

.page-numbers li .current {
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
}

[bobbingwide]

Improved solution

I've found how to implement solutions for both this issue and #11 without having to change Gutenberg.
In the longer term I'll want to see fixes in Gutenberg, but for the short term I can use a solution that replaces
the render_callback function with my own function, depending on the block.

I should be able to do this for each dynamic block that needs a few tweaks:
On my list so far are:

• core/query-navigation - this issue
• core/query-loop - wp:query-loop doesn't dynamically use the chosen category #11
• core/post-excerpt - to add the missing </div>
• core/template-part - for other problems noted with the postId attribute see Attempt to create a FSE theme #1 (comment)
• core/post-content - for issue Fatal error - memory exhausted trying to edit a wp_template #7

and possibly

• core/post-date - to extend it to add post_modified_date information as well. Need a post-modified-date block similar to core/post-date #8

The solution hooks into the register_block_type_args filter.
We check the blocks type for each of the dynamic blocks we want to replace.
If the render_callback function is what we expect it to be then we replace it with our own callback fucnction, prefixed with fizzie_ instead of gutenberg_.
The replacement function may use the gutenberg function when it's deemed necessary.

e.g. For core/query-pagination the logic is

function fizzie_render_block_core_query_pagination( $attributes, $content, $block ) {
    if ( isset( $block->context['queryId'] ) ) {
        $html = gutenberg_render_block_core_query_pagination( $attributes, $content, $block );
    } else {
        $html = fizzie_render_block_core_query_pagination_main_query( $attributes, $content, $block );
    }
    return $html;
}

[bobbingwide]

The solution that works for Gutenberg 9.5 no longer works with Gutenberg 10.0.
I believe this is due to changes to the Query block and the associated changes to the Query Pagination block, but haven't looked at it yet.
This needs to be fixed before I deliver Fizzie to blocks.wp-a2z.org.

[bobbingwide]

On s.b/wp56/block, with Gutenberg 9.5.1 this is what I was getting with my original code.

<!-- wp:query-loop -->
<!-- wp:group {"className":"article"} -->
<div class="wp-block-group article"><div class="wp-block-group__inner-container">
    <!-- wp:post-title {"isLink":true} /-->
    <!-- wp:post-featured-image {"isLink":true} /-->

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

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

Note: In this solution I didn't use the wp:query block

[bobbingwide]

The query pagination block is now a lot better. Pagination's working fine. Issue should have been closed for Fizzie v0.3.0