Merge pull request #1584 from tomusborne/tweak/query-inspector-controls

Implement new SelectTerms

includes/class-meta-handler.php

@@ -203,7 +203,8 @@ public static function get_meta( $id, $key, $single_only = true, $callable = nul
 			null,
 			$id,
 			$key,
-			$callable
+			$callable,
+			$single_only
 		);
 
 		if ( is_numeric( $id ) ) {

includes/class-query-utils.php

@@ -105,7 +105,7 @@ public function get_wp_query( $request ) {
 				$attributes,
 				null,
 				[
-					'post_id' => $current_post,
+					'post_id'   => $current_post,
 					'author_id' => $current_author,
 				]
 			)

package.json

@@ -19,7 +19,7 @@
 	},
 	"dependencies": {
 		"@edge22/block-styles": "^1.1.31",
-		"@edge22/components": "^1.1.47",
+		"@edge22/components": "^1.1.48",
 		"@edge22/styles-builder": "^1.2.48",
 		"@wordpress/block-editor": "^12.12.0",
 		"@wordpress/blocks": "^12.21.0",

src/blocks/query/components/ControlBuilder.jsx

@@ -2,11 +2,6 @@ import { ToggleControl, Button, Tooltip, ComboboxControl, TextControl } from '@w
 import { sprintf, __ } from '@wordpress/i18n';
 
 import { isArray, isObject } from 'lodash';
-
-import {
-	CategoriesSelect,
-	TagsSelect,
-} from '@components';
 import { SelectPostType, SelectPost, MultiSelect, SelectUser } from '@edge22/components';
 import { Control } from '@edge22/styles-builder';
 
@@ -55,10 +50,6 @@ function ControlComponent( props ) {
 					currentLabel={ __( 'Current author', 'generateblocks' ) }
 				/>
 			);
-		case 'categoriesSelect':
-			return <CategoriesSelect { ...standardProps } />;
-		case 'tagsSelect':
-			return <TagsSelect { ...standardProps } />;
 		case 'taxonomySelect':
 			return <TaxonomyParameterControl postType={ postType } { ...standardProps } />;
 		case 'includePosts':

src/blocks/query/components/TaxonomyParameterControl.jsx

@@ -2,9 +2,8 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
 import { ToggleControl, ComboboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-import { Stack } from '@edge22/components';
+import { Stack, SelectTerm } from '@edge22/components';
 
-import { TaxonomiesSelect } from '@components';
 import { useTaxonomies } from '@hooks';
 
 export function TaxonomyParameterControl( props ) {
@@ -54,6 +53,14 @@ export function TaxonomyParameterControl( props ) {
 			.map( ( tax ) => ( { value: tax.slug, label: tax.name } ) )
 	), [ JSON.stringify( taxonomies ) ] );
 
+	let termsLabel = __( 'Select Terms', 'generateblocks' );
+
+	if ( 'category' === taxonomy ) {
+		termsLabel = __( 'Select Categories', 'generateblocks' );
+	} else if ( 'post_tag' === taxonomy ) {
+		termsLabel = __( 'Select Tags', 'generateblocks' );
+	}
+
 	return (
 		<Stack gap="12px" className="gb-tax-query">
 			<ComboboxControl
@@ -69,21 +76,16 @@ export function TaxonomyParameterControl( props ) {
 
 			{ taxonomy &&
 				<>
-					<TaxonomiesSelect
+					<SelectTerm
+						label={ termsLabel }
 						taxonomy={ taxonomy }
 						value={ terms }
-						filterName={ 'generateblocks.editor.taxonomy-parameter-control.' + props.id }
-						placeholder={ placeholder || __( 'Search terms…', 'generateblocks' ) }
-						onChange={ ( newValue ) => {
-							const newTerms = newValue.reduce( ( result, option ) => {
-								result.push( option.value );
-
-								return result;
-							}, [] );
-
-							setTerms( newTerms );
-						} }
-						help={ terms.length === 0 ? __( 'You must select at least one term. Search by name or ID.', 'generateblocks' ) : help }
+						multiple={ true }
+						onChange={ setTerms }
+						help={ terms.length === 0
+							? __( 'You must select at least one term. Search by name or ID.', 'generateblocks' )
+							: help
+						}
 					/>
 					<ComboboxControl
 						label={ __( 'Include or exclude', 'generateblocks' ) }

src/dynamic-tags/components/DynamicTagSelect.jsx

@@ -18,10 +18,10 @@ import {
 	useTermRecord,
 	useUserRecord,
 	SelectUser,
+	SelectTerm,
 } from '@edge22/components';
 
 import { SelectTaxonomy } from './SelectTaxonomy';
-import { SelectTerm } from './SelectTerm';
 
 function parseTag( tagString ) {
 	const regex = /\{{([\w_]+)(?:\s+(\w+(?::(?:[^|]+))?(?:\|[\w_]+(?::(?:[^|]+))?)*)?)?\}}/;
@@ -294,7 +294,6 @@ export function DynamicTagSelect( { onInsert, tagName, selectedText, currentPost
 		[]
 	);
 
-	// TODO: Check if we need to do the terms thing anymore now that we're using SelectTerm.
 	const postRecordArgs = useMemo( () => {
 		const options = {};
 		const load = [];
@@ -411,17 +410,23 @@ export function DynamicTagSelect( { onInsert, tagName, selectedText, currentPost
 		} = parsedTag?.params;
 
 		if ( id ) {
-			if ( 'term' === type ) {
-				setDynamicSource( 'term' );
-				setTermSource( id );
-			} else if ( 'user' === type ) {
-				setDynamicSource( 'user' );
-				setUserSource( id );
-			} else if ( 'media' === type ) {
-				setMediaSource( id );
-			} else {
-				setDynamicSource( 'post' );
-				setPostIdSource( id );
+			switch ( type ) {
+				case 'term':
+					setDynamicSource( 'term' );
+					setTermSource( id );
+					break;
+				case 'user':
+					setDynamicSource( 'user' );
+					setUserSource( id );
+					break;
+				case 'media':
+					setMediaSource( id );
+					break;
+				case 'post':
+				default:
+					setDynamicSource( 'post' );
+					setPostIdSource( id );
+					break;
 			}
 		}
 
@@ -512,10 +517,10 @@ export function DynamicTagSelect( { onInsert, tagName, selectedText, currentPost
 
 		if ( postIdSource && 'post' === dynamicTagType && 'post' !== dynamicSource ) {
 			setDynamicSource( 'post' );
-		} else if ( termSource && 'term' === dynamicTagType && 'term' !== dynamicSource ) {
-			setDynamicSource( 'term' );
 		} else if ( userSource && 'user' === dynamicTagType && 'user' !== dynamicSource ) {
 			setDynamicSource( 'user' );
+		} else if ( termSource && 'term' === dynamicTagType && 'term' !== dynamicSource ) {
+			setDynamicSource( 'term' );
 		} else if ( ! dynamicSource ) {
 			setDynamicSource( 'current' );
 		}
@@ -741,23 +746,25 @@ export function DynamicTagSelect( { onInsert, tagName, selectedText, currentPost
 						</>
 					) }
 
-					{ ( 'term' === dynamicTagType || tagSupportsTaxonomy ) && (
+					{ ( ( 'term' === dynamicTagType && 'term' === dynamicSource ) || tagSupportsTaxonomy ) && (
 						<SelectTaxonomy
 							onChange={ setTaxonomySource }
 							postType={ 'term' !== dynamicTagType && record?.post_type }
 							value={ taxonomySource }
 						/>
 					) }
 
-					{ ( 'term' === dynamicSource ) && (
+					{ ( 'term' === dynamicSource && taxonomySource ) && (
 						<SelectTerm
 							postId={ 'post' === dynamicTagType && postIdSource }
 							value={ termSource }
-							onSelect={ ( selected ) => {
+							onChange={ ( selected ) => {
 								const newTermSource = selected?.value ?? selected;
 								debouncedSetTermSource( newTermSource ? newTermSource : 0 );
 							} }
 							taxonomy={ taxonomySource }
+							includeCurrent={ false }
+							onClear={ () => setTermSource( '' ) }
 						/>
 					) }
 

src/dynamic-tags/components/SelectTaxonomy.jsx

@@ -20,7 +20,7 @@ export function SelectTaxonomy( { onChange, value, help, postType } ) {
 			id={ 'gblocks-select-taxonomy' }
 			label={ __( 'Select taxonomy', 'generateblocks' ) }
 			help={ help }
-			placeholder={ __( 'Select taxonomy', 'generateblocks' ) }
+			placeholder={ __( 'Select Taxonomy…', 'generateblocks' ) }
 			options={ options }
 			value={ value ? value : options[ 0 ]?.value ?? '' }
 			onChange={ onChange }