Extend fiddle of core/post-template to display related posts when className attribute is related

[bobbingwide]

In the UK WP Community Slack #support channel Jamie Glasspool specified his requirements to extend the WordPress Query loop.

In my main post template I want to list the three most recent posts in the same category as the current post (while also excluding the current post itself). In the page builder, doing this was simply a case of adding a blog posts module and choosing to filter the results based on 'current category' from a dropdown.

This doesn't appear to be supported in the default Wordpress Query Loop block and I'm having no joy working out how best to do it, nor finding anyone else who's tried the same thing. Ideally I would like to simply create this functionality and add it as a tick box to the existing Query Loop block under Filters or create a block variation that had this built in.

I'm surprised that showing 'related posts' is not a common enough feature that there isn't an existing solution out there I can borrow from.

Proposed solution

• Prototype a further fiddle to the logic that overrides the core/post-template server side rendering when the className attribute is set to related.
• The override will replace the original value of the query, taxQuery, category array within the block's context, which is passed from the query (loop) block.

The fiddle function will be something like this

/**
 * Fiddles the query depending on the value of the Additional Class(es) field.
 *
 * Fiddles the query to support orderby=rand when the className is "rand".
 * Fiddles the query to support display of posts in the related category/categories when the className is "related"
 */
function thisis_post_template_fiddle( $attributes, $content, $block ) {

	$className = isset( $attributes['className'])  ? $attributes['className'] : null;
	if ( $className && 'rand' === $className ) {
		$block->context['query']['orderBy'] = $className;
	}

	if ( $className && 'related' === $className ) {
		//bw_trace2();
		$post = get_post();
		//bw_trace2( $post );
		$terms = wp_get_post_categories( $post->ID, [ 'fields' => 'ids']);
		//bw_trace2( $terms, "terms", false );
		$block->context['query']['taxQuery']['category'] = $terms;
	}
	//bw_trace2();
	return $block;
}

Explanation

• functions.php requires the /includes/block-overrides.php file
• which requires includes/block-override-functions.php
• which implements logic to override the render_callback function in thisis_maybe_override_block()
• In the thisis theme it (currently) only overrides Gutenberg
• ... For WordPress core the if can be commented out
• The overrides are implemented in response to the register_block_type_args filter, which is called for each block registered.
• The override logic for core/post-template is implemented in includes\post-template.php as thisis_render_block_core_post_template().

function thisis_render_block_core_post_template( $attributes, $content, $block ) {
	$block = thisis_post_template_fiddle( $attributes, $content, $block );
	$html = gutenberg_render_block_core_post_template( $attributes, $content, $block );
	return $html;
}

If not using Gutenberg remove the gutenberg_ prefix to the call to peform the actual rendering of the post-template.

In the fiddle function

If the $className is 'related' then

• get the current post
• get an array of the IDs for the categories for this post
• assign this to the taxQuery part of the context for the query

Testing notes

In my local test I just implemented the Query loop within a post
The original category is 1 "uncategorised".

<!-- wp:query {"queryId":9,"query":{"perPage":"3","pages":0,"offset":0,"postType":"post","order":"asc","orderBy":"title","author":"","search":" ","exclude":[],"sticky":"exclude","inherit":false,"taxQuery":{"category":[1]}},"metadata":{"categories":["posts"],"patternName":"core/query-grid-posts","name":"Grid"},"className":" "} -->
<div class="wp-block-query"><!-- wp:post-template {"className":"related","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /-->

<!-- wp:post-date /-->

<!-- wp:post-terms {"term":"category"} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->