TaxonomyParameterControl.jsx — GenerateBlocks 2.0.0

generateblocks / src / blocks / query / components / TaxonomyParameterControl.jsx

generateblocks / src / blocks / query / components Last commit date

AddQueryParameterButton.jsx 1 year ago BlockSettings.jsx 1 year ago ControlBuilder.jsx 1 year ago DateQueryControl.jsx 1 year ago DateTimeControl.jsx 1 year ago ParameterControl.jsx 1 year ago ParameterList.jsx 1 year ago QueryInspectorControls.jsx 1 year ago SelectQueryParameter.jsx 1 year ago TaxonomyParameterControl.jsx 1 year ago editor.scss 1 year ago

TaxonomyParameterControl.jsx

118 lines

1	import { useEffect, useMemo, useState } from '@wordpress/element';
2	import { ToggleControl, ComboboxControl } from '@wordpress/components';
3	import { __ } from '@wordpress/i18n';
4
5	import { Stack, SelectTerm } from '@edge22/components';
6
7	import { useTaxonomies } from '@hooks';
8
9	export function TaxonomyParameterControl( props ) {
10	const { label, placeholder, value, onChange, help, postType } = props;
11	const [ taxonomy, setTaxonomy ] = useState( value.taxonomy );
12	const [ terms, setTerms ] = useState( value.terms );
13	const [ includeChildren, setIncludeChildren ] = useState( false !== value.includeChildren );
14	const [ operator, setOperator ] = useState( value?.operator );
15
16	const taxonomies = useTaxonomies( postType );
17
18	const isHierarchical = useMemo( () => {
19	const tax = taxonomies.filter( ( record ) => ( record.slug === taxonomy ) );
20
21	return !! tax[ 0 ] ? tax[ 0 ].hierarchical : false;
22	}, [ JSON.stringify( taxonomies ), taxonomy ] );
23
24	useEffect( () => {
25	if ( value.taxonomy !== taxonomy ) {
26	setTaxonomy( value.taxonomy );
27	}
28
29	if ( JSON.stringify( value.terms ) !== JSON.stringify( terms ) ) {
30	setTerms( value.terms );
31	}
32	}, [ value ] );
33
34	useEffect( () => {
35	if ( !! taxonomy ) {
36	const tax = taxonomies.filter( ( record ) => ( record.slug === taxonomy ) );
37	const rest = !! tax[ 0 ] ? tax[ 0 ].rest_base : undefined;
38	const hierarchical = !! tax[ 0 ] ? tax[ 0 ].hierarchical : false;
39
40	onChange( {
41	taxonomy,
42	terms,
43	rest,
44	operator,
45	includeChildren: hierarchical ? includeChildren : undefined,
46	} );
47	}
48	}, [ taxonomy, operator, JSON.stringify( terms ), includeChildren ] );
49
50	const taxonomiesOptions = useMemo( () => (
51	taxonomies
52	.filter( ( tax ) => ( 'nav_menu' !== tax.slug ) )
53	.map( ( tax ) => ( { value: tax.slug, label: tax.name } ) )
54	), [ JSON.stringify( taxonomies ) ] );
55
56	let termsLabel = __( 'Select Terms', 'generateblocks' );
57
58	if ( 'category' === taxonomy ) {
59	termsLabel = __( 'Select Categories', 'generateblocks' );
60	} else if ( 'post_tag' === taxonomy ) {
61	termsLabel = __( 'Select Tags', 'generateblocks' );
62	}
63
64	return (
65	<Stack gap="12px" className="gb-tax-query">
66	<ComboboxControl
67	label={ label }
68	placeholder={ placeholder \|\| __( 'Select taxonomy', 'generateblocks' ) }
69	options={ taxonomiesOptions }
70	value={ taxonomy }
71	onChange={ ( newValue ) => {
72	setTaxonomy( newValue );
73	setTerms( [] );
74	} }
75	/>
76
77	{ taxonomy &&
78	<>
79	<SelectTerm
80	label={ termsLabel }
81	taxonomy={ taxonomy }
82	value={ terms }
83	multiple={ true }
84	onChange={ setTerms }
85	help={ terms.length === 0
86	? __( 'You must select at least one term. Search by name or ID.', 'generateblocks' )
87	: help
88	}
89	/>
90	<ComboboxControl
91	label={ __( 'Include or exclude', 'generateblocks' ) }
92	value={ operator }
93	options={ [
94	{
95	value: 'IN',
96	label: __( 'Include', 'generateblocks' ),
97	},
98	{
99	value: 'NOT IN',
100	label: __( 'Exclude', 'generateblocks' ),
101	},
102	] }
103	onChange={ setOperator }
104	help={ __( 'Choose to include or exclude the selected taxonomy terms' ) }
105	/>
106	{ isHierarchical &&
107	<ToggleControl
108	checked={ includeChildren }
109	label={ __( 'Include child terms', 'generateblocks' ) }
110	onChange={ setIncludeChildren }
111	/>
112	}
113	</>
114	}
115	</Stack>
116	);
117	}
118