WordPress Block Editor: Add a custom Query block variation with a Post Template

readme.md

WordPress Block Editor - Adding a Query Block Variation with nested InnerBlocks

As of October 29th, 2022, WordPress core does not have a Query block variation that includes the post's Categories. This code snippet fixes that.

Use this code to add a variation to the Query Block. The variation will appear when choosing a Post Template for the Query block.

The new variation will have the post's Featured Image, Title, and Categories. The title will be an H3 and link to the post. The featured image will use the Thumbnail size.

Steps to include this in your WordPress theme

If you don't have a Block Editor JS file yet

1. Add the functions.php code to your functions.php file
2. If you don't have an Block Editor JS file yet: create a block-editor.js file in your assets/js/ folder. Copy and paste the block-editor.js code included here into your block-editor.js file.

If you already have a Block Editor JS file

1. Paste in like 16-50 of the block-editor.js file included here. Put that inside your wp.domReady( () => { } ); function. Put line 1-12 go before your wp.domReady( () => {} ); function. Lines 1-12 allow us to use a WordPress Core icon for our block variation: imageDateTitle.

block-editor.js

/**
 * Include variable for ImageDateTitle icon from core. Used in the Query Block Variation below
 */
const external_wp_element_namespaceObject = window["wp"]["element"];
const external_wp_components_namespaceObject = window["wp"]["components"];

const imageDateTitle = (0, external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.SVG, {
	xmlns: "http://www.w3.org/2000/svg",
	viewBox: "0 0 48 48"
  }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Path, {
	d: "M7 9h34v6H7V9zm12 8H7v1h12v-1zm18 3H7v1h30v-1zm0 18H7v1h30v-1zM7 35h12v1H7v-1zm34-8H7v6h34v-6z"
  }));
  
wp.domReady( () => {

/**
 *  Block Variations: Register Custom Block Variations for this theme
 *  https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/ 
 */
	
// Query Block Post Template: Image, Category & Title
	wp.blocks.registerBlockVariation( 'core/query', {
		name: 'query-post-template-image-cat-title',
		title : 'Post Image, Categories & Title',
		icon: imageDateTitle,
		isDefault : true,
		scope : 'block',
		innerBlocks: [  
			['core/post-template', {}, [
				['core/post-title',
					{ level : 3, isLink : true }
				], 
				['core/post-terms',
					{ term : 'category', separator : ' • ' }
				],
				['core/post-featured-image', 
					{ sizeSlug : 'thumbnail'}
				], 
			] ], 
			['core/query-pagination', {
				layout : {
					type : 'flex',
					justifyContent : 'space-between'
				}
			}, [
				['core/query-pagination-previous'],
				['core/query-pagination-next']
			]]
		]
	} );
  
  } );

functions.php

/**
 * Block editor scripts
 * 
 */
function theme_blockeditor_scripts() {

	wp_enqueue_script(
		'theme-editor-js', 
		get_stylesheet_directory_uri() . '/assets/js/block-editor.js', 
		array( 'wp-blocks', 'wp-dom'), 
		filemtime( get_stylesheet_directory() . '/assets/js/block-editor.js' ),
		true
	);

}
add_action( 'enqueue_block_editor_assets', 'theme_blockeditor_scripts' );