Add Terms Query block patterns

lib/compat/wordpress-6.9/terms-query-block-patterns.php

@@ -0,0 +1,97 @@
+<?php
+/**
+ * Terms Query block patterns.
+ *
+ * @since 6.9.0
+ * @package gutenberg
+ * @subpackage Patterns
+ */
+
+/**
+ * Registers block patterns for the Terms Query block.
+ *
+ * @since 6.9.0
+ * @access private
+ */
+function gutenberg_terms_query_register_block_patterns() {
+	$should_register_core_patterns = get_theme_support( 'core-block-patterns' );
+
+	if ( $should_register_core_patterns ) {
+		$term_query_block_patterns = array(
+			'term-query-cat-descriptions' => array(
+				'title'      => _x( 'Category Descriptions', 'Block pattern title' ),
+				'blockTypes' => array( 'core/terms-query' ),
+				'categories' => array( 'query' ),
+				'content'    => '<!-- wp:terms-query -->
+					<div class="wp-block-terms-query">
+					<!-- wp:term-template {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","flexWrap":"nowrap"}} -->
+					<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap","justifyContent":"stretch"}} -->
+					<div class="wp-block-group">
+					<!-- wp:heading {"metadata":{"bindings":{"content":{"source":"core/term-data","args":{"key":"name"}}}}} -->
+					<h2 class="wp-block-heading"></h2>
+					<!-- /wp:heading -->
+					<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/term-data","args":{"key":"description"}}}}} -->
+					<p></p>
+					<!-- /wp:paragraph -->
+					<!-- wp:buttons -->
+					<div class="wp-block-buttons">
+					<!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/term-data","args":{"key":"link"}}}}} -->
+					<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">' . _x( 'View posts', 'Block pattern button text' ) . '</a></div>
+					<!-- /wp:button -->
+					</div>
+					<!-- /wp:buttons -->
+					</div>
+					<!-- /wp:group -->
+					<!-- /wp:term-template -->
+					</div>
+					<!-- /wp:terms-query -->',
+			),
+			'term-query-cat-list'         => array(
+				'title'      => _x( 'Category List', 'Block pattern title' ),
+				'blockTypes' => array( 'core/terms-query' ),
+				'categories' => array( 'query' ),
+				'content'    => '<!-- wp:terms-query {"termQuery":{"taxonomy":"category","hierarchical":true,"hideEmpty":false}} -->
+					<div class="wp-block-terms-query">
+					<!-- wp:term-template {"layout":{"type":"constrained"}} -->
+					<!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
+					<div class="wp-block-group">
+					<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/term-data","args":{"key":"name"}}}}} -->
+					<p></p>
+					<!-- /wp:paragraph -->
+					<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/term-data","args":{"key":"count"}}}}} -->
+					<p></p>
+					<!-- /wp:paragraph -->
+					</div>
+					<!-- /wp:group -->
+					<!-- /wp:term-template -->
+					</div>
+					<!-- /wp:terms-query -->',
+			),
+			'term-query-tag-links'        => array(
+				'title'      => _x( 'Tag Links', 'Block pattern title' ),
+				'blockTypes' => array( 'core/terms-query' ),
+				'categories' => array( 'query' ),
+				'content'    => '<!-- wp:terms-query {"termQuery":{"taxonomy":"post_tag","hideEmpty":true}} -->
+					<div class="wp-block-terms-query">
+					<!-- wp:term-template {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","orientation":"horizontal","justifyContent":"left","flexWrap":"wrap"}} -->
+					<!-- wp:buttons -->
+					<div class="wp-block-buttons">
+					<!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/term-data","args":{"key":"link"}},"text":{"source":"core/term-data","args":{"key":"name"}}}}} -->
+					<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+					<!-- /wp:button -->
+					</div>
+					<!-- /wp:buttons -->
+					<!-- /wp:term-template -->
+					</div>
+					<!-- /wp:terms-query -->',
+			),
+		);
+
+		foreach ( $term_query_block_patterns as $name => $pattern ) {
+			$pattern['source'] = 'core';
+			register_block_pattern( 'core/' . $name, $pattern );
+		}
+	}
+}
+
+add_action( 'init', 'gutenberg_terms_query_register_block_patterns' );

lib/load.php

@@ -41,6 +41,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	// WordPress 6.9 compat.
 	require __DIR__ . '/compat/wordpress-6.9/post-data-block-bindings.php';
 	require __DIR__ . '/compat/wordpress-6.9/term-data-block-bindings.php';
+	require __DIR__ . '/compat/wordpress-6.9/terms-query-block-patterns.php';
 	require __DIR__ . '/compat/wordpress-6.9/rest-api.php';
 	require __DIR__ . '/compat/wordpress-6.9/class-gutenberg-hierarchical-sort.php';
 

packages/block-library/src/term-template/edit.js

@@ -7,22 +7,16 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { memo, useMemo, useState } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { layout } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockContextProvider,
 	__experimentalUseBlockPreview as useBlockPreview,
-	__experimentalBlockVariationPicker as BlockVariationPicker,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEntityRecords } from '@wordpress/core-data';
-import {
-	createBlocksFromInnerBlocksTemplate,
-	store as blocksStore,
-} from '@wordpress/blocks';
 
 const TEMPLATE = [
 	[
@@ -189,7 +183,6 @@ function isActiveTerm( termId, activeBlockContextId, blockContexts ) {
 
 export default function TermTemplateEdit( {
 	clientId,
-	setAttributes,
 	context: {
 		termQuery: {
 			taxonomy,
@@ -204,7 +197,6 @@ export default function TermTemplateEdit( {
 	__unstableLayoutClassNames,
 } ) {
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 
 	const queryArgs = {
 		order,
@@ -230,19 +222,12 @@ export default function TermTemplateEdit( {
 		return terms.filter( ( term ) => ! term.parent );
 	}, [ terms, parent ] );
 
-	const { blocks, variations, defaultVariation } = useSelect(
+	const { blocks } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
-			const { getBlockVariations, getDefaultBlockVariation } =
-				select( blocksStore );
 
 			return {
 				blocks: getBlocks( clientId ),
-				variations: getBlockVariations( 'core/term-template', 'block' ),
-				defaultVariation: getDefaultBlockVariation(
-					'core/term-template',
-					'block'
-				),
 			};
 		},
 		[ clientId ]
@@ -263,37 +248,6 @@ export default function TermTemplateEdit( {
 		[ filteredTerms, taxonomy ]
 	);
 
-	// Show variation picker if no blocks exist.
-	if ( ! blocks?.length ) {
-		return (
-			<div { ...blockProps }>
-				<BlockVariationPicker
-					icon={ layout }
-					label={ __( 'Term Template' ) }
-					variations={ variations }
-					instructions={ __(
-						'Choose a layout for displaying terms:'
-					) }
-					onSelect={ ( nextVariation = defaultVariation ) => {
-						if ( nextVariation.attributes ) {
-							setAttributes( nextVariation.attributes );
-						}
-						if ( nextVariation.innerBlocks ) {
-							replaceInnerBlocks(
-								clientId,
-								createBlocksFromInnerBlocksTemplate(
-									nextVariation.innerBlocks
-								),
-								true
-							);
-						}
-					} }
-					allowSkip
-				/>
-			</div>
-		);
-	}
-
 	if ( isResolving ) {
 		return (
 			<ul { ...blockProps }>

packages/block-library/src/term-template/index.js

@@ -10,17 +10,14 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
-import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	icon,
-	variations,
 	edit,
 	save,
-	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/terms-query/block.json

@@ -6,7 +6,13 @@
 	"title": "Terms Query",
 	"category": "theme",
 	"description": "An advanced block that allows displaying taxonomy terms based on different query parameters and visual configurations.",
-	"keywords": [ "terms", "taxonomy", "categories", "tags", "list" ],
+	"keywords": [
+		"terms",
+		"taxonomy",
+		"categories",
+		"tags",
+		"list"
+	],
 	"textdomain": "default",
 	"attributes": {
 		"termQueryId": {
@@ -35,15 +41,24 @@
 			"type": "string"
 		}
 	},
+	"usesContext": [
+		"templateSlug",
+		"termQuery"
+	],
 	"providesContext": {
 		"termQueryId": "termQueryId",
 		"termQuery": "termQuery"
 	},
 	"supports": {
-		"align": [ "wide", "full" ],
+		"align": [
+			"wide",
+			"full"
+		],
 		"html": false,
 		"interactivity": true
 	},
-	"allowedBlocks": [ "core/term-template" ],
+	"allowedBlocks": [
+		"core/term-template"
+	],
 	"style": "wp-block-terms-query"
 }