Gutenberg Core Query Loop Block Variation

block-filters.php

<?php

// Filters the front-end output of the query block
function prefix_random_posts_block_variation( $pre_render, $block ) {

	// Verify it's the block that should be modified using the namespace
	if ( !empty($block['attrs']['namespace']) && 'namespace/random-ordered-posts' === $block[ 'attrs' ][ 'namespace' ] ) {
		add_filter( 'query_loop_block_query_vars', function( $query ) {

			$post = get_queried_object();

			// also likely want to set order by this key in ASC so next event listed first
			$query['orderby'] = 'rand';
			$query['post__not_in'] = [ $post->ID ];


			return $query;
		}, 10, 2 );
	}

	return $pre_render;
}
add_filter( 'pre_render_block', 'prefix_random_posts_block_variation', 10, 2 );



// Filters the editor output of the query block
function prefix_rest_template_ordering( $args, $request ) {

	// grab custom query param from the request
	$random = $request->get_param( 'sortByRandom' );

	if ( $random ) {
		$args['orderby'] = 'rand';
	}

	return $args;
}
add_filter( 'rest_post_query', 'prefix_rest_template_ordering', 10, 2 );

block-variation.js

const VARIATION_NAME = 'namespace/random-ordered-posts';

wp.blocks.registerBlockVariation( 'core/query', {
	name: VARIATION_NAME,
	title: 'Random Loop',
	description: 'Displays your query loop block randomly ordered.',
	icon: 'randomize',
	attributes: {
		namespace: VARIATION_NAME,
		className: 'random',
		align: 'wide',
		query: {
			perPage: 3,
			postType: 'post',
			inherit: false,
			exclude: [],
			sortByRandom: true // Custom query param
		},
		displayLayout: {
			type: 'flex',
			columns: 3
		},
	},
	isActive: [ 'namespace' ],
	scope: [ 'inserter' ],
	allowedControls: [],
	innerBlocks: [
		[
			'core/post-template',
			{},
			[   [ 'core/post-featured-image' ],
				[ 'core/group', {
					layout: {
						type: 'flex',
						justifyContent: 'center'
					},
					style: {
						spacing: {
							blockGap: '8px'
						}
					}
				}, [
					[ 'core/post-title', {
						fontSize: 'fs-2',
						isLink: true,
						level: 3,
						textColor: 'title',
						
						style: {
							elements: {
								link: {
									color: {
										text: 'var:preset|color|title'
									}
								}
							},
							spacing: {
								margin: {
									bottom: '0'
								}
							},
							typography: {
								lineHeight: '1'
							}
						}
					} ], [ 'core/post-terms', {
							fontSize: 'fs-1',
							term: 'template-type',
							textColor: 'tertiary',
							style: {
								elements: {
									link: {
										color: {
											text: 'var:preset|color|tertiary'
										}
									}
								},
								typography: {
									fontWeight: '500',
									lineHeight: '1'
								}
							}
					} ]
			] ] ],
		]
	],
});

enqueue.php

function prefix_editor_assets() {
	  wp_enqueue_script( 'prefix-block-variations', get_template_directory_uri() . '/assets/js/block-variations.js', array( 'wp-blocks' ) );
};
add_action( 'enqueue_block_editor_assets', 'prefix_editor_assets' );

By doing this you are affecting subsequent queries: WordPress/gutenberg#60295

// Filters the front-end output of the query block

function prefix_random_posts_block_variation( $pre_render, $block ) {

	// Verify it's the block that should be modified using the namespace
	if ( !empty($block['attrs']['namespace']) && 'namespace/random-ordered-posts' === $block[ 'attrs' ][ 'namespace' ] ) {
		add_filter( 'query_loop_block_query_vars', function( $query ) {

			$post = get_queried_object();

			// also likely want to set order by this key in ASC so next event listed first
			$query['orderby'] = 'rand';
			$query['post__not_in'] = [ $post->ID ];


			return $query;
		}, 10, 2 );
	}

	return $pre_render;
}
add_filter( 'pre_render_block', 'prefix_random_posts_block_variation', 10, 2 );