Skip to content

Post Meta Query updates #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: trunk
Choose a base branch
from
Open

Post Meta Query updates #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
168b850
Basic UI updates.
ryanwelcher Apr 7, 2025
92528e0
Merge branch 'trunk' into try/vibe-code-ui-for-post-meta
ryanwelcher Apr 25, 2025
74de623
Merge branch 'trunk' into try/vibe-code-ui-for-post-meta
ryanwelcher Jul 9, 2025
ac04ae5
Update the post meta query builder to use the same layout as the Taxo…
ryanwelcher Jul 9, 2025
c83da56
Updating control text.
ryanwelcher Jul 10, 2025
fe93942
WIP
ryanwelcher Jul 10, 2025
baef49e
Fix incorrect advanced mode logic.
ryanwelcher Jul 10, 2025
c85433f
Change the copy for the post meta builder to use conditions instead o…
ryanwelcher Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions includes/Traits/Meta_Query.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ public function parse_meta_query( $meta_query_data ) {
'key' => $query['meta_key'] ?? '',
'value' => $query['meta_value'] ?? '',
'compare' => $query['meta_compare'] ?? '',
'type' => $query['meta_type'] ?? '',
)
);
}
Expand Down
285 changes: 187 additions & 98 deletions src/components/post-meta-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@
* WordPress dependencies
*/
import {
SelectControl,
TextControl,
Button,
FormTokenField,
BaseControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalHStack as HStack,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';

const compareMetaOptions = [
'=',
Expand All @@ -30,6 +33,23 @@ const compareMetaOptions = [
'RLIKE',
];

const metaTypeOptions = [
'CHAR',
'NUMERIC',
'BINARY',
'DATE',
'DATETIME',
'DECIMAL',
'SIGNED',
'TIME',
'UNSIGNED',
];

const toggleMargin = {
marginTop: '0.75em',
marginBottom: '0.75em',
};

export const PostMetaControl = ( {
registeredMetaKeys,
id,
Expand All @@ -38,18 +58,34 @@ export const PostMetaControl = ( {
setAttributes,
} ) => {
const activeQuery = queries.find( ( query ) => query.id === id );
const [ advancedMode, setAdvancedMode ] = useState( false );
const [ disableAdvancedToggle, setDisableAdvancedToggle ] =
useState( false );

useEffect( () => {
// This causes advanced mode to be enabled if the meta_type or meta_compare is set and breaks updating.
if (
( activeQuery?.meta_type && activeQuery?.meta_type !== 'CHAR' ) ||
( activeQuery?.meta_compare && activeQuery?.meta_compare !== '=' )
) {
setAdvancedMode( true );
setDisableAdvancedToggle( true );
} else {
setDisableAdvancedToggle( false );
}
}, [ activeQuery?.meta_type, activeQuery?.meta_compare ] );

/**
* Update a query param.
*
* @param {*} queries
* @param {*} queryId
* @param {*} item
* @param {*} value
* @returns
* @param {Array} currentQueries The current queries array
* @param {string} queryId The query ID to update
* @param {string} item The key to update
* @param {string} value The value to update
* @return {Array} The updated queries array
*/
const updateQueryParam = ( queries, queryId, item, value ) => {
return queries.map( ( query ) => {
const updateQueryParam = ( currentQueries, queryId, item, value ) => {
return currentQueries.map( ( query ) => {
if ( query.id === queryId ) {
return {
...query,
Expand All @@ -62,71 +98,17 @@ export const PostMetaControl = ( {

return (
<>
<BaseControl
help={ __(
'Start typing to search for a meta key or manually enter one.',
'advanced-query-loop'
) }
__nextHasNoMarginBottom
>
<FormTokenField
label={ __( 'Meta Key', 'advanced-query-loop' ) }
value={
activeQuery?.meta_key?.length
? [ activeQuery.meta_key ]
: []
}
__experimentalShowHowTo={ false }
suggestions={ registeredMetaKeys }
maxLength={ 1 }
onChange={ ( newMeta ) => {
setAttributes( {
query: {
...attributes.query,
meta_query: {
...attributes.query.meta_query,
queries: updateQueryParam(
queries,
id,
'meta_key',
newMeta[ 0 ]
),
},
},
} );
} }
__nextHasNoMarginBottom
/>
</BaseControl>
<TextControl
label={ __( 'Meta Value', 'advanced-query-loop' ) }
value={ activeQuery.meta_value }
onChange={ ( newValue ) => {
setAttributes( {
query: {
...attributes.query,
meta_query: {
...attributes.query.meta_query,
queries: updateQueryParam(
queries,
id,
'meta_value',
newValue
),
},
},
} );
} }
/>
<SelectControl
label={ __( 'Meta Compare', 'advanced-query-loop' ) }
value={ activeQuery.meta_compare }
options={ [
...compareMetaOptions.map( ( operator ) => {
return { label: operator, value: operator };
} ),
] }
onChange={ ( newCompare ) => {
<FormTokenField
label={ __( 'Meta Key', 'advanced-query-loop' ) }
value={
activeQuery?.meta_key?.length
? [ activeQuery.meta_key ]
: []
}
__experimentalShowHowTo={ false }
suggestions={ registeredMetaKeys }
maxLength={ 1 }
onChange={ ( newMeta ) => {
setAttributes( {
query: {
...attributes.query,
Expand All @@ -135,37 +117,144 @@ export const PostMetaControl = ( {
queries: updateQueryParam(
queries,
id,
'meta_compare',
newCompare
'meta_key',
newMeta[ 0 ]
),
},
},
} );
} }
__nextHasNoMarginBottom
/>
<Button
size="small"
variant="secondary"
isDestructive
onClick={ () => {
const updatedQueries = queries.filter(
( query ) => query.id !== id
);
{ activeQuery?.meta_key?.length > 0 && (
<>
<TextControl
label={ __( 'Meta Value', 'advanced-query-loop' ) }
value={ activeQuery.meta_value }
onChange={ ( newValue ) => {
setAttributes( {
query: {
...attributes.query,
meta_query: {
...attributes.query.meta_query,
queries: updateQueryParam(
queries,
id,
'meta_value',
newValue
),
},
},
} );
} }
/>
{ advancedMode && (
<>
<SelectControl
label={ __(
'Meta Compare',
'advanced-query-loop'
) }
value={ activeQuery.meta_compare }
options={ [
...compareMetaOptions.map( ( operator ) => {
return {
label: operator,
value: operator,
};
} ),
] }
onChange={ ( newCompare ) => {
setAttributes( {
query: {
...attributes.query,
meta_query: {
...attributes.query.meta_query,
queries: updateQueryParam(
queries,
id,
'meta_compare',
newCompare
),
},
},
} );
} }
/>
<SelectControl
label={ __(
'Meta Type',
'advanced-query-loop'
) }
value={ activeQuery.meta_type }
options={ [
...metaTypeOptions.map( ( type ) => {
return {
label: type,
value: type,
};
} ),
] }
onChange={ ( newType ) => {
setAttributes( {
query: {
...attributes.query,
meta_query: {
...attributes.query.meta_query,
queries: updateQueryParam(
queries,
id,
'meta_type',
newType
),
},
},
} );
} }
__nextHasNoMarginBottom
/>
</>
) }
</>
) }
<hr />
<HStack
alignment={ activeQuery?.meta_key ? 'edge' : 'right' }
style={ toggleMargin }
>
{ activeQuery?.meta_key && (
<ToggleControl
checked={ advancedMode }
label={ __( 'Advanced mode', 'advanced-query-loop' ) }
onChange={ () => setAdvancedMode( ! advancedMode ) }
disabled={ disableAdvancedToggle }
/>
) }
<Button
key={ id }
variant="secondary"
size="small"
isDestructive
onClick={ () => {
const updatedQueries = queries.filter(
( query ) => query.id !== id
);

setAttributes( {
query: {
...attributes.query,
meta_query: {
...attributes.query.meta_query,
queries: updatedQueries,
setAttributes( {
query: {
...attributes.query,
meta_query: {
...attributes.query.meta_query,
queries: updatedQueries,
},
},
},
} );
} }
>
{ __( 'Remove meta query', 'advanced-query-loop' ) }
</Button>
} );
} }
>
{ __( 'Remove query', 'advanced-query-loop' ) }
</Button>
</HStack>
<hr />
<br />
</>
);
};
Loading
Loading