Skip to content

Commit ac04ae5

Browse files
ryanwelcherryanwelcher
committed
Update the post meta query builder to use the same layout as the Taxonomy builder.
Introduce advanced mode and new meta type control.
1 parent 74de623 commit ac04ae5

File tree

6 files changed

+164
-61
lines changed

6 files changed

+164
-61
lines changed

‎includes/Traits/Meta_Query.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ public function parse_meta_query( $meta_query_data ) {
2525
'key' => $query['meta_key'] ?? '',
2626
'value' => $query['meta_value'] ?? '',
2727
'compare' => $query['meta_compare'] ?? '',
28+
'type' => $query['meta_type'] ?? '',
2829
)
2930
);
3031
}

‎src/components/post-meta-control.js‎

Lines changed: 107 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import {
88
__experimentalHStack as HStack,
99
SelectControl,
1010
TextControl,
11+
ToggleControl,
1112
} from '@wordpress/components';
1213
import { __ } from '@wordpress/i18n';
14+
import { useState, useEffect } from '@wordpress/element';
1315

1416
const compareMetaOptions = [
1517
'=',
@@ -31,8 +33,20 @@ const compareMetaOptions = [
3133
'RLIKE',
3234
];
3335

36+
const metaTypeOptions = [
37+
'CHAR',
38+
'NUMERIC',
39+
'BINARY',
40+
'DATE',
41+
'DATETIME',
42+
'DECIMAL',
43+
'SIGNED',
44+
'TIME',
45+
'UNSIGNED',
46+
];
47+
3448
const toggleMargin = {
35-
marginTop: '1.5em',
49+
marginTop: '0.75em',
3650
marginBottom: '0.75em',
3751
};
3852

@@ -44,15 +58,27 @@ export const PostMetaControl = ( {
4458
setAttributes,
4559
} ) => {
4660
const activeQuery = queries.find( ( query ) => query.id === id );
61+
const [ advancedMode, setAdvancedMode ] = useState( false );
62+
const [ disableAdvancedToggle, setDisableAdvancedToggle ] =
63+
useState( false );
64+
65+
useEffect( () => {
66+
if ( activeQuery?.meta_type || activeQuery?.meta_compare ) {
67+
setAdvancedMode( true );
68+
setDisableAdvancedToggle( true );
69+
} else {
70+
setDisableAdvancedToggle( false );
71+
}
72+
}, [ activeQuery?.meta_type, activeQuery?.meta_compare ] );
4773

4874
/**
4975
* Update a query param.
5076
*
51-
* @param {Array} currentQueries The current queries array
52-
* @param {string} queryId The query ID to update
53-
* @param {string} item The key to update
54-
* @param {string} value The value to update
55-
* @return {Array} The updated queries array
77+
* @param {Array} currentQueries The current queries array
78+
* @param {string} queryId The query ID to update
79+
* @param {string} item The key to update
80+
* @param {string} value The value to update
81+
* @return {Array} The updated queries array
5682
*/
5783
const updateQueryParam = ( currentQueries, queryId, item, value ) => {
5884
return currentQueries.map( ( query ) => {
@@ -94,7 +120,6 @@ export const PostMetaControl = ( {
94120
},
95121
} );
96122
} }
97-
__nextHasNoMarginBottom
98123
/>
99124
{ activeQuery?.meta_key?.length > 0 && (
100125
<>
@@ -118,39 +143,88 @@ export const PostMetaControl = ( {
118143
} );
119144
} }
120145
/>
121-
<SelectControl
122-
label={ __( 'Meta Compare', 'advanced-query-loop' ) }
123-
value={ activeQuery.meta_compare }
124-
options={ [
125-
...compareMetaOptions.map( ( operator ) => {
126-
return { label: operator, value: operator };
127-
} ),
128-
] }
129-
onChange={ ( newCompare ) => {
130-
setAttributes( {
131-
query: {
132-
...attributes.query,
133-
meta_query: {
134-
...attributes.query.meta_query,
135-
queries: updateQueryParam(
136-
queries,
137-
id,
138-
'meta_compare',
139-
newCompare
140-
),
141-
},
142-
},
143-
} );
144-
} }
145-
__nextHasNoMarginBottom
146-
/>
146+
{ advancedMode && (
147+
<>
148+
<SelectControl
149+
label={ __(
150+
'Meta Compare',
151+
'advanced-query-loop'
152+
) }
153+
value={ activeQuery.meta_compare }
154+
options={ [
155+
...compareMetaOptions.map( ( operator ) => {
156+
return {
157+
label: operator,
158+
value: operator,
159+
};
160+
} ),
161+
] }
162+
onChange={ ( newCompare ) => {
163+
setAttributes( {
164+
query: {
165+
...attributes.query,
166+
meta_query: {
167+
...attributes.query.meta_query,
168+
queries: updateQueryParam(
169+
queries,
170+
id,
171+
'meta_compare',
172+
newCompare
173+
),
174+
},
175+
},
176+
} );
177+
} }
178+
/>
179+
<SelectControl
180+
label={ __(
181+
'Meta Type',
182+
'advanced-query-loop'
183+
) }
184+
value={ activeQuery.meta_type }
185+
options={ [
186+
...metaTypeOptions.map( ( type ) => {
187+
return {
188+
label: type,
189+
value: type,
190+
};
191+
} ),
192+
] }
193+
onChange={ ( newType ) => {
194+
setAttributes( {
195+
query: {
196+
...attributes.query,
197+
meta_query: {
198+
...attributes.query.meta_query,
199+
queries: updateQueryParam(
200+
queries,
201+
id,
202+
'meta_type',
203+
newType
204+
),
205+
},
206+
},
207+
} );
208+
} }
209+
__nextHasNoMarginBottom
210+
/>
211+
</>
212+
) }
147213
</>
148214
) }
149215
<hr />
150216
<HStack
151217
alignment={ activeQuery?.meta_key ? 'edge' : 'right' }
152218
style={ toggleMargin }
153219
>
220+
{ activeQuery?.meta_key && (
221+
<ToggleControl
222+
checked={ advancedMode }
223+
label={ __( 'Advanced mode', 'advanced-query-loop' ) }
224+
onChange={ () => setAdvancedMode( ! advancedMode ) }
225+
disabled={ disableAdvancedToggle }
226+
/>
227+
) }
154228
<Button
155229
key={ id }
156230
variant="secondary"

‎src/components/post-meta-query-controls.js‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @wordpress/no-unsafe-wp-apis */
12
/**
23
* External dependencies
34
*/
@@ -23,6 +24,7 @@ import { useEffect, useState } from '@wordpress/element';
2324
* Internal dependencies
2425
*/
2526
import { PostMetaControl } from './post-meta-control';
27+
import useRegisteredMeta from '../hooks/useRegisteredMeta';
2628

2729
/**
2830
* Converts the meta keys from the all sources into a single array.
@@ -53,7 +55,6 @@ export const PostMetaQueryControls = ( {
5355
const { records } = useEntityRecords( 'postType', postType, {
5456
per_page: 1,
5557
} );
56-
5758
const [ selectedPostType ] = useState( postType );
5859

5960
useEffect( () => {
@@ -62,7 +63,7 @@ export const PostMetaQueryControls = ( {
6263
setAttributes( {
6364
query: {
6465
...attributes.query,
65-
include_posts: [],
66+
// include_posts: [],
6667
meta_query: {},
6768
},
6869
} );
@@ -85,21 +86,16 @@ export const PostMetaQueryControls = ( {
8586
} }
8687
renderToggle={ ( { isOpen, onToggle } ) => (
8788
<Button
88-
variant="primary"
89+
variant={ isOpen ? 'primary' : 'secondary' }
8990
onClick={ onToggle }
9091
aria-haspopup="true"
9192
aria-expanded={ isOpen }
9293
disabled={ Object.keys( registeredMeta ).length === 0 }
9394
>
94-
{ isOpen
95-
? __(
96-
'Close Meta Query Builder',
97-
'advanced-query-loop'
98-
)
99-
: __(
100-
'Open Meta Query Builder',
101-
'advanced-query-loop'
102-
) }
95+
{ __(
96+
'Post Meta query builder',
97+
'advanced-query-loop'
98+
) }
10399
</Button>
104100
) }
105101
renderContent={ () => (
@@ -118,15 +114,15 @@ export const PostMetaQueryControls = ( {
118114
<>
119115
<ToggleControl
120116
label={ __(
121-
'Combine filters',
117+
'Match Any Filter',
122118
'advanced-query-loop'
123119
) }
124120
help={ __(
125-
'By default, filters are combined with the OR operator. Enable this option to combine filters with the AND operator.',
121+
'By default, filters are combined using the AND operator, meaning all filter conditions must be met. Enable this option to use the OR operator instead, allowing results that match any of the filter conditions.',
126122
'advanced-query-loop'
127123
) }
128124
checked={
129-
relationFromQuery === 'AND'
125+
relationFromQuery === 'OR'
130126
}
131127
onChange={ () => {
132128
setAttributes( {

‎src/components/taxonomy-query-control.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,21 +63,16 @@ export const TaxonomyQueryControl = ( {
6363
} }
6464
renderToggle={ ( { isOpen, onToggle } ) => (
6565
<Button
66-
variant="primary"
66+
variant={ isOpen ? 'primary' : 'secondary' }
6767
onClick={ onToggle }
6868
aria-haspopup="true"
6969
aria-expanded={ isOpen }
7070
disabled={ availableTaxonomies.length === 0 }
7171
>
72-
{ isOpen
73-
? __(
74-
'Close Taxonomy Query Builder',
75-
'advanced-query-loop'
76-
)
77-
: __(
78-
'Open Taxonomy Query Builder',
79-
'advanced-query-loop'
80-
) }
72+
{ __(
73+
'Taxonomy query builder',
74+
'advanced-query-loop'
75+
) }
8176
</Button>
8277
) }
8378
renderContent={ () => (

‎src/hooks/useRegisteredMeta.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* WordPress Dependencies
3+
*/
4+
import { useState } from '@wordpress/element';
5+
import { select } from '@wordpress/data';
6+
7+
function useRegisteredMeta( listOfPostTypes ) {
8+
console.log( listOfPostTypes );
9+
const [ meta, setMeta ] = useState();
10+
const results = listOfPostTypes.map( ( item ) =>
11+
select( 'core' ).getEntityRecords( 'postType', item, {
12+
per_page: 1,
13+
} )
14+
);
15+
console.log( results );
16+
}
17+
18+
export default useRegisteredMeta;

‎src/variations/controls.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
/* eslint-disable @wordpress/no-unsafe-wp-apis */
12
/**
23
* WordPress dependencies
34
*/
45
import { addFilter } from '@wordpress/hooks';
56
import { InspectorControls } from '@wordpress/block-editor';
6-
import { PanelBody } from '@wordpress/components';
7+
import {
8+
PanelBody,
9+
__experimentalVStack as VStack,
10+
BaseControl,
11+
} from '@wordpress/components';
712
import { __ } from '@wordpress/i18n';
813
import { createBlock } from '@wordpress/blocks';
914

@@ -70,8 +75,22 @@ const withAdvancedQueryControls = ( BlockEdit ) => ( props ) => {
7075
/>
7176

7277
<MultiplePostSelect { ...propsWithControls } />
73-
<TaxonomyQueryControl { ...propsWithControls } />
74-
<PostMetaQueryControls { ...propsWithControls } />
78+
<BaseControl
79+
label={ __(
80+
'Query Builders',
81+
'advanced-query-loop'
82+
) }
83+
id="query-builders"
84+
>
85+
<VStack alignment="center">
86+
<TaxonomyQueryControl
87+
{ ...propsWithControls }
88+
/>
89+
<PostMetaQueryControls
90+
{ ...propsWithControls }
91+
/>
92+
</VStack>
93+
</BaseControl>
7594
<PostOrderControls { ...propsWithControls } />
7695
<PostExcludeControls { ...propsWithControls } />
7796
<PostIncludeControls { ...propsWithControls } />

0 commit comments

Comments
 (0)