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.