Skip to content

Commit

Permalink
[Block Library - Query Loop]: Try filters with ToolsPanel (#42629)
Browse files Browse the repository at this point in the history 
* WIP: Try Query Loop filters with ToolsPanel

* add hook for taxonomiesInfo

* update panel item styles

* address feedback

* hide taxonomies filters by default
  • Loading branch information
@ntsekouras
ntsekouras authored Aug 8, 2022
1 parent d07ad8b commit dafdbdc
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 75 deletions.
194 changes: 129 additions & 65 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
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
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
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 {
margin-bottom: 0;
}
.block-library-query-inspector__taxonomy-control:not(:last-child) {
margin-bottom: $grid-unit-30;
}
}

0 comments on commit dafdbdc

Please sign in to comment.