Block context not working in the <ServerSideRender /> component

[rafaucau]

I have a block that is a child of Query Loop block (#43449). This block uses the query context.
It works on the frontend, but in the editor when I'm use <ServerSideRender /> I see results of the default global query.

Parent block (posts-section)

import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import { BlockEditProps, TemplateArray } from '@wordpress/blocks';

export default () => {
  const blockProps = useBlockProps();

  let TEMPLATE: TemplateArray = [
    ['my/section-header'],
    ['core/query', {}, [['my/posts-template']]],
  ];

  const innerBlockProps = useInnerBlocksProps(blockProps, {
    template: TEMPLATE,
    templateLock: 'all',
  });

  return <section {...innerBlockProps} />;
};

Block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "my/posts-template",
  "title": "Posts template",
  "category": "text",
  "parent": ["my/posts-section", "core/query"],
  "usesContext": ["queryId", "query", "queryContext"],
  "supports": {
    "html": false
  },
  "editorScript": "file:./index.ts",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

JS

import { useBlockProps } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';

export default ({ context }) => {
  const blockProps = useBlockProps();

  return (
    <div {...blockProps}>
      <ServerSideRender block="my/posts-template" />
    </div>
  );
};

PHP

public function render_callback( array $attributes, string $content, WP_Block $block ): string {
    $query_args = build_query_vars_from_query_block( $block, 1 );

    $query = new WP_Query( $query_args );

    if ( ! $query->have_posts() ) {
        return '';
    }

    $content = '';
    while ( $query->have_posts() ) {
        $query->the_post();

        ob_start(); ?>
        <article>
            <!--Test-->
            <?php the_title() ?>
        </article>
        <?php $content .= ob_get_clean();
    }

    wp_reset_postdata();

    return "<div>$content</div>";
}

The $block->context is an empty array when is rendered using ServerSideRender.

Is there a workaround for this?

[rafaucau]

Right after posting this question I came up with a workaround.
Just pass the context as attributes and in PHP check if the context is empty. If it is, then the attributes can be set as context.

export default ({ context }) => {
  const blockProps = useBlockProps();

  return (
    <div {...blockProps}>
      <ServerSideRender block="my/posts-template" attributes={context} />
    </div>
  );
};

public function render_callback( array $attributes, string $content, WP_Block $block ): string {
    if ( empty( $block->context ) ) {
        $block->context = $attributes;
    }

    $query_args = build_query_vars_from_query_block( $block, 1 );

    $query = new WP_Query( $query_args );
   // Rest of the code
}

Block.json:

  "attributes": {
    "queryId": {
      "type": "number"
    },
    "query": {
      "type": "object"
    }
  },

[gziolo]

This is a known issue. It's being tracked in #40714. It'd be great to fix it directly in the block editor to pass the context correctly.

[rafaucau]

It'd be great to fix it directly in the block editor to pass the context correctly.

I could help, it is a small change. The bigger problem is with the approach to it. I see that I need to do two pull requests. One to WordPress that will modify the API endpoint. And the other to Gutenberg, which will add props.
The WP repo requires a link to the ticket in trac, but the issue is reported in this repo.
I'm a little unsure how to approach this.

[gziolo]

REST API is extensible. Do you think it would be possible to use existing filters to apply all the necessary changes in the Gutenberg plugin and patch the WordPress core as the next step.