Skip to content
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

[Block Library - Query Loop]: Try filters with ToolsPanel #42629

Merged
merged 5 commits into from
Aug 8, 2022
Merged

[Block Library - Query Loop]: Try filters with ToolsPanel #42629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d2a3b8c
WIP: Try Query Loop filters with ToolsPanel
ntsekouras Jul 22, 2022
3af9179
add hook for taxonomiesInfo
ntsekouras Aug 1, 2022
4f31291
update panel item styles
ntsekouras Aug 2, 2022
89f8f59
address feedback
ntsekouras Aug 8, 2022
185ab9d
hide taxonomies filters by default
ntsekouras Aug 8, 2022
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
194 changes: 129 additions & 65 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
RangeControl,
ToggleControl,
Notice,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
Expand All @@ -26,7 +28,7 @@ import { store as coreStore } from '@wordpress/core-data';
import OrderControl from './order-control';
import AuthorControl from './author-control';
import ParentControl from './parent-control';
import TaxonomyControls from './taxonomy-controls';
import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
import StickyControl from './sticky-control';
import { usePostTypes } from '../../utils';

Expand Down Expand Up @@ -57,6 +59,7 @@ export default function QueryInspectorControls( {
} = query;
const [ showSticky, setShowSticky ] = useState( postType === 'post' );
const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
const taxonomiesInfo = useTaxonomiesInfo( postType );
const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
useEffect( () => {
setShowSticky( postType === 'post' );
Expand Down Expand Up @@ -100,78 +103,139 @@ export default function QueryInspectorControls( {
return onChangeDebounced.cancel;
}, [ querySearch, onChangeDebounced ] );
return (
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
label={ __( 'Inherit query from template' ) }
help={ __(
'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
) }
checked={ !! inherit }
onChange={ ( value ) => setQuery( { inherit: !! value } ) }
/>
{ ! inherit && (
<SelectControl
options={ postTypesSelectOptions }
value={ postType }
label={ __( 'Post type' ) }
onChange={ onPostTypeChange }
<>
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
label={ __( 'Inherit query from template' ) }
help={ __(
'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
) }
checked={ !! inherit }
onChange={ ( value ) =>
setQuery( { inherit: !! value } )
}
/>
) }
{ displayLayout?.type === 'flex' && (
<>
<RangeControl
label={ __( 'Columns' ) }
value={ displayLayout.columns }
onChange={ ( value ) =>
setDisplayLayout( { columns: value } )
}
min={ 2 }
max={ Math.max( 6, displayLayout.columns ) }
{ ! inherit && (
<SelectControl
options={ postTypesSelectOptions }
value={ postType }
label={ __( 'Post type' ) }
onChange={ onPostTypeChange }
help={ __(
'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
) }
/>
{ displayLayout.columns > 6 && (
<Notice status="warning" isDismissible={ false }>
{ __(
'This column count exceeds the recommended amount and may cause visual breakage.'
) }
</Notice>
) }
</>
) }
{ ! inherit && (
<OrderControl
{ ...{ order, orderBy } }
onChange={ setQuery }
/>
) }
{ ! inherit && showSticky && (
<StickyControl
value={ sticky }
onChange={ ( value ) => setQuery( { sticky: value } ) }
/>
) }
</PanelBody>
{ ! inherit && (
<PanelBody title={ __( 'Filters' ) }>
<TaxonomyControls onChange={ setQuery } query={ query } />
<AuthorControl value={ authorIds } onChange={ setQuery } />
<TextControl
label={ __( 'Keyword' ) }
value={ querySearch }
onChange={ setQuerySearch }
/>
{ isPostTypeHierarchical && (
<ParentControl
parents={ parents }
postType={ postType }
) }
{ displayLayout?.type === 'flex' && (
<>
<RangeControl
label={ __( 'Columns' ) }
value={ displayLayout.columns }
onChange={ ( value ) =>
setDisplayLayout( { columns: value } )
}
min={ 2 }
max={ Math.max( 6, displayLayout.columns ) }
/>
{ displayLayout.columns > 6 && (
<Notice
status="warning"
isDismissible={ false }
>
{ __(
'This column count exceeds the recommended amount and may cause visual breakage.'
) }
</Notice>
) }
</>
) }
{ ! inherit && (
<OrderControl
{ ...{ order, orderBy } }
onChange={ setQuery }
/>
) }
{ ! inherit && showSticky && (
<StickyControl
value={ sticky }
onChange={ ( value ) =>
setQuery( { sticky: value } )
}
/>
) }
</PanelBody>
</InspectorControls>
{ ! inherit && (
<InspectorControls>
<ToolsPanel
className="block-library-query-toolspanel__filters"
label={ __( 'Filters' ) }
resetAll={ () => {
setQuery( {
author: '',
parents: [],
search: '',
taxQuery: null,
} );
setQuerySearch( '' );
} }
>
{ !! taxonomiesInfo?.length && (
<ToolsPanelItem
label={ __( 'Taxonomies' ) }
hasValue={ () =>
Object.values( taxQuery || {} ).some(
( terms ) => !! terms.length
)
}
onDeselect={ () =>
setQuery( { taxQuery: null } )
}
>
<TaxonomyControls
onChange={ setQuery }
query={ query }
/>
</ToolsPanelItem>
) }
<ToolsPanelItem
hasValue={ () => !! authorIds }
label={ __( 'Authors' ) }
onDeselect={ () => setQuery( { author: '' } ) }
>
<AuthorControl
value={ authorIds }
onChange={ setQuery }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !! querySearch }
label={ __( 'Keyword' ) }
onDeselect={ () => setQuerySearch( '' ) }
>
<TextControl
label={ __( 'Keyword' ) }
value={ querySearch }
onChange={ setQuerySearch }
/>
</ToolsPanelItem>
{ isPostTypeHierarchical && (
<ToolsPanelItem
hasValue={ () => !! parents?.length }
label={ __( 'Parents' ) }
onDeselect={ () => setQuery( { parents: [] } ) }
>
<ParentControl
parents={ parents }
postType={ postType }
onChange={ setQuery }
/>
</ToolsPanelItem>
) }
</ToolsPanel>
</InspectorControls>
) }
</InspectorControls>
</>
);
}
27 changes: 17 additions & 10 deletions packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
}
};

function TaxonomyControls( { onChange, query } ) {
const taxonomies = useTaxonomies( query.postType );
export const useTaxonomiesInfo = ( postType ) => {
const taxonomies = useTaxonomies( postType );
const taxonomiesInfo = useSelect(
( select ) => {
const { getEntityRecords } = select( coreStore );
Expand All @@ -51,6 +51,11 @@ function TaxonomyControls( { onChange, query } ) {
},
[ taxonomies ]
);
return taxonomiesInfo;
};

export function TaxonomyControls( { onChange, query } ) {
const taxonomiesInfo = useTaxonomiesInfo( query.postType );
const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
const taxonomyInfo = taxonomiesInfo.find(
( { slug } ) => slug === taxonomySlug
Expand Down Expand Up @@ -102,17 +107,19 @@ function TaxonomyControls( { onChange, query } ) {
return null;
}
return (
<FormTokenField
<div
key={ slug }
label={ name }
value={ getExistingTaxQueryValue( slug ) }
suggestions={ terms.names }
onChange={ onTermsChange( slug ) }
/>
className="block-library-query-inspector__taxonomy-control"
>
<FormTokenField
label={ name }
value={ getExistingTaxQueryValue( slug ) }
suggestions={ terms.names }
onChange={ onTermsChange( slug ) }
/>
</div>
);
} ) }
</>
);
}

export default TaxonomyControls;
9 changes: 9 additions & 0 deletions packages/block-library/src/query/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,12 @@
max-height: none;
}
}

.block-library-query-toolspanel__filters {
.components-form-token-field__help {
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
margin-bottom: 0;
}
.block-library-query-inspector__taxonomy-control:not(:last-child) {
margin-bottom: $grid-unit-30;
}
}