Add Terms Query container block

backport-changelog/6.9/9356.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9356
+
+* https://github.com/WordPress/gutenberg/pull/70720

docs/reference-guides/core-blocks.md

@@ -942,6 +942,16 @@ Display the description of categories, tags and custom taxonomies when viewing a
 -	**Supports:** align (full, wide), color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
+## Terms Query
+
+An advanced block that allows displaying taxonomy terms based on different query parameters and visual configurations. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/terms-query))
+
+-	**Name:** core/terms-query
+-	**Experimental:** true
+-	**Category:** theme
+-	**Supports:** align (full, wide), interactivity, layout, ~~html~~
+-	**Attributes:** namespace, tagName, termQuery, termQueryId
+
 ## Text Columns (deprecated)
 
 This block is deprecated. Please use the Columns block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/text-columns))

lib/blocks.php

@@ -119,6 +119,7 @@ function gutenberg_reregister_core_block_types() {
 				'tag-cloud.php'                    => 'core/tag-cloud',
 				'template-part.php'                => 'core/template-part',
 				'term-description.php'             => 'core/term-description',
+				'terms-query.php'                  => 'core/terms-query',
 				'video.php'                        => 'core/video',
 			),
 		),

packages/block-library/src/index.js

@@ -118,6 +118,7 @@ import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
+import * as termsQuery from './terms-query';
 import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
@@ -231,6 +232,7 @@ const getAllBlocks = () => {
 		homeLink,
 		logInOut,
 		termDescription,
+		termsQuery,
 		queryTitle,
 		postAuthorBiography,
 	];

packages/block-library/src/style.scss

@@ -67,6 +67,7 @@
 @import "./table/style.scss";
 @import "./table-of-contents/style.scss";
 @import "./term-description/style.scss";
+@import "./terms-query/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";

packages/block-library/src/terms-query/README.md

@@ -0,0 +1,83 @@
+# Terms Query Block
+
+The Terms Query block is an advanced block that allows displaying taxonomy terms based on different query parameters and visual configurations. It works similarly to the Query block but for taxonomy terms instead of posts.
+
+## Features
+
+- Query taxonomy terms with various parameters (taxonomy, order, orderby, hide_empty, etc.)
+- Support for hierarchical taxonomies
+- Multiple display layouts (list, grid)
+- Inner blocks for customizing term display
+- Inspector controls for query configuration
+
+## Block Structure
+
+The Terms Query block consists of:
+
+1. **Terms Query** (`core/terms-query`) - The main container block
+2. **Terms Template** (`core/terms-template`) - Template for individual terms
+
+## Default Template
+
+By default, the Terms Template includes:
+- Term Name
+
+## Query Parameters
+
+The Terms Query block supports the following query parameters:
+
+- `taxonomy` - The taxonomy to query (default: 'category')
+- `perPage` - Number of terms per page
+- `pages` - Number of pages to query
+- `order` - Order direction ('asc' or 'desc')
+- `orderBy` - Order by field ('name', 'slug', 'term_id', 'count')
+- `hideEmpty` - Whether to hide terms with no posts
+- `hierarchical` - Whether to show hierarchical structure
+- `parent` - Parent term ID for hierarchical queries, set to 0 to show only top-level terms
+- `exclude` - Array of term IDs to exclude
+- `include` - Array of term IDs to include
+
+## Usage Example
+
+```html
+<!-- wp:terms-query {"termQueryId":0,"termQuery":{"taxonomy":"category","order":"asc","orderBy":"name"}} -->
+<ul class="wp-block-terms-query">
+  <!-- wp:terms-template -->
+  <li class="wp-block-term">
+    <!-- term content -->
+  </li>
+  <!-- /wp:terms-template -->
+</ul>
+<!-- /wp:terms-query -->
+```
+
+## Block Variations
+
+
+
+## Context
+
+The Terms Query block provides the following context to its inner blocks:
+
+- `termQueryId` - Unique identifier for the query
+- `termQuery` - Query parameters
+- `termId` - The current term ID
+- `taxonomy` - The current taxonomy slug
+
+## Styling
+
+The block supports:
+- Alignment controls
+- Color settings (background, text, link)
+- Typography controls
+- Spacing controls
+- Border controls
+- Layout controls
+
+## Server-side Rendering
+
+The block includes PHP server-side rendering for:
+- Query execution using `WP_Term_Query`
+- Context filtering for inner blocks
+- Proper HTML structure generation
+- Term class application

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

@@ -0,0 +1,50 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/terms-query",
+	"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" ],
+	"textdomain": "default",
+	"attributes": {
+		"termQueryId": {
+			"type": "number"
+		},
+		"termQuery": {
+			"type": "object",
+			"default": {
+				"perPage": 100,
+				"pages": 0,
+				"taxonomy": "category",
+				"order": "asc",
+				"orderBy": "name",
+				"hideEmpty": true,
+				"include": [],
+				"exclude": [],
+				"parent": 0,
+				"hierarchical": false
+			}
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		},
+		"namespace": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "templateSlug" ],
+	"providesContext": {
+		"termQueryId": "termQueryId",
+		"termQuery": "termQuery"
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false,
+		"layout": true,
+		"interactivity": true
+	},
+	"style": "wp-block-terms-query"
+}

packages/block-library/src/terms-query/edit.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import TermsQueryContent from './terms-query-content';
+
+const TermsQueryEdit = ( props ) => {
+	return <TermsQueryContent { ...props } />;
+};
+
+export default TermsQueryEdit;

packages/block-library/src/terms-query/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { loop as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+	example: {},
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/terms-query/index.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Server-side rendering of the `core/terms-query` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/terms-query` block on the server.
+ *
+ * @since 6.x.x
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the output of the query, structured using the layout defined by the block's inner blocks.
+ */
+function render_block_core_terms_query( $attributes, $content, $block ) {
+	if ( ! isset( $attributes['termQuery'] ) || ! isset( $block ) ) {
+		return '';
+	}
+
+	$classnames         = 'wp-block-terms-query';
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$content
+	);
+}
+
+
+/**
+ * Registers the `core/terms-query` block on the server.
+ *
+ * @since 6.x.x
+ */
+function register_block_core_terms_query() {
+	register_block_type_from_metadata(
+		__DIR__ . '/terms-query',
+		array(
+			'render_callback' => 'render_block_core_terms_query',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_terms_query' );