Skip to content

Commit

Permalink
WIP: Try Query Loop filters with ToolsPanel
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras committed Aug 1, 2022
1 parent 6d62fa9 commit 402bf1f
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 65 deletions.
1 change: 1 addition & 0 deletions packages/block-library/src/query/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export function QueryContent( {
return (
<>
<QueryInspectorControls
clientId={ clientId }
attributes={ attributes }
setQuery={ updateQuery }
setDisplayLayout={ updateDisplayLayout }
Expand Down
191 changes: 127 additions & 64 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 Down Expand Up @@ -41,6 +43,7 @@ function useIsPostTypeHierarchical( postType ) {
}

export default function QueryInspectorControls( {
clientId,
attributes: { query, displayLayout },
setQuery,
setDisplayLayout,
Expand Down Expand Up @@ -100,78 +103,138 @@ 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-support-panel` }
label={ __( 'Filters' ) }
resetAll={ () => {
setQuery( {
author: '',
parents: [],
search: '',
taxQuery: null,
} );
} }
// key={ panelId } // TODO: do I need this?
panelId={ clientId }
>
{ /* // TODO: probably have a hook for available taxonomies and add conditionally */ }
<ToolsPanelItem
label={ __( 'Taxonomies' ) }
hasValue={ () => true }
onDeselect={ () => setQuery( { taxQuery: null } ) }
panelId={ clientId }
isShownByDefault
>
<TaxonomyControls
onChange={ setQuery }
query={ query }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !! authorIds }
label={ __( 'Authors' ) }
onDeselect={ () => setQuery( { author: '' } ) }
panelId={ clientId }
>
<AuthorControl
value={ authorIds }
onChange={ setQuery }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !! querySearch }
label={ __( 'Keyword' ) }
onDeselect={ () => setQuerySearch( '' ) }
panelId={ clientId }
>
<TextControl
label={ __( 'Keyword' ) }
value={ querySearch }
onChange={ setQuerySearch }
/>
</ToolsPanelItem>
{ isPostTypeHierarchical && (
<ToolsPanelItem
hasValue={ () => !! parents?.length }
label={ __( 'Parents' ) }
onDeselect={ () => setQuery( { parents: [] } ) }
panelId={ clientId }
>
<ParentControl
parents={ parents }
postType={ postType }
onChange={ setQuery }
/>
</ToolsPanelItem>
) }
</ToolsPanel>
</InspectorControls>
) }
</InspectorControls>
</>
);
}
38 changes: 37 additions & 1 deletion packages/block-library/src/query/variations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { postList } from '@wordpress/icons';
import { postList, preformatted } from '@wordpress/icons';

/**
* Internal dependencies
Expand Down Expand Up @@ -31,6 +31,42 @@ const QUERY_DEFAULT_ATTRIBUTES = {
};

const variations = [
{
// This variation is just for testing purposes and will not be merged..
name: 'products-list',
title: __( 'Products List' ),
description: __( 'Display a list of your products.' ),
icon: preformatted,
attributes: {
query: {
perPage: null,
pages: 0,
offset: 0,
postType: 'product',
order: 'desc',
orderBy: 'date',
author: '',
search: '',
exclude: [],
sticky: '',
inherit: false,
taxQuery: null,
parents: [],
},
},
innerBlocks: [
[
'core/post-template',
{},
[ [ 'core/post-title' ], [ 'core/post-date' ] ],
],
[ 'core/query-pagination' ],
[ 'core/query-no-results' ],
],
isActive: ( blockAttributes ) =>
blockAttributes?.query?.postType === 'product',
scope: [ 'inserter' ],
},
{
name: 'posts-list',
title: __( 'Posts List' ),
Expand Down

0 comments on commit 402bf1f

Please sign in to comment.