Terms Query inspector controls revamp + add subterms option (#71633)

* Split controls into separate files

* Add subterms control

* Extract Empty Terms control

* Change the default parent to false

* Extract hierarchy control and make it render conditionally

* Make the terms to show a radio

* Modify the query depends on high level filters

* Default to all terms when changing some attributes

* Pass terms to show via context

* Filter only children terms when subtree is chosen

* Assign default query for subterms option

* Add explanation to subterms option

* Add a guard if terms is null

* Add support for subtree on the frontend

* Fix lint

* Fix merge conflicts

* Make code more defensive

* Simplify the condition

* Add end dot to comment

* Fix lint

* Rename function to match file name

* Rename MaxTermsControls to MaxTermsControl to make it consistent with the rest of inspector controls

* Fix duplicated taxonomies when showing all and hierarchical

* Fix lint

Co-authored-by: kmanijak <[email protected]>
Co-authored-by: mikachan <[email protected]>
Co-authored-by: Marc-pi <[email protected]>

Author: 4 people

docs/reference-guides/core-blocks.md

@@ -1007,7 +1007,7 @@ An advanced block that allows displaying taxonomy terms based on different query
 -	**Category:** theme
 -	**Allowed Blocks:** core/term-template
 -	**Supports:** align (full, wide), interactivity, ~~html~~
--	**Attributes:** namespace, tagName, termQuery, termQueryId
+-	**Attributes:** namespace, tagName, termQuery, termQueryId, termsToShow
 
 ## Text Columns (deprecated)
 

packages/block-library/src/term-template/block.json

@@ -8,7 +8,7 @@
 	"ancestor": [ "core/terms-query" ],
 	"description": "Contains the block elements used to render a taxonomy term, like the name, description, and more.",
 	"textdomain": "default",
-	"usesContext": [ "termQuery" ],
+	"usesContext": [ "termQuery", "termsToShow" ],
 	"attributes": {
 		"namespace": {
 			"type": "string"

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

@@ -191,13 +191,13 @@ export default function TermTemplateEdit( {
 	clientId,
 	setAttributes,
 	context: {
+		termsToShow,
 		termQuery: {
 			taxonomy,
 			order,
 			orderBy,
 			hideEmpty,
 			hierarchical,
-			parent,
 			perPage = 10,
 		} = {},
 	},
@@ -222,13 +222,18 @@ export default function TermTemplateEdit( {
 		queryArgs
 	);
 
-	// Filter to show only top-level terms if "Show only top-level terms" is enabled.
 	const filteredTerms = useMemo( () => {
-		if ( ! terms || parent !== 0 ) {
-			return terms;
+		if ( ! terms ) {
+			return [];
 		}
-		return terms.filter( ( term ) => ! term.parent );
-	}, [ terms, parent ] );
+		if ( termsToShow === 'top-level' ) {
+			return terms.filter( ( term ) => ! term.parent );
+		}
+		if ( termsToShow === 'subterms' ) {
+			return terms.filter( ( term ) => term.parent );
+		}
+		return terms;
+	}, [ terms, termsToShow ] );
 
 	const { blocks, variations, defaultVariation } = useSelect(
 		( select ) => {

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

@@ -27,7 +27,8 @@ function render_block_core_term_template( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$query = $query_block_context['termQuery'];
+	$query         = $query_block_context['termQuery'];
+	$terms_to_show = $query_block_context['termsToShow'] ?? 'all';
 
 	$query_args = array(
 		'taxonomy'   => $query['taxonomy'] ?? 'category',
@@ -39,13 +40,18 @@ function render_block_core_term_template( $attributes, $content, $block ) {
 		'exclude'    => $query['exclude'] ?? array(),
 	);
 
-	// Handle parent.
-	if ( ! empty( $query['hierarchical'] ) && isset( $query['parent'] ) ) {
-		$query_args['parent'] = $query['parent'];
-	} elseif ( ! empty( $query['hierarchical'] ) ) {
+	// We set parent to 0 only if we show all terms as hierarchical or we show top-level terms.
+	if ( ( 'all' === $terms_to_show && ! empty( $query['hierarchical'] ) ) || 'top-level' === $terms_to_show ) {
 		$query_args['parent'] = 0;
-	} elseif ( isset( $query['parent'] ) ) {
-		$query_args['parent'] = $query['parent'];
+	} elseif ( 'subterms' === $terms_to_show ) {
+		// Check if we're in a taxonomy archive context.
+		if ( is_tax( $query_args['taxonomy'] ) ) {
+			// Get the current term ID from the queried object.
+			$current_term_id = get_queried_object_id();
+			if ( $current_term_id && $current_term_id > 0 ) {
+				$query_args['parent'] = $current_term_id;
+			}
+		}
 	}
 
 	$terms_query = new WP_Term_Query( $query_args );

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

@@ -23,10 +23,15 @@
 				"hideEmpty": true,
 				"include": [],
 				"exclude": [],
-				"parent": 0,
+				"parent": false,
 				"hierarchical": false
 			}
 		},
+		"termsToShow": {
+			"type": "string",
+			"default": "all",
+			"enum": [ "all", "top-level", "subterms" ]
+		},
 		"tagName": {
 			"type": "string",
 			"default": "div"
@@ -37,7 +42,8 @@
 	},
 	"providesContext": {
 		"termQueryId": "termQueryId",
-		"termQuery": "termQuery"
+		"termQuery": "termQuery",
+		"termsToShow": "termsToShow"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],

packages/block-library/src/terms-query/inspector-controls.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+
+export default function AdvancedControls( {
+	TagName,
+	setAttributes,
+	clientId,
+} ) {
+	return (
+		<InspectorControls group="advanced">
+			<HTMLElementControl
+				tagName={ TagName }
+				onChange={ ( value ) => setAttributes( { tagName: value } ) }
+				clientId={ clientId }
+				options={ [
+					{ label: __( 'Default (<div>)' ), value: 'div' },
+					{ label: '<main>', value: 'main' },
+					{ label: '<section>', value: 'section' },
+					{ label: '<aside>', value: 'aside' },
+				] }
+			/>
+		</InspectorControls>
+	);
+}