Skip to content

Instantly share code, notes, and snippets.

@phil-sola
Created March 27, 2023 08:34
Show Gist options
  • Save phil-sola/bc2210ebbb244c8dda07b8d1b45ba2d8 to your computer and use it in GitHub Desktop.
Save phil-sola/bc2210ebbb244c8dda07b8d1b45ba2d8 to your computer and use it in GitHub Desktop.
Gutenberg Core Query Loop Block Variation
<?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 );
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'
}
}
} ]
] ] ],
]
],
});
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' );
@creative-andrew
Copy link

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 );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment